Compare Sizes
Register
Français Español

CSS preprocessors comparison

1

Cascading Style Sheets (CSS) pre-processors help you to maintain your CSS files more easily. It can help you make your CSS more readable, maintainable by using some features not available in the CSS language.

Variables allow to easily reuse the same value in your CSS, making it easier to read or update.

Mixins allow embedding all the properties of a class into another class.

Nesting allow to have a more concise code, which mimics the structure of your HTML..

Get image dimensions allow to set properties using the size of a given image ensuring your CSS is adapted if the image is changed.

Feel free to help complete and correct this comparison.

Link
Less
Sass (SCSS syntax)
Stylus
Website		lesscss.orgsass-lang.comgithub.io/...
Latest version		2.5.33.4.190.52.4
Release date		Sep. 25th 2015 Oct. 10th 2015 Sep. 4th 2015
Development language		JavascriptRubyJavascript
Features
Variables		YesYesYes
Mixins		YesYesYes
Conditionals		-YesYes
Get image dimensions		Yes-Yes
Color manipulation		YesYesYes
Dark/light color detection		--Yes
Nesting		YesYesYes
Additional
Syntax sample
@mycolor: black;

#header {
  color: @mycolor;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
SCSS syntax: 
$mycolor:black;

#header {
  color: $mycolor;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

mycolor=black

#header {
  color: mycolor;
  .navigation
    font-size: 12px;
  
  .logo
    width: 300px;
}
Last update		Nov. 12th 2015 11:18:34 PMNov. 12th 2015 11:18:34 PMNov. 12th 2015 11:24:46 PM
Embed
Compare CSS preprocessors: Less vs Sass (SCSS syntax) vs Stylus
Webmaster
English
Public
Public
Nov. 4th 2022 9:11:48 AM
View changes
Manage backups

User reviews and comments

No comments yet. Be the first to leave your review.