The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Do I really, really need to move to SASS?

  • # December 21, 2012 at 1:19 am

    For me, variables and nesting in SCSS is the selling point. And with Codekit you don’t have to switch over to the web browser for a reload. I have a Safari window to the left and the code editor (Chocolat) to the right.

    # December 21, 2012 at 4:00 am

    To me, it’s like learning an entirely new language. I’m already familiar with CSS, and learning how to use all these crazy variables and mixins just seems like a lot of work for a little extra convenience.

    If I were starting an entirely new site, I’d definitely give SASS a try, though

    # December 21, 2012 at 4:20 am

    This reply has been reported for inappropriate content.

    I have the same thing :D I should look at SASS but I don’t really have time atm. Love the idea of vars though :)

    # December 21, 2012 at 5:18 am

    I am testing SASS (and LESS) right now as well. Pre – processors have several benefits (which have been mentioned already) but they also have several drawbacks:

    (1) You need to install and setup additional things on your computer. You need to do this on every computer you use for work. Plain CSS can be edited with even the most basic editor (e.g. Notepad) which means you can work on them from any computer even if you don’t have access to your own workstation.

    (2) If you work with other people then EVERYONE should use the same pre – processor (this includes your clients if they might tweak the CSS code). CSS is a universal standard. SASS is not.

    (3) Currently most editors do not support SASS. Those that do (most of them with plugins, which might not work when new versions of the editor are released) do so in a limited way. For example they might color code your SASS but code hinting and auto-complete might not work as good as with CSS (or they might not be available at all)

    (4) Debugging your CSS code (e.g. with Firebug) becomes less direct and you might have to install yet more things on your computer to overcome this issue.

    You have to weight the pros and cons and decide if pre processors are for you. For a website with 20 pages I doubt that SASS will actually help you. Then again, if you have some extra time available, you might try SASS out for a project just to learn the technology.

    If the popularity of pre processors continues to increase then many of the above issues (editors, debugging etc) might be resolved in the next 1-2 years. At that time we might also know which pre processor will “win”, so you will not have to waste your time learning a pre processor that will soon die.

    Finally, as somebody else said, if you are on Windows try LESS first. I found no good apps to compile SASS on windows, while i really like SimpLess for Less. Not only it compiles your code, but it also uses prefixr, which means you don’t need to use mixins to get cross-browser support. You just enter the standard CSS rules in your Less code and SimpLess will add vendor specific prefixes if and when needed.

    # December 21, 2012 at 6:36 am

    @Zoom A response

    1) Yuh you need to install the preprocessor, but chances are your already setting up some kinda of development server on your own machine and its not hard to install. You can edit it with notepad all you need to do is compile it at some point, you can edit the output css by hand aswell if your away from a comiplers

    2) While its good practice to be on the same page about what preprocessor your using in a development team yes but not essential, As for not using it incase the client decides to change something later on if you apply that logic you shouldn’t use any third party libraries in designs either.

    3) Syntax support for editors is like alot of things, you ain’t always going to have it available, doesn’t mean you shouldn’t use it, Probably quite alot of editors don’t support html5 syntax either. And the really liked code editors do support Sass, either way you should use Scss syntax, which is basically CSS with the added options of Sass functionallity available i.e. you can copy and paste a css file into a scss and it will compile (unless you’ve not got your css correct)

    4) Debugging, while it may add a extra layer of complexitity benifits are greater, plus you can get an addon for firebug that allows you to debug to scss, plus with sass you can compile the code with line-number comments automatically making it easy to reference what piece of code has generated what rules in the css.

    And tbh I doubt either Less or Scss will die in the next 1-2 years, twitter bootstrap uses less and its a fairly popular framework, but there are sass versions out there. There are aother sass frameworks out there too, like zurb, plus sass has compass a fairly extensive library of extra functionality

    # December 21, 2012 at 7:23 am


    If you or somebody else edits the CSS directly then you will have to incorporate all those changes to your SASS file before you can continue working. Otherwise when you recompile your SASS all those other edits will be overwritten.

    Pre processors do not allow you to do anything more than what you can already do with plain CSS. Their main “selling point” is convenience and speed of coding. Unfortunately using pre processors currently also results in several inconveniences (need for compilers and additional apps) and things that can reduce your coding speed (less than ideal support in editors and IDEs when compared with plain CSS).

    So it is not about if you can or can’t do something. You can do everything you want with a per-proccessor and without one. It is about how convenient and fast it is to do something and a pre processor is not always the right answer. The right answer depends on the project (how big?), on the way you code (what level of support does your favorite editor / IDE have for SASS?) and how much of the power of the pre processor you actually need.

    # May 25, 2015 at 8:57 am

    I have found on netbeans, sass causes it to crash losing the sass code you are working on. Also you cant edit with chrome extension. Sass needs to work both directions to be usefull. Also you cannot revert refactoring if you rename classes.
    The main reason I wanted to try sass was to break up css code into sections.But I think there are better solutions in netbeans.
    I also do not like the idea of trying to make css into something else.

    # May 26, 2015 at 2:13 am

    @ToxicFire Twitter Bootstrap will switch from LESS to SASS in the upcoming Version 4. I doubt, that less/styles will die within the next 2-3 years, but atm SASS seems to be the clear winner and is probably the “safer” choice.

    ** usefulness of sass in small projects **
    IMO sass makes sense in small projects as well. Not because of the argument “you may switch your color in 2 seconds”, which doesn’t happen very often and seriously – why would I introduce a new language just for such a rare occasion?

    The main argument for small projects is IMO the fact, that you may safely and easily REUSE code from older projects (as your projects are small, you’ll have plenty of them, I assume). Useful mixins and functions, even base stylings. If you know “I’ve done this before”, you don’t have to search your old projects css and copy the concerned lines, instead you just include the mixin for it.

    Btw, a good Editor, supporting SASS is crucial IMO for a lot of its features:
    – Variables are nice, but if you don’t have autocompletion, you need to copy them the same way you’ve copied the hex values before
    – Same goes for mixins – if you need to copy/look up the name everytime you use them, it’s not much better than just copying the css lines.


Viewing 8 posts - 16 through 23 (of 23 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed