CSS PREprocessors

Blog

Rounding Numbers

How to round decimal numbers with custom precision, set decimal places, using ceil and floor functions

Image helpers

Helpers when working with images - automatically get image size or embed images in base64

Conditionals

Conditional statements, if and else conditions, ternary operators, places that you can use conditionals

Variable Interpolation

How to use variables in different contexts, interpolation of variables in selectors, properties, and values

Content Directive

Uses for the @content directive, pre-built selectors, placeholders pseudo element, media query mixins

Placeholder Selectors

Reuse styles from Placeholder Selectors (or Silent Placeholders, or Silent Classes) that aren't outputted to the CSS

Mixins

How to use mixins: with and without parameters; with defaults; with an unknown number of mixin arguments

Random Numbers

How to generate random numbers in preprocessors and use them for cache invalidation or random colors

Comments

When to use single-line // ... and block /* ... */ comments, quirks you should be aware of

Loops

Create loops, iterate through items or lists of items, use for, each, and while directives

Parent Reference

Add magic to your selectors and reduce repetition with the parent reference - &, useful for BEM fans

Variables

Setting and using variables, scoping variables, default variable values, property lookup

CSS PRE is a project that aims to collect as much information about the popular CSS Preprocessors as possible, in order to serve as a one-stop reference.

It is a collaborative project, edits on GitHub are welcome.

Created by Alexander Futekov and built with DocPad.

Get notified: