I've been meaning to get into/start using less/sass but am having a major hurdle.
I normally edit my css using cssedit/espresso 3 which is basically like firefox's firebug.
After goofing around with codekit etc, it just seems really cumbersome process in terms of being able to see css changes live and being able to experiment.
Is there a similar solution (to css edit/espresso Live preview) of being able to edit styleshees live in less/sass approach?
I can only answer you question for LESS. Personally i think grunt(tool) are great compile your source for production or syntax checking in collaboration projects.
The best tool for "live" testing and editing your LESS code seems your browser in combination with a preferred text/css editor.
See also: http://lesscss.org/#usage "Client-side usage" here you will find everything you need. Also they will give you the same message:
Client-side is the easiest way to get started and good for developing
your LESS. For production and especially if performance is important,
we recommend pre-compiling using node or one of the many third party
tools.
You will have the opportunity to setup a global javascript object with settings. The most important setting in this case seems env set it to development this will prevent caching of your LESS files and show compile error direct in your browser:
To start add something like this to the head of a html file:
<link rel="stylesheet/less" href="test.less">
<script type="text/javascript">less = { env: 'development', poll: 5000 };</script>
<script src="less.js" type="text/javascript"></script>
If you saved the above in less.html call in your browser http://localhost/less.html#!watch now edit your LESS files (test.less in this example). After saving your LESS file the browser will show you your results "live" (within 5 seconds).
You can use #import in test.less and also the imported files are under watch.
Related
I see this html template, and inspect it using Chrome inspection tool.
I'm surprised to know that my browser can detect the scss files instead of the compiled css one.
Then, I push Ctrl+U to view the page source, try to find 'scss' but it gives nothing in result.
So, how does the browser know the scss files?
P.S. I'm new to scss/sass/css pre-processor things
You can read this article for more about Sourcemaps: https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
This is mainly used for debugging and most of the times is stripted from production environments (in this case I guess they left it for people to check the actual source code and learn as you did :P)
What you are seeing is called Sourcemaps. Sourcemaps allow you to see the original source instead of the compiled CSS. This is usually used for debugging.
I'm using Codekit to minify all my CSS via Sass. This works great but causes an issue when inspecting the code as everything appears on line 1! I use the lines as a quick way to find the code I'm looking for.
I use the Codekit plugin for Coda, which means every time I make a change to a .scss file and save, it just auto compiles the code.
I guess everyone will tell me not to compile the code until launch, in an ideal world that's great but there will ALWAYS be a need to inspect the code without once it's all been compiled.
Is there a way around this? Or is this a downside of compiled code? What processes do people go through to get to the minified code? How can I tell which .scss the change is in?
I could set it to be less compressed so it's not all on one line but I would then lose the benefits of compressing it.
These are the settings I have Codekit set to:
Codekit supports Source Maps, which will let Google Chrome show you the original code even after minification.
In your compilation settings, check the Create a source map box for SASS.
For more information, check out this Team Treehouse article (the article deals with JavaScript, but the same principle applies to CSS too) and the Codekit SASS documentation.
I use Less with my site. Let say the code look like below.
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.min.js"></script>
</head>
<body>
...
</body>
</html>
When I updated the styles.less file, and refresh the page, Less.js will compile the less file and apply to the page. But I just wonder where is the compiled CSS file stored? Does less.js call lessc to compile the less file?
In the setup you gave (the HTML page), you are letting the client to worry about interpreting the Less file.
To be exact, Browser loads the JavaScript library you link to, and then this JavaScript interprets the styles.less file.
The actual css file is not stored on the server, as it is all the browser-sided work, and I doubt the browser stores it somewhere except RAM.
This does not sound like a good approach though. We, generous site owners with high-end servers love to lift the computational bit off the clients as much as possible. We do not want to upset an iPhone user running low on battery without neccessity.
Alternatively, you run lessc styles.less > styles.css on your styles file after you finished editting. And then use styles.css in HTML directly, also remove the less.js from HTML.
Question you might want to ask: How do I make compiling to css automatic then?
There are several solutions:
Automate the compilation of less file on it being changed, using some software to watch a file or directory.
The Editor you are using might have compile less feature, or be added as an extension.
You might want to consider strat using a web framework. It is an overkill for just compiling less, but if you get other advnatages from web framework or are already using it - that is a good option. An example of using Less middleware with Express framework.
Today I discovered less stylesheet and egor to learn it.
But i am confuses it is showing inside inspect element Internel Server error 500 in linking less.
I first install it via command in nuget console
ie
PM -> install-package dotless
and then relate the stylesheet in my header content like
<link rel="stylesheet" type="text/less"
href="Content/style.less" />
Is this correct way? If not help required.
The style you used is only recommended for debugging. You need to add the style.js script to your site, like below. You may also need to make sure your server is configured to serve .less files by adding the MIME type to your site configuration.
<script src="less.js" type="text/javascript"></script>
But no, that is not the correct way for production use. Your browser has no idea what LESS is. Your browser understands CSS only. For test purposes, less.js is able to convert .less files into a usable form, but it's not recommended for production use.
Instead, the point of LESS is that it compiles to CSS. Then you provide that CSS as your stylesheet in the traditional way. The LESS documentation should help you out. As a quick example, here's how you'd compile LESS to CSS.
lessc styles.less > styles.css
In the above command, lessc is the compiler program. styles.less is your LESS sheet being passed to the compiler. The output would normally go to STD OUT and you'd see it in the console, but since we included > styles.css we're redirecting that STD OUT into a text file called styles.css.
I'm considering using less in an upcoming project but have been trying to figure out the best way to work with it while in development.
Usually when developing a site I'll write my html and css then start testing it in the browser, see how it looks, refine, reload, and repeat the whole process until I'm happy with how everything looks.
A crucial part of the process is using the Inspect Element feature in the browser to identify the piece of CSS I need to change. Usually just by looking at the line number I know exactly where to go in my CSS file.
But if I use Less (or any other method of combining/compressing my CSS) it makes the line numbers useless. I know I could use Find to search for the section of code but line numbers are much faster.
This is especially true when working on a project that involves other developers or large CSS files.
I just wondered how others deal with this, or maybe there's a better process?
Minified CSS really should only be going out to the production version of your site. When you're performing tests/changes etc, this should all be done in some test or development version of your site in a secondary server area where you can have the line-numbers version of css available. The same would go for JavaScript. On the production viewable copy, you want it minified. In development, you don't.
In any event, you should always have 2 copies of your css. The first copy is the primary source copy that is your development copy. It has all of your properly formatted styles with line-breaks in it. The other is the very latest minified version of your css that went to production. This will allow you to switch between the 2 files rapidly in the event that you need to work something out, assuming your site uses some sort of templated delivery (layout pages, master pages, or whatever).
The minified version will only be useful in the final delivery. All other needs should use the master copy. It might not be a bad idea to put a configuration in server-side portion of your site that determines what style sheet to use. That way you can simply change a configuration setting and go into a "debug" mode.
I agree with Joel - that's how I handle it. A build script minifies the CSS (and JS) before each release is FTP'ed to production. I just have a switch in PHP like:
if ($config->prod()) {
// incldue the minfied css
} else {
// include all the original files
}
Personnaly, I use an ant build script to make a production version:
it "condense" multiple css files in one
then it minify them with YUI compressor
same for scripts
(page recomposition to point to the newly generated files)
this way you divide your http request for those files, and gain some bandwith from 30% to 70% i'd say. depends on gzip also.
in my case, the dev version have:
18 css weighting 178ko
reduced down to 1 css at 96ko in the production version
I personally use tools to minify and inject the CSS into the browser each time i save my Less file. So i see each change immediately. This way it's pretty clear what just happened. I don't need the referencing line numbers that much any more.
I recently started using source maps, to see the correct file and line numbers (of my less files) when inspecting CSS in the browser again. I think that is what you are looking for. I personally don't need this extra fanciness that much.