Compare three CSS pre-processors (frameworks): sass, less, and stylus.

CSS pre-processor technology has been very mature, and more pre-processor CSS frameworks have emerged. This article introduces the three most common CSS Preprocessor frameworks, sass, less CSS, and stylus.

First, let's briefly introduce what a CSS Preprocessor is. a css Preprocessor is a language used to add some programming features to CSS without considering the compatibility of browsers, for example, you can use variables and simpleProgramLogic, functions, and so onProgramming LanguageSome of the basic skills can make your CSS more concise and adaptable,CodeMore intuitive and many other benefits.

Don't stop at the Stone Age. Let's start our CSS Preprocessor journey.

We will compare these three frameworks in terms of syntax, variables, nesting, Mixin, inheritance, import, functions, and operators.

Syntax

Before using the CSS Preprocessor, the most important thing is to understand the syntax. Fortunately, most of the pre-processor syntaxes are similar to those of CSS.

First, both sass and less use standard CSS syntax. Therefore, if you can easily convert the existing CSS code into Preprocessor code, Sass is used by default. sass extension, but less. less extension.

The following is the syntax of the two:

 
/* Style. SCSs or style. Less */H1 {color: #0982c1 ;}
 

You have noticed that this is not so common, but sass also supports the old syntax, that is, it does not contain curly braces and semicolons:

/* Style. Sass */H1 color: #0982c1
 

Stylus supports a more diverse syntax. It uses the. styl file extension by default. The following is the syntax supported by stylus:

 
/* Style. styl */H1 {color: #0982c1;}/* omit brackets */H1 color: #0982c1;/* omit colons and semi-colons */H1 color #0982c1
 

You can also use different variables in the same style sheet. For example, the following statement does not return an error:

 
H1 {color #0982c1} H2 font-size: 1.2em
 

Variable

You can declare variables in the CSS Preprocessor and use them throughout the style sheet. Variables of any type, such as color, value (regardless of Unit), and text are supported. Then you can reference the variable at will.

The variable of sass must start with $, and the variable names and values are separated by colons, which are consistent with the attributes of CSS:

$ Maincolor: #0982c1; $ sitewidth: 1024px; $ borderstyle: dotted; body {color: $ maincolor; Border: 1px $ borderstyle $ maincolor; max-width: $ sitewidth ;}
 

The less variable name starts with the @ symbol:

 
@ Maincolor: #0982c1; @ sitewidth: 1024px; @ borderstyle: dotted; body {color: @ maincolor; Border: 1px @ borderstyle @ maincolor; max-width: @ sitewidth ;}
 

Stylus has no limit on the variable name. You can start with $ or be any character. It can be separated from the variable value by a colon or space, note that stylus (0.22.4) will compile the variable starting with @, but its corresponding value will not be assigned to the variable. In other words, do not start with @ in the variable name of stylus.

 
Maincolor = # 0982c1sitewidth = 1024px $ borderstyle = dotted body color maincolor border 1px $ borderstyle maincolor max-width sitewidth
 

The above three different CSS preprocessors will eventually produce the same results:

Body {color: #0982c1; Border: 1px dotted #0982c1; max-width: 1024px ;}
 

As you can imagine, when you add a color to your CSS and use it for dozens of times, you must find and modify the color for dozens of times, with the CSS Preprocessor, it is enough to modify a place!

Nesting

If we need to reference multiple elements with the same parent in CSS, it will be very boring. You need to write parent over and over again. For example:

 
Section {margin: 10px;} section nav {Height: 25px;} section nav A {color: #0982c1;} section nav A: hover {text-Decoration: underline ;}
 

If you use a CSS Preprocessor, You can have fewer words, and the relationship between parent and child nodes is clear at a glance. The three CSS frameworks we mentioned here allow nested Syntax:

 
Section {margin: 10px; nav {Height: 25px; A {color: #0982c1; & amp;: hover {text-Decoration: underline ;}}}}
 

The final CSS result is:

Section {margin: 10px;} section nav {Height: 25px;} section nav A {color: #0982c1;} section nav A: hover {text-Decoration: underline ;}
 

Very convenient!

Mixins)

Mixins are a bit like functions or macros. When a CSS segment is often used in multiple elements, you can define a Mixin for the shared CSS, then you only need to call the Mixin where you need to reference the CSS.

Sass Syntax:

 
/* Sass Mixin error with (optional) argument $ borderwidth which defaults to 2px if not specified */@ Mixin error ($ borderwidth: 2px) {border: $ borderwidth solid # f00; color: # f00 ;}. generic-error {padding: 20px; margin: 4px; @ include error ();/* applies styles from Mixin Error */}. login-error {left: 12px; position: absolute; top: 20px; @ include error (5px);/* applies styles from Mixin error with argument $ borderwidth equal to 5px */}
 

Less CSS syntax:

 
/* Less Mixin error with (optional) argument @ borderwidth which defaults to 2px if not specified */. error (@ borderwidth: 2px) {border: @ borderwidth solid # f00; color: # f00 ;}. generic-error {padding: 20px; margin: 4px ;. error ();/* applies styles from Mixin Error */}. login-error {left: 12px; position: absolute; top: 20px ;. error (5px);/* applies styles from Mixin error with argument @ borderwidth equal to 5px */}
 

Syntax for adding stylus:

/* Stylus Mixin error with (optional) argument borderwidth which defaults to 2px if not specified */error (borderwidth = 2px) {border: borderwidth solid # f00; color: # f00 ;}. generic-error {padding: 20px; margin: 4px; error ();/* applies styles from Mixin Error */}. login-error {left: 12px; position: absolute; top: 20px; error (5px);/* applies styles from Mixin error with argument borderwidth equal to 5px */}
 

Eventually they will all be compiled into the following CSS style:

 
. Generic-error {padding: 20px; margin: 4px; Border: 2px solid # f00; color: # f00 ;}. login-error {left: 12px; position: absolute; top: 20px; Border: 5px solid # f00; color: # f00 ;}
 

Inheritance

When we need to define the same style for multiple elements, we can consider using inheritance. For example, we often need:

P, UL, Ol {/* styles here */}
 

In sass and stylus, we can write as follows:

 
. Block {margin: 10px 5px; padding: 2px;} p {@ extend. block;/* inherit styles from '. block '*/Border: 1px solid # Eee;} ul, Ol {@ extend. block;/* inherit styles from '. block '*/color: #333; text-transform: uppercase ;}
 

First define the. Block block here, and then let the P, UL, and ol elements inherit the. Block. The final generated CSS is as follows:

 
. Block, P, UL, Ol {margin: 10px 5px; padding: 2px;} p {border: 1px solid # Eee;} ul, Ol {color: #333; text-transform: uppercase ;}
 

In this regard, less is slightly weaker, more like mixed writing:

. Block {margin: 10px 5px; padding: 2px;} p {. block;/* inherit styles from '. block '*/Border: 1px solid # Eee;} ul, Ol {. block;/* inherit styles from '. block '*/color: #333; text-transform: uppercase ;}
 

The generated CSS is as follows:

 
. Block {margin: 10px 5px; padding: 2px;} p {margin: 10px 5px; padding: 2px; Border: 1px solid # Eee;} ul, Ol {margin: 10px 5px; padding: 2px; color: #333; text-transform: uppercase ;}
 

In the code above, the. Block style will be inserted into the selector you want to inherit, but you need to pay attention to the priority issue.

Import)

Many CSS developers are not familiar with the import method because it requires multiple HTTP requests. However, the import operations in the CSS Preprocessor are different. It only contains different files in semantics, but the final result is a single CSS file.@ Import "file.css ";Importing a CSS file has the same effect as importing a common CSS file. Note: Information such as the mix and variables defined in the import file will also be introduced into the main style file, so you need to avoid conflicts between them.

Reset.css:

/* File. {type} */body {Background: # Eee ;}
 

Main. XXX:

 
@ Import "reset.css"; @ import "file. {type}"; P {Background: #0982c1 ;}
 

The final generated CSS:

 
@ Import "reset.css"; body {Background: # Eee;} p {Background: #0982c1 ;}
 

Color Functions

CSS preprocessors generally have built-in color processing functions to process color values, such as brightening, darkening, and gradient.

Sass:

Lighten ($ color, 10%);/* returns a color 10% lighter than $ color */darken ($ color, 10% ); /* returns a color 10% darker than $ color */saturate ($ color, 10%);/* returns a color 10% more saturated than $ color */desaturate ($ color, 10%);/* returns a color 10% less saturated than $ color */grayscale ($ color);/* returns grayscale of $ color */complement ($ color ); /* returns complement color of $ color */invert ($ color);/* returns inverted color of $ color */mix ($ color1, $ color2, 50% ); /* Mix $ color1 with $ color2 with a weight of 50% */
 

The above just briefly lists some basic color processing functions of sass. For the complete list, see sass documentation.

The following is a specific example:

 
$ Color: #0982c1; H1 {Background: $ color; Border: 3px solid darken ($ color, 50% );}
 

Less CSS:

Lighten (@ color, 10%);/* returns a color 10% lighter than @ color */darken (@ color, 10% ); /* returns a color 10% darker than @ color */saturate (@ color, 10%);/* returns a color 10% more saturated than @ color */desaturate (@ color, 10%);/* returns a color 10% less saturated than @ color */spin (@ color, 10 ); /* returns a color with a 10 degree larger in Hue than @ color */spin (@ color,-10 ); /* returns a color with a 10 degree smaller hue than @ color */mix (@ color1, @ color2);/* return a mix of @ color1 and @ color2 */
 

For a complete list of less color functions, see less documentation.

Example of the less color function:

 
@ Color: #0982c1; H1 {Background: @ color; Border: 3px solid darken (@ color, 50% );}
 

Stylus:

Lighten (color, 10%);/* returns a color 10% lighter than 'color' */darken (color, 10% ); /* returns a color 10% darker than 'color' */saturate (color, 10%);/* returns a color 10% more saturated than 'color' */desaturate (color, 10%);/* returns a color 10% less saturated than 'color '*/
 

For the complete color function list, see stylus documentation.

Instance:

 
Color = #0982c1 H1 background color border 3px solid darken (color, 50%)
 

Operator

You can perform style calculation directly in the CSS Preprocessor, for example:

 
Body {margin: (14px/2); top: 50px + 100px; Right: 100px-50px; left: 10*10 ;}
 

Some browser-Related Processing

This is one of the reasons for promoting the use of preprocessing, and it is a good reason, which can save a lot of time and sweat. Creating a Mixin to process CSS writing in different browsers is very simple, saving a lot of repetitive work and painful code editing.

Sass

 
@ Mixin border-radius ($ values) {-WebKit-border-radius: $ values;-moz-border-radius: $ values ;} div {@ include border-radius (10px );}
 

Less CSS

 
. Border-radius (@ values) {-WebKit-border-radius: @ values;-moz-border-radius: @ values;} Div {. border-radius (10px );}
 

Stylus

 
Border-radius (values) {-WebKit-border-radius: values;-moz-border-radius: values ;} div {border-radius (10px );}
 

Compilation result:

Div {-WebKit-border-radius: 10px;-moz-border-radius: 10px; border-radius: 10px ;}
 

3D text

You can useText-shadowsThe only problem is that it is very troublesome to modify the color, and it can be easily implemented through the Mixin and color functions:

Sass

 
@ Mixin text3d ($ color) {color: $ color; text-Shadow: 1px 1px 0px darken ($ color, 5%), 2px 2px 0px darken ($ color, 10% ), 3px 3px 0px darken ($ color, 15%), 4px 4px 0px darken ($ color, 20%), 4px 4px 2px #000 ;}h1 {font-size: 32pt; @ include text3d (#0982c1 );}
 

Less CSS

. Text3d (@ color) {color: @ color; text-Shadow: 1px 1px 0px darken (@ color, 5%), 2px 2px 0px darken (@ color, 10% ), 3px 3px 0px darken (@ color, 15%), 4px 4px 0px darken (@ color, 20%), 4px 4px 2px #000 ;}span {font-size: 32pt ;. text3d (#0982c1 );}
 

Stylus

 
Text3d (color) color: color text-Shadow: 1px 1px 0px darken (color, 5%), 2px 2px 0px darken (color, 10%), 3px 3px 0px darken (color, 15%), 4px 4px 0px darken (color, 20%), 4px 4px 2px #000 span font-size: 32pt text3d (#0982c1)
 

Generated CSS

SPAN {font-size: 32pt; color: #0982c1; text-Shadow: 1px 1px 0px #097bb7, 2px 2px 0px # 0875ae, 3px 3px 0px #086fa4, 4px 4px 0px # 07689a, 4px 4px 2px #000 ;}
 

:

Columns)

Using numeric operations and variables can easily adapt to the layout of the screen size.

Sass

 
$ Sitewidth: 1024px; $ gutterwidth: 20px; $ sidebarwidth: 300px; body {margin: 0 auto; width: $ sitewidth ;}. content {float: Left; width: $ sitewidth-($ sidebarwidth + $ gutterwidth );}. sidebar {float: Left; margin-left: $ gutterwidth; width: $ sidebarwidth ;}
 

Less CSS

@ Sitewidth: 1024px; @ gutterwidth: 20px; @ sidebarwidth: 300px; body {margin: 0 auto; width: @ sitewidth ;}. content {float: Left; width: @ sitewidth-(@ sidebarwidth + @ gutterwidth );}. sidebar {float: Left; margin-left: @ gutterwidth; width: @ sidebarwidth ;}
 

Stylus

 
Sitewidth = 1024px; gutterwidth = 20px; sidebarwidth = 300px; body {margin: 0 auto; width: sitewidth ;}. content {float: Left; width: sitewidth-(sidebarwidth + gutterwidth );}. sidebar {float: Left; margin-left: gutterwidth; width: sidebarwidth ;}
 

Actual Effect

 
Body {margin: 0 auto; width: 1024px ;}. content {float: Left; width: 704px ;}. sidebar {float: Left; margin-left: 20px; width: 300px ;}
 

Error Report

If you often find that CSS is difficult to find errors in CSS, this is also a benefit of the pre-processing framework. It reports errors.ArticleThis article describes how to make css framework error reports.

Note

All the above three frameworks support multiline comments such as/**/and // single row comments.

Original English, oschina Original translation