As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
How do you guys do maintenance on CSS built with Less/Sass?
One of the things I like about Dev Tools/Firebug is the ability to see the line number of a css styling. Is there a good way to do this with CSS preprocessors other than having to manually search through the .less/.scss file to find the code I want to modify?
Chrome Developer Tools now supports Sass debugging out-of-the-box.
Updated to include source maps:
Previous versions used inline comment in your css to provide a refernce to the source code (see below how-to). recent versions of sass (3.3+) and chrome (31+) use source maps for that:
Make sure you have Sass 3.3.x
Compile your Sass with the --sourcemap flag.
In Chrome/ium DevTools open settings and click general.
Turn on "Enable CSS source maps".
More info is available on the Chrome dev tools blog:
https://developers.google.com/chrome-developer-tools/docs/css-preprocessors
Older versions:
1. First, you should compile your Sass with --debug-info turned on.
2. In Chrome/ium go to about:flags
3. Enable Developer Tools experiments
4. In your inspector (F12), open "Settings", then go to the "Experiments" tab
and check "Support for SASS".
If you're making a choice as to which you should be using, this article on css-tricks might be of interest to you.
I have come to experience that using LESS or SASS has more advantages than disadvantages. Though this is certainly a disadvantage I can only suggest you structure your files well so any styles you seek are easily found using other references, here are a few things you can do:
Document areas of your stylesheet; ie /* General */, /* Header */ and /* Footer */
Use logical and sensible names for classes you can recognize quickly (and don't number them like error1-error10 or something)
Learn to dissect the class/element/id selectors and think about how/where you would have written them.
Use CTRL+F, often the precise attribute or one near it is fairly easily found this way
SASS
There is now a way to debug SASS in firefox using an extension that reads and displays the sass files in the firebug inspector. To use, install the extension and enable the respective debug flags.
https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/
Edit: as of 2014-07-06, this plugin is no longer available for download. FireSass has been discontinued.
Chrome/Webkit versions have been popping up around the net and theres a beta feature in chrome to add support for SASS debugging. It's based on the same debugging information used in the firefox version. Haven't been able to judge any of them properly as of yet, nor found something which is publicly accepted as being the plugin for the job as of this writing.
LESS / STYLUS
As this tweet #jaketrent points to explains, there is progress on the debugging side in chrome, but nothing baked in yet and given the state of the LESS github it might still take a while... Both solutions are based on the beta feature for SASS debugging support in chrome, basically adding the same debug information as SASS does.
https://github.com/cloudhead/less.js/pull/1038
https://github.com/LearnBoost/stylus/pull/886
I rarely have issues with maintenance/debugging in LESS -- we always compile on the server end and reference only the CSS file in the HTML page. This makes it so there's always a one-to-one correspondence with the webpage and a file on disc.
And then when I have to edit the LESS file, I find that LESS, since its pretty much CSS+extra markup, it's quite easy to backtrace anything I'm confused about to the originating statement in CSS. If it's a mixin, it's pretty obvious (since I usually use mixins to prevent having to do all the vendor prefix stuff repeatedly), and then it's just a logical hierarchy since we use the class nesting feature, so finding:
div#awesome aside ul
is as easy as finding:
div#awesome{
aside{
ul{
padding: 0;
}
}
}
(although we try to not go more than 3 layers deep)
I have no real experience with SASS but I didn't like how far removed from CSS it was when I first looked at it a few years back (and haven't been back since...)
Some tips:
Include both the .sass and the .css files in version control. This way everyone has the most current changes.
If you organize your stylesheets into logical areas, maintenance is a breeze.
Also: try to use fewer than three main colors, and then use SASS color functions to modify them and store results in variables that you can reuse throughout your design/theme.
Ex:
$chartreuse: #7fff00
$olive: darken($chartreuse, 32%)
That way, you only have to maintain one color. And the rest will be recalculated.
Until recently, there were no in-browser SASS debugging tools.
There is now a Firefox plugin called FireSASS (https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/)
In your sass --watch command, add a -g for --debug-info so that it will output the hooks needed for the plugin to run.
I switched from less to sass, because of firesass.
With this you get the original sass line in firebug.
install firesass if you use sass
Related
I am going through the code school course "Sass Foundation". I am on a level where the professor tells about the compass framework.
When I installed it I realized that the code which it generates does not include the -ms- and -o-.
That is why I would like to ask professionals for some tips, and information which I cannot find here on Stack and on the Internet.
Is the Compass dead now? If yes what should I use instead of it?
(to be sure that it will add -ms-, -o- etc.)
Is the Sass dead now?
I did some research and the people say that I should not use the .sass but .scss, but on the other hand, if I use the .scss I won't be able to use the indented syntax. Should I avoid the indented syntax? If yes please specify why.
Since none of the answers are 100% accurate, I will provide my own answer.
Is Compass dead? Yes, apparently. According to their GitHub page:
Compass is no longer actively maintained.
Compass seems to be dying because it is written in Ruby and there are much faster Sass transpilers written in C/C++, mainly LibSass.
What should you use now? Based on this GitHub issue conversation, I would recommend switching to Bourbon for a base set of utility mixins.
Is Sass dead now? No, absolutely not. Modern Sass transpilers, including LibSass, fully support the Sass specification and work great.
Should you avoid the Sass syntax? No. In my opinion, the Sass syntax is cleaner, easier to read, and is definitely easier to type.
You can mix Sass and SCSS syntax. So you can import Bourbon SCSS syntax into your Sass syntax document and use the mixins without issue.
In conclusion, use the syntax that makes you happier.
Compass is not, dead - it did what it did well - but it's now been replaced in most peoples' work flows. People started using CodeKit shortly after that- and now they generally use task runners and build tools like, grunt, gulp, brunch, broccoli etc.
What you want is pre-processing and something that has autoprefixer. This could be any of the things mentioned above and can usually be installed and configured with a collection of npm modules. It all depends on the project you're working on. I'd say that gulp is the most popular right now. (I use Ember, so Ember CLI does that for me)
.sass is just another syntax (the original one, I believe). Most developers use .scss and I'd encourage you to stick with that syntax because it's more like CSS and when sharing projects people will thank you. (although I prefer stylus)
EDIT
Afterthoughts... I'd say that "Sass Foundation" is what is dead. That course is going to cause you more trouble then help you. Just write scss and learn new bits as you need them. It's just CSS with some helpful features like variables and nesting.
Assuming I'm understanding what you're asking, yes, I would transition to SCSS instead of using SASS. Why? Generally speaking, SASS combines both Sass and SCSS. Sass itself is an older syntax that primarily deals with indentation (instead of brackets, etc.) and doesn't present any real addition to CSS. On the other hand, SCSS is meant to extend CSS3 by providing additional functionality such as variables, nesting, and others. The other bonus is that technically speaking, every valid CSS3 stylesheet is also a valid SCSS stylesheet.
So to conclude, I would definitely consider making the change to SCSS as you will find this is the standard among a lot of frameworks and tools used in the industry, plus it is a newer syntax in comparison to Sass and provides a good deal more functionality to make your life that much easier as a developer.
If you want to find out more information, just take a look at their website: http://sass-lang.com/
So to answer your questions specifically:
No, it is not dead, it has just been updated to follow industry standards. There are many alternatives available. For example, a popular one is Gulp.
Sass isn't dead either, however most developers have moved to SCSS instead.
I would go with SCSS, due to what I have described above.
I've been using the Javascript implementation of LESS for working on a project, and it works great, however I'm now finished the project and in an effort to improve site performance I'd like to get the processed version of the CSS to use directly, rather than running it through LESS every time.
Can someone tell me if/how it's possible to view the processed LESS styles on my website? Perhaps it's under the hood of developer tools or something?
Thanks
Check out a LESS compiler, here's the link from the LESS official site:
https://github.com/less/less.js/wiki/GUI-compilers-that-use-LESS.js
LESS itself comes with a command line compiler.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I have knowledge of HTML, CSS, and jQuery. Recently I knew about Sass and less. As they both are the style sheet language I am a little bit confused about where to use both of them as CSS is already there and it is also widely used in every website. So how to know where to use these (Less, Sass) in that particular field.
Another doubt comes to my mind is, is it fine to use Sass and Less in wordpress instead of default CSS?
As zzzzBov said, LESS and SASS are css preprocessors.
Basically, you pick one and write your style definitions in that language. When done you run it through the preprocessor and it will generate a normal CSS file for you. That normal file is what you would use in your site.
I'd highly suggest that you skip using SASS/LESS or any other preprocessor until you are more familiar with CSS in general.
A little more information about LESS.
LESS can be run ahead of time as an actual preprocessor OR you can simply link the less.js file and your .less file and let the browser do it. The problem with letting the browser do it is that every single browser that hits your site, for every single page, will have to "recompile" the css in order to render your site correctly. Considering you have zero control over the computers hitting your sites this might result in a "slow" site from some peoples perspective.
Further, that javascript only works in some of the browsers, further limiting it's usefulness.
Quite frankly, CSS is one of those things that you generally set up once for a site and leave alone for a year or more. So, it may simply just not be worth it.
SASS and LESS are two Domain Specific Languages that are converted to CSS via a preprocessor. The preprocessor can run client-side in Javascript or server-side via PHP, Node.js, Rails, etc.
Either SASS or LESS would be excellent for a new project. Or if you're using a framework that makes use either technology. (Such as Bootstrap or Rails).
If you're modifying an existing web site which uses pure CSS (such as Wordpress) you should almost always extend and build off of the existing styles. Mixing plain CSS with SASS/LESS can be a mess especially if you are just learning the technology.
Both are here to make your job easier //save time, make your CSS more readable, you will no longer forget colors/margins or specific values that you used, because you can create variables, mixins etc.
If you feel like you would benefit from any of features provided, why wouldn't you use it? It's not mandatory to use those, it's not like I would use CSS for every project I create (majority though). Try it out, it won't take more than an hour to know basic features.
What are the best ways to use LESS for CSS.
Basically should the Devs write a Less File and then have it compile for production
Should I link the LESS code and the javascript file.
Or should I skip the LESS rout altogether and just remake the classes
I am trying to wrangle together some rather sloppy css and want to get control of it before making major improvements. I think it would be very good to have site wide variable so Less seems like a good thing with the variables and nesting.
I am replacing a lot of the background images with css gradients and box shadows so I am also trying to get rid of the vendor prefixes.
Sometimes I see what kindof looks like class overload but is it bad to append a lot of classes to an element such as
<div class="comment dark-shadow round-corners"></div>
Less is a great styling language. I use it extensively, and it really helps with code maintainability, as well as with speed of writing the styles.
I personally feel that your styles should not be dependent on javascript to render, so I use the less.app to compile all my LESS into CSS. I rest more peacefully knowing that all my CSS is there and that it works correctly before I put anything "live".
If you are interested I have also been compiling a LESS mixin library that can be very useful: https://github.com/jdmiller82/-lessins-
I agree with Jonathan, I don't think you should depend on the users browser to render the styles.
I came up with a solution that uses node.js on the server to intercept requests like styles.css and try to find the equivalent .less file (in this case styles.less) and parse it and return it as CSS.
So on your server you would just have styles.less but you could request the URL example.com/styles.css and get the parsed LESS file. That way the integration is seamless for the rest of your application and it doesn't require the user has JavaScript enabled either.
You don't have to be using node.js for the rest of your app either. I did this in a PHP application.
You can read my tutorial here: http://programming-perils.com/155/parse-less-files-on-the-fly-and-serve-them-as-css/
I realize this answer is about two years later than the above ones but I think the question is still relevant.
I think there are use cases where compiling some LESS client side is a good idea (provided you aren't supporting IE 8 or below) and you have a use case that validates it. For example, an application I've worked on recently has a customizable, theme-able interface where text colors, etc need to be modified based on whether the background color they're on is light or dark and may eventually need to support the ability for the user to change them and see those changes reflected on the site in realtime. This is a great use case for client side LESS I think. Note that only a small LESS stylesheet is compiled and the rest of the application LESS that's not related to theming is precompiled. I haven't seen much of a perceived difference in performance.
So when you see comments like "you don't seriously think any decent developer uses less clientside do you?", I'd take them with a grain of salt.
The way to use LESS for a production website is to compile LESS files into CSS files.
For local development you can have a file-watcher that rebuilds the CSS files for LESS files that were changed.
If you have multiple CSS files to produce from LESS, you should separate them out.
For example, if you have 30 less files and they produce two CSS files a.css and b.css, you will want to separate those two jobs so that you can compile faster. It's faster for developing because you will only compile a.css if you change any LESS files that affect it.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Any recommendations for a CSS minifier?
I’ll be rooting around Google and trying some out, but I suspected that the smart, proficient and curiously handsome StackOverflow community might have already evaluated the pros and cons of the heavyweights.
The YUI Compressor is fantastic. It works on JavaScript and CSS. Check it out.
There's also a .NET port of YUI Compressor which allows you to:-
intergrate the minification/file combining into Visual Studio post-build events
intergrate into a TFS Build (including CI)
if you wish to just use the dll's in your own code (eg. on the fly minification).
UPDATE 2011: And it's now available via NuGet also :)
I like Minify. In PHP and works with CSS or JavaScript.
CSSO is currently best minifier/optimizer.
If you use Python I would recommend slimmer which is probably not as fast as YUI Compressor but unlike csscompressor.net it doesn't choke on CSS hacks.
I'm biased since I wrote slimmer and I'm currently evaluating YUI Compressor to see how it handles hacks. An example of slimmer in action can be seen if you view the source of crosstips.org
Check out CSSTidy: http://csstidy.sourceforge.net/usage.php
And online at: http://cdburnerxp.se/cssparse/css_optimiser.php
If you are looking for an online tool, try this: https://csscompressor.net/
I've written an ultra fast CSS minifier in C#. The algorithm does not handle Javascript though. Thy this: http://www.ko-sw.com/Blog/post/An-Ultra-Fast-CSS-Minify-Algorithm.aspx.
Try closure-stylesheets.
Beside minification it also supports linting, RTL flipping, and class renaming.
It can also add variables, functions, conditionals, and mixins to CSS.
Also note that some of these features depend on rest of Closure Tools (which are very powerful on their own).
If you're looking for something in PHP, here's the link:-
Fat-Free Minify
Although it's part of the PHP Fat-Free Framework, it can also be used stand-alone.
I find that isnoop's CSS SuperScrub works very well. It can only handle direct links to CSS online though :/ You can get around that though by using your preferred pastebin service to hold the css code and just giving SuperScrub the raw link.
If your site is in ASP.NET, you can let your site do the CSS minification on the fly (so you don't have to do it manually each time you make a change). For example with this:
http://www.codeproject.com/KB/aspnet/CombineAndMinify.aspx
Perl has CSS::Minifier (and an XS version for extra speed).
Others have mentioned YUI Compressor, then the .NET port of it, and I'll add another link to the chain. StyleManager is a server control which wraps up the .NET port of YUI Compressor so you can use it just like you're used to using ScriptManager. It adds a bunch of other nice features too, like CSS constants, tilde (~) resolution w/in your background-image definitions, etc etc. It's tight, well documented, and I've used it on all my recent projects w/o an issue. Check it out - gStyleManager.com
Still "in beta", but should work fairly well. I use the code behind it in every project: http://claudiu.phpfogapp.com/ It's built in PHP and also hosts your *.css file for a fairly large amount of time, surely enough to let you test your code with the minified css. (I would only delete old css files if the space gets crowded on the server).
There is a codeplex project that will plug in to .net websites that will minify and compress the CSS and the JS files. There is also a comparison between the Microsoft AJAX Minifier and the YUI Compressor which shows the YUI coming out slightly better. There is an extra variation which combines the Microsoft Minifier and compression which drastically srunk the file.
Anyway the link is
http://xpedite.codeplex.com/wikipage?title=Minifier%20(CSS%2FJavaScript%20Minification%20Handlers)
This is how I did it for MVC3:
http://mkramar.blogspot.com/2011/08/css-and-javascript-minify-and-combine.html
The beauty of this approach is that it does it all on the fly and you don't have to pre-process files manually or configure post-build.
An online tool (much better than www.csscompressor.net which jacked my css up): http://www.cssdrive.com/compressor/compress.php does an excellent job.
C# example:
css = css.Replace("\n", "");
css = Regex.Replace(css, #"\s+", " ");
css = Regex.Replace(css, #"\s*:\s*", ":");
css = Regex.Replace(css, #"\s*\,\s*", ",");
css = Regex.Replace(css, #"\s*\{\s*", "{");
css = Regex.Replace(css, #"\s*\}\s*", "}");
css = Regex.Replace(css, #"\s*\;\s*", ";");
zbugs.com will be a good online tool for you, it will minify your css in a single click
Have a peek at the latest HTML5BoilerPlate by Paul Irish - it contains a build script to minify all your assets (including PNG's and JPG's). You can see a demo video here.