1. Stylus, Less, and PostCSS
  2. Sass
  3. Interpolation


Sass is a stylesheet language that is an extension of CSS.
As mentioned, Sass is a preprocessor. It takes Sass (.sass) or SCSS (.scss) files as
input, and outputs CSS files (.css).


Meanwhile, Sass (the preprocessor) allows two syntaxes:

  1. Sass, also known as the indented syntax
  2. SCSS, or Sassy CSS, a CSS-like syntax

There are two primary implementations of the Sass compiler: one in Ruby, and
another (called LibSass) in C/C++.

Stylus, Less, and PostCSS

If Sass tries to stay conservative in regard to the CSS language, Stylus is usually more permissive, implementing a lot of features that you’d consider “too much for CSS”.

Less is a declarative language while Sass is imperative.
subtle 不易察觉的,细微,狡猾,巧妙的。
— Less, the world’s most misunderstood CSS pre-processor17

Last but not least 最后但并非不重要
PostCSS enjoy an ecosystem of hundreds of plugins.

LibSass is unusable on its own and must be wrapped
by another library to provide an interface for compiling Sass stylesheets to CSS.


A variable in Sass always starts with a dollar sign ($), whether you are using it for
assignment or retrieval.Directly next to the dollar sign comes the variable name,
which is usually made of latin characters, numbers and dashes, or underscores.
Actually, any character can be used as long as it is escaped if needed.

// Variable assignment
$my-variable: 42px;
// Variable usage
.foo {
width: $my-variable;

[Hyphens and underscores being treated the same] is intentional.
The rationale is that the separator is a stylistic preference, not
a meaningful one. — Chris Eppstein, Sass core designer

■ string (e.g. “Hello world”, kittens)
■ number (e.g. 42, 1337px)
■ color (e.g. hotpink, rgb(1, 33, 7), #BADA55)
16 Jump Start Sass■ list (e.g. (a, b, c), a b c)
■ map (e.g. (a: 1, b: 2))
■ bool (true or false)
■ null (null)

By adding a trailing comma to any value, Sass coerces it into a list:
$value: (‘foo’,);
$length: length($value); // 1
$type: type-of($value); // list

To definitely override a global variable from a local scope, we use the !global flag.


By wrapping a variable identifier with #{}, it tells Sass to treat the content of the
variable as plain CSS (roughly speaking).

Media queries are another case where you’ll have to deal with variable interpolation.

.section-#{$section} {
background: transparent;

--Write by Marcustar,关关雎鸠,在河之洲
Download 相册