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.