| Less | Sass | Stylus | PostCSS | |
|---|---|---|---|---|
| Syntax | ||||
| Indented Syntax Ability to omit curly braces | ||||
| Variables | ||||
| basic Ability to declare variables and use them later | ||||
| default Default variables are overwritten by regular ones, no matter when they are declared | ||||
| lazy Variable Hoisting, variables can be declared after being used | ||||
| lookup Use the value of a previously declared property elsewhere | ||||
| scoped Restrict the scope of variables | ||||
| Variable Interpolation | ||||
| basic Use variables as parts of selectors, properties, or values | ||||
| calc Use variables as inside | ||||
| selectors Place a set of selectors into a variable and reuse it | ||||
| selectors nested Nest a set of selectors with parent reference below another selector | ||||
| Mixins | ||||
| basic Support inclusion of mixins | ||||
| params Mixins that can receive parameters passed to them | ||||
| params-named Mixins that have named placeholders for each parameter passed to them, allows to pass parameters in any order | ||||
| arguments Mixins with an unknown number of arguments passed to them | ||||
| Conditionals | ||||
| basic If statement within a declaration | unusual syntax | |||
| ternary Ternary operator | unusual syntax | |||
| property Interpolate | ||||
| selector Interpolate | requires additional variable | |||
| Rounding Numbers | ||||
| round functions Use of Round, Floor, and Ceil functions to convert a decimal to an integer | ||||
| custom precision Customize the precision for a particular decimal number | requires custom function | |||
| custom global precision Customize the global precision for calculations resulting in decimal numbers | ||||
| Random Number | ||||
| basic Generate a random number with upper and lower limits | requires custom function | 3.3.0+ | requires custom function | |
| cache Append the random number to a resource as a query string to invalidate the cache | requires custom function | 3.3.0+ | requires custom function | |
| color Generate different colors with a random Hue or other color components | requires custom function | 3.3.0+ | requires custom function | |
| Parent Reference | ||||
| append Append selector to the parent when nesting | ||||
| extend name Extend the name of the parent selector | 3.3.0+ | |||
| parent Allows to set a parent of the current nested selector | ||||
| prepend Prepend a selector, a nested | 3.4.0+requires the @at-root directive | |||
| multiple Ability to more than one parent reference in a selector | ||||
| explosion Generate all possible permutations of selectors from a list | requires additional variable | requires additional variable | ||
| root Root directive/reference removes parent selectors for everything below it | 3.3.0+ | 0.42.0+ | ||
| Placeholder Selectors | ||||
| basic Reusable components that are outputted only if used somewhere, also known as silent classes | ||||
| Content Directive | ||||
| basic Mixins accept style declarations inside it, useful if reusing selectors | 3.2.0+ | 0.41.0+ | ||
| media Mixins accept both style declarations and parameters, useful for simpler media queries | 3.2.0+ | 0.41.0+ | ||
| placeholder text Ability to reuse the content block in several selectors, useful for placeholder-text mixin | 3.2.0+ | 0.41.0+ | ||
| Loops | ||||
| basic Loops that can increment values | need to call the function | |||
| intermediate Loops that iterate though items in a list | need to call the function | |||
| Image Helpers | ||||
| dimensions Ability to get the width/height of a given image | 2.2.0+ | |||
| inline Encode a given image to base64 | 1.4.0+ | requires function definition | ||
| Sourcemaps | ||||
| basic Generate a source map file that defines a mapping between CSS declarations and the corresponding line of the source file | 1.5.0+ | 3.3.0+ | 0.48.0+ | |
| Color Extract | ||||
| RGB Extract the Red, Green, or Blue components from a color | ||||
| HSL Extract the Hue, Saturation, or Lightness components from a color | ||||
| HSV Extract the Hue, Saturation, or Value/Brightness components from a color | requires custom function | |||
| alpha Extract the value of the alpha channel from a color | ||||
| luma/luminosity | 0.47.0+ | |||
| luminance | ||||
| contrast | 0.47.0+ | |||
| Color Test | ||||
| dark Returns true if the color is dark | requires custom function | requires custom function | ||
| light Returns true if the color is light | requires custom function | requires custom function | ||
If you are considering migrating to another preprocessor this roundup of conversion tools might help you.
Sass fans - don't forget that Ruby Sass and Node Sass slightly differ in terms of features.