CSS preprocessors comparison

Entreprises > 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
Site webhttp://lesscss.org/http://sass-lang.com/http://learnboost.github.io/stylus/
Dernière version2.5.33.4.190.52.4
Date de sortie2015-09-252015-10-102015-09-04
Langage de développementJavascriptRubyJavascript
Fonctionnalités
VariablesOuiOuiOui
MixinsOuiOuiOui
Conditionals-OuiOui
Get image dimensionsOui-Oui
Color manipulationOuiOuiOui
Dark/light color detection--Oui
NestingOuiOuiOui
Autre
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;
}
Mis à jour2015-11-12 23:18:342015-11-12 23:18:342015-11-12 23:24:46
Inclure
  • 2015-11-12 22:26:32
    2015-11-12 23:24:46
  • Webmaster
    English
  • Compare Less vs Sass (SCSS syntax) vs Stylus
  • Publique
    Publique
  • Creative Commons License CC-BY-SA 3.0 / GNU FDL
    Gérer les sauvegardes

Créer des tableaux comparatifs ou listes sur tout !

C'est gratuit et rapide de créer des tableaux originaux

Créer un tableau