Comparateur de taille
S'inscrire
English 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.

Lien
LessSass (SCSS syntax)Stylus
Site weblesscss.orgsass-lang.comgithub.io/...
Dernière version2.5.33.4.190.52.4
Date de sortie25 sep. 2015 10 oct. 2015 4 sep. 2015
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 à jour12 nov. 2015 23:18:3412 nov. 2015 23:18:3412 nov. 2015 23:24:46
Inclure
Compare CSS preprocessors: Less vs Sass (SCSS syntax) vs Stylus
Webmaster
English
Publique
Publique
4 nov. 2022 09:11:48
Voir les modifications
Gérer les sauvegardes

Avis utilisateurs et commentaires

Pas de commentaires pour l'instant. Soyez le premier à laisser votre avis.