Do I really, really need to move to SASS?

[IntegrityWebDev]

I follow this, and similar sites regularly and I’ve learned so much from them that I feel I need to pay Chris. :-) However one area where I’m still not clicking is SASS/LESS and the like. These, days in Chris’ posts it seems to be a given that you are using it. However I’m wondering if it’s really something I need.

I am a full time professional web designer but 98% of my work consists of sites with less than 20 PHP/HTML pages. I’ve worked on large/team projects but they are rare for me. Also (don’t hate) I primarily use Dreamweaver for all my design. I hand scrub the code, add proper comments and make sure the end result comes out W3C compliant…but I just don’t get the need for SASS. What am I really missing here?

I’ve seen Chris posts and the many comments on the virtues of it but I’ve yet to be sold on how this will really save me any discernible time. I have a starting template I use so that within 10 minutes the bare framework of most of my sites are built (including the CSS and using prefixfree).

I’m not trying to be stubborn here, I’ve just yet to be convinced that moving to something like SASS is going to “rock my world” on these sub-20-page sites.

Any thoughts would be appreciated…and hopefully something beyond “SASS ROCKS!”

[wolfcry911]

In a word, no. (JMHO)
I would try to persuade you away from Dreamweaver, however ;)

[uneart]

Besides the nesting which @ChrisP already mentioned, I really like variables and mixins. With those you can specify things like colors and often used elements in one place and if you have to change them later on, you jsut have to adjust them ONCE and it will change within the entire project.

Example for variables:

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
border-color: $blue;
color:
darken($blue, 9%);
}

.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}

Even if you have the extra step to compile (which can be atuomated with software like Codekit) you save a huge amount of time if changes occur.

[IntegrityWebDev]

I like the concept of variables but with a sub-20 page site if the client wants to change from red to blue, we are talking 2-3 minutes worth of work to change the styles. Doesn’t really seem to be a time saver there…or am I missing it?

[Senff]

It’s not really necessary, and don’t feel inclined to use it if you don’t want to. No need to feel guilty about not seeing the value of it….yet.

The thing with SASS is, in my opinion, at first it does look like it’s more work, or at least a little more complex, BUT if you try it a few times, that’s when you see how it can serve you — even for small sites. It’s something you have to try yourself and then I can almost guarantee you’ll like it. Myself, I do use it even for static 1-2 page sites. Just because I’m already very used to it, and even on that level, it saves me some dev time.

Don’t take my (or anyone else’s) word for it, try it a little bit and see if you think it’s useful.

[KGA109]

I’m dealing with the same dilemma right now, but I’m more convinced to learn it merely because I want to stay somewhat on top of things regarding front end development. I don’t even do this full time anymore and don’t want to, but I’ve read enough talk about it that I’m convinced it’s the way to go.

(but the learning curve to take it all in, is always hard to justify, in a sense).

[Andy Howells]

Variables in stylesheets rock. I have an _vars.scss file in all my projects, so I stack stuff in there like gutter sizes, colours etc. Then can just jump in, switch something out and recompile, no faffing about changing multiple lines of code.

[Chris Coyier]

If you need help getting started, here is a screencast that gets you going in just a few minutes:

https://css-tricks.com/video-screencasts/111-get-yourself-preprocessing-in-just-a-few-minutes/

[GMidonnet]

I understand your reluctance to spend the time getting up to speed but soon enough your templates will be updated and it will be second nature to you.

Do you NEED to upgrade now for 20 page sites … no. But, if you stay in the coding game you will have to upgrade sooner or later. May as well be now.

[kevinvance]

Of course you don’t have to. But seriously, the barrier to entry is actually way lower than it seems. Especially if you’re working alone a project. You can just start with one feature for a project, and get used to it that way. That’s how I started with preprocessors (with Less–I’ve since repented :). I found that it felt really natural, and was easy to move on from there. I still don’t use it to it’s full potential all of the time, but it’s really easy to cherry-pick the parts that are going to help you most with any given project.

[banunn]

I noticed that you said that you are using Dreamweaver in your day to day work flow. A few of my buds that use DW are also using PC’s for general dev. If you are on a PC you might take a look at using something easy to configure like less first. It’s really easy to get going with and you could start with just using the local JS file that they provide. Once you decide that you are into LESS, you could either go further down that rabbit hole, or move over to SASS

[magnus_vb]

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.

[KeithPickering]

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

[Zoom]

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.

[ToxicFire]

@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

[Author]

Posts