1

Ask DN: Getting started with SCSS

9 years ago from , Nowhere

I've been working with HTML and CSS for a few years, and I'd like to think I'm pretty good with them. Recently I've been looking to use SCSS/LESS/SASS in some of my projects since variables and math seem like amazingly useful features, but all of them seem so complicated for a small project. I was expecting something along the lines of update and compile but this doesn't seem to be the case.

I'd love to hear how you got started as well as any helpful resources you might have found.

8 comments

  • Owen McFadzenOwen McFadzen, 9 years ago

    I got started by using the tutorials here: http://teamtreehouse.com/library/sass-basics They progress quite well and there are plenty of follow up classes on advanced subjects. I also found another class on tuts+ http://webdesign.tutsplus.com/courses/web-design-workflow-with-sass-and-compass

    I am still going of course but it's nice having these courses to get me through. To be critical however, I would much proffer a more project based way of learning as the courses sometimes move too slow and/or fast.

    2 points
    • E BensleyE Bensley, 9 years ago (edited 9 years ago )

      Thankyou so much! I'm having a look through the Team TreeHouse course at the moment, it's so much easier to read and understand than alot of what I've seen so far.

      0 points
  • Mike BusbyMike Busby, 9 years ago (edited 9 years ago )

    I've been writing SCSS / LESS for a long time. Once you know CSS they are very simple to learn and get used to.

    The SASS way is a really good resource.

    Marketing sites I find are harder to write in SCSS because most of the site isn't reusable or very little is (depending on the design of course)

    Start with a main.scss file and write your code in there and then break it out into different files if you need. That's what I do with marketing sites.

    With web app's I always start from the same base and everything is split out already. 5 directories and 1 main file that imports directories which import all the files in that directory.

    Some tips for you:

    Don't over nest, 3 / 4 levels max.

    And always think about how something can be abstracted and reused, this is hard to do, but well worth it when you can plug and play components

    1 point
    • E BensleyE Bensley, 9 years ago

      Thanks, its good to hear from people who are already using it, i like the importing idea. Thanks for the nesting tip as well.

      0 points
  • Keaton TaylorKeaton Taylor, 9 years ago (edited 9 years ago )

    I agree, the problem I see is that the recommended file structures for SCSS are so complex that a web designer like myself making a marketing site or even an ecommerce site can be overwhelmed by project setup more so than execution.

    Every time I've tried to set up a common sense file structure for small to medium web projects it's felt clunky and weird. The structure, maths and variables of Sass are awesome and (mostly) easy to understand, I get lost in the filing before I ever get to those things.

    1 point
  • Cory MatthewsCory Matthews, 9 years ago

    Have a look at The Sass Way, they have some good beginner tutorials.

    1 point