CSS preprocessors comparison

Business > Webmaster
1
2015-11-12 23:24:46

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.

LessSass (SCSS syntax)Stylus
Websitehttp://lesscss.org/http://sass-lang.com/http://learnboost.github.io/stylus/
Latest version2.5.33.4.190.52.4
Release date2015-09-252015-10-102015-09-04
Development languageJavascriptRubyJavascript
Features
VariablesYesYesYes
MixinsYesYesYes
Conditionals-YesYes
Get image dimensionsYes-Yes
Color manipulationYesYesYes
Dark/light color detection--Yes
NestingYesYesYes
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 update2015-11-12 23:18:342015-11-12 23:18:342015-11-12 23:24:46
Embed
  • 2015-11-12 22:26:32
    2015-11-12 23:24:46
  • Webmaster
    English
  • Compare Less vs Sass (SCSS syntax) vs Stylus
  • Public
    Public
  • Creative Commons License CC-BY-SA 3.0 / GNU FDL
    Manage backups

Build comparison tables or lists about everything !

It's free and fast to publish data into original tables

Create a table