Grow your CSS skills. Land your dream job.

Do I really, really need to move to SASS?

  • # December 19, 2012 at 9:40 am

    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!”

    # December 19, 2012 at 9:44 am

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

    # December 19, 2012 at 9:54 am

    My personal favorite feature of SASS/Compass is the nesting..for example, styling anchor tags

    a {
    text-decoration: none;
    color: blue;
    &:hover, &:focus {
    text-decoration: underline;
    color: green;
    }
    }

    same thing with nesting media queries..

    .container {
    .content {

    }
    aside {

    }
    @media screen and ( min-width: 500px ) {
    .content {

    }
    aside {

    }
    }
    }

    # December 19, 2012 at 10:17 am

    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.

    # December 19, 2012 at 10:34 am

    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?

    # December 19, 2012 at 10:51 am

    May not save much time, but instead of searching through your stylesheet to find all the #00F’s and replace them with #F00′s, it’s much easier to change the variable at the top of your document once. It drops your 2-3 minutes worth of work down to 2-3 seconds.

    # December 19, 2012 at 10:52 am

    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.

    # December 19, 2012 at 11:08 am

    What is a good book to learn about SASS?
    I think I’ll have to get in to it. It looks like it could be very usefull, especially if a client says I want that colour a bit lighter.

    I’m a very newbie web designer, but want to get into a lot of different things.
    Really want to get into WordPress theme creating.

    # December 19, 2012 at 11:12 am

    @FragaGeddon, I’d look into [SASS w/ Compass](http://compass-style.org/ “”), I don’t have a book to recommend, but the site has all the documentation to get you started.

    # December 19, 2012 at 11:31 am

    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).

    # December 19, 2012 at 12:49 pm

    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.

    # December 19, 2012 at 2:16 pm

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

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

    # December 20, 2012 at 10:47 pm

    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.

    # December 20, 2012 at 11:22 pm

    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.

    # December 20, 2012 at 11:29 pm

    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

Viewing 15 posts - 1 through 15 (of 21 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".