CSS3 vs LESS vs SCSS

Thor

Thor

Honorary Master
Joined
Jun 5, 2014
Messages
44,413
Reaction score
7,522
Location
Bellville
I love forntend a lot and just want to know what the importance is regarding all this CSS types

I currently use CSS3 and want to know if the others are worth it and how about one can go about it and also what are the advantages and disadvantages
 
They all "compile" down to CSS because that's the only stylesheet language a browser understands. So although you have an extra build step, less and scss makes you more productive.. E.g. assign a variable to a colour and use it everywhere... Change var.. Change colour.. Etc. However, the same can be done in JavaScript. So its a question of designer or developer in charge of applying meta styles. I for one think it should be the designer, and he developer should just properly assign ids and classes to all his html in a coherent way.
 
LESS, SASS, etc are precompilers for CSS and as stricken has said - in the end you have css.
Do some homework, read up about them and what they offer.

a short sass example:

Code: 
$bg-color: #fffdd0;

body {
  background-color: $bg-color;
}
.xxx {
  background-color: $bg-color;
  .yyy {
    color: red;
  }
}

should give you css something like:
Code: 
body {
  background-color: #fffdd0;
}
.xxx {
  background-color: #fffdd0;
}
.xxx .yyy {
    color: red;
}


Some people don't like it as the embedded syntax give you very long 'chains' and get very specific.
Others like it as they have "blocks" of css which can related to blocks of html and it can be very modular.

As with all code, you need to plan things correctly else you're going to end up with a mess.

A different "pattern/technique" to look into it BEM. Google "BEM CSS" for more info and form your own opinion.

Personally I think it looks good and am wanting to use it in a project.
 
LESS and SASS are really cool CSS pre-processors. I've been using LESS for some years now, but a new project has called a 'nudge-nudge, wink-wink' on me, and I've finally switched over to SASS using the scss syntax (here's the difference between the sass and scss syntaxes).

When using LESS, I often found myself in need of LESS Hat, which is a set of very useful universal mixins for LESS. With the library at hand, I need not worry about browser prefixes, and a handful of other things.

That said, I'm starting to find SASS a better fit for my needs. It seems a lot more mature than LESS, and is capable of more. For example, it's quite a pain to get for-loops working in LESS, and it's a syntactical nightmare. In SASS, however, it's much simpler - in fact, it's built right into the core. I could easily make my own grid-framework using a simple for-loop:

Code: 
$columns: 16;
@for $i from 1 through $columns {
    .col-#{$i} {
        width: ((100 / $columns) * $i) * 1%;
    }
}

Which compiles to:

Code: 
.col-1 { width: 6.25%; }
.col-2 { width: 12.5%; }
.col-3 { width: 18.75%; }
.col-4 { width: 25%; }
.col-5 { width: 31.25%; }
.col-6 { width: 37.5%; }
.col-7 { width: 43.75%; }
.col-8 { width: 50%; }
.col-9 { width: 56.25%; }
.col-10 { width: 62.5%; }
.col-11 { width: 68.75%; }
.col-12 { width: 75%; }
.col-13 { width: 81.25%; }
.col-14 { width: 87.5%; }
.col-15 { width: 93.75%; }
.col-16 { width: 100%; }

If you want to get onto the pre-processor train, I'd already recommend SASS with the scss syntax (so as not to make things too confusing at the onset). You'll need to install Ruby on your system, along with the sass-gem. Not sure what IDE or code editor you're using, but many of them have some kind of plugin/extension that watches your SASS code for changes, and then automatically compiles. I'm currently using SASS Build in Sublime Text 3. You can also use Grunt/Gulp to build your stylesheets - I do this for larger projects.

As for pros and cons: Using a pre-processor will save you tons of time, depending on the size of your project. SASS and LESS allow you to create CSS-maps as well - this helps with the debugging process, especially when you've set the compilers to minify your output to save bandwidth (this is also a pro). Can't think of any cons at this point, other than the fact that you'd need to make sure that any developers/designers you pass the code onto knows how to use it. This is often the reason people use build tools like Gulp/Grunt, which more and more folks are making use of these days.

Side-tip: There's also PostCSS, but I'd recommend working with a pre-processor first.
 
_neo said:
LESS and SASS are really cool CSS pre-processors. I've been using LESS for some years now, but a new project has called a 'nudge-nudge, wink-wink' on me, and I've finally switched over to SASS using the scss syntax (here's the difference between the sass and scss syntaxes).

When using LESS, I often found myself in need of LESS Hat, which is a set of very useful universal mixins for LESS. With the library at hand, I need not worry about browser prefixes, and a handful of other things.

That said, I'm starting to find SASS a better fit for my needs. It seems a lot more mature than LESS, and is capable of more. For example, it's quite a pain to get for-loops working in LESS, and it's a syntactical nightmare. In SASS, however, it's much simpler - in fact, it's built right into the core. I could easily make my own grid-framework using a simple for-loop:

Code: 
$columns: 16;
@for $i from 1 through $columns {
    .col-#{$i} {
        width: ((100 / $columns) * $i) * 1%;
    }
}

Which compiles to:

Code: 
.col-1 { width: 6.25%; }
.col-2 { width: 12.5%; }
.col-3 { width: 18.75%; }
.col-4 { width: 25%; }
.col-5 { width: 31.25%; }
.col-6 { width: 37.5%; }
.col-7 { width: 43.75%; }
.col-8 { width: 50%; }
.col-9 { width: 56.25%; }
.col-10 { width: 62.5%; }
.col-11 { width: 68.75%; }
.col-12 { width: 75%; }
.col-13 { width: 81.25%; }
.col-14 { width: 87.5%; }
.col-15 { width: 93.75%; }
.col-16 { width: 100%; }

If you want to get onto the pre-processor train, I'd already recommend SASS with the scss syntax (so as not to make things too confusing at the onset). You'll need to install Ruby on your system, along with the sass-gem. Not sure what IDE or code editor you're using, but many of them have some kind of plugin/extension that watches your SASS code for changes, and then automatically compiles. I'm currently using SASS Build in Sublime Text 3. You can also use Grunt/Gulp to build your stylesheets - I do this for larger projects.

As for pros and cons: Using a pre-processor will save you tons of time, depending on the size of your project. SASS and LESS allow you to create CSS-maps as well - this helps with the debugging process, especially when you've set the compilers to minify your output to save bandwidth (this is also a pro). Can't think of any cons at this point, other than the fact that you'd need to make sure that any developers/designers you pass the code onto knows how to use it. This is often the reason people use build tools like Gulp/Grunt, which more and more folks are making use of these days.

Side-tip: There's also PostCSS, but I'd recommend working with a pre-processor first.
Click to expand...

I use brackets.


So SASS do I need ruby on the servers I host as well?
 
Nope, you don't upload sass to the server, you upload the processed file (style.css) to your server.


On your client you have a sass file: style.scss
Code: 
$bg-color: red;
body {
background-color: $bg-color;
}

you run whatever you're using (sass style.scss) and it produces a style.css file:

Code: 
body{
background-color: red;
}

you then copy the style.css fiel to your server.

The plugin for brackets might not need ruby, I'm pretty sure PHPstorm's plugin doesn't.
 
I enjoy using LESS as my CSS needs aren't that complicated, but I've been slowly migrating over to SASS as it seems the norm in a lot of projects online. Can't tell you how much easier it makes life compared to how it was before the days of SASS/LESS
 
rward said:
Nope, you don't upload sass to the server, you upload the processed file (style.css) to your server.


On your client you have a sass file: style.scss
Code: 
$bg-color: red;
body {
background-color: $bg-color;
}

you run whatever you're using (sass style.scss) and it produces a style.css file:

Code: 
body{
background-color: red;
}

you then copy the style.css fiel to your server.

The plugin for brackets might not need ruby, I'm pretty sure PHPstorm's plugin doesn't.
Click to expand...

Ahhhh so is sass like a program/compiler than you put your sass file in and it produces a fully functional css file?

(I'm sorry I never really researched it at all so you'll need to be my Google (: )
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X