Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Christophe Rudyj
seal-mask
.a{fill-rule:evenodd;}techdegree
Christophe Rudyj
Full Stack JavaScript Techdegree Student 13,011 Points
Posted by Christophe Rudyj
.a{fill-rule:evenodd;}techdegree
Christophe Rudyj
Full Stack JavaScript Techdegree Student 13,011 Points

Conflicted on Sass & LESS

I'm mainly a Wordpress developer and designer and I made my own fork of bootstrap to strip every styling of it as i was going crazy just styling a nav bar. The thing is as a web designer of 15 years I really don't know if Sass and LESS are really that useful as i'm used to code CSS the ol' fashioned way. I'm unsure if I should learn SASS or less and my servers are mostly ASpache with CentOS on it and I don't use javascript servers like node.js. So can anyone help me figure out 1 if it's really usefull 2 which to learn for mainstream use

2 Answers

Ashley Rich
Ashley Rich
6,522 Points

When I first started using a CSS preprocessor I started with LESS, however over the last couple of months have moved to SASS. I haven't found there to be too many differences between the two but personally prefer SASS. I may be wrong, but I think SASS has more users?

There's a few features that make writing CSS so much better and I find myself using them all the time.

  • Nesting - More readable code, less repetition.
  • Partials - Modular code. Splitting CSS into files for different sections such as the header, footer etc is invaluable. Especially when coming back to code to make changes.
  • Variables - Useful if you like experimenting with colors etc. One change, and everywhere updates.
  • Color functions - I often use them on hover effects, darken() and lighten().
  • Parent selector & - Add hover styling to links etc nested within the element.

As for the server side. I always compile to CSS before deploying using CodeKit and it has a live reload feature which is pretty cool.

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

One other benefit of a preprocessor like SASS: mixins. Mixins make it a lot easier to write cross-browser compatible CSS. For example, if you wanted to use the transform property to rotate and skew and element you'd write this to get it to work across different browser types and versions

-webkit-transform: rotate(45deg) skew(20deg, 30deg);
   -moz-transform: rotate(45deg) skew(20deg, 30deg);
    -ms-transform: rotate(45deg) skew(20deg, 30deg);
     -o-transform: rotate(45deg) skew(20deg, 30deg);
        transform: rotate(45deg) skew(20deg, 30deg);

Using a mixin, it can be as easy as this one line of code

@include transform( rotate(45deg) skew(20deg, 30deg);

If you're using CSS animations, mixins can really save a lot of time.

I use SASS, and I think Ashley's correct that it's more popular than LESS.