CSS preprocessor vs.-sass, less, and stylus

It is a very challenging thing to play the role of CSS in the pre-office. CSS presets are available in different languages, with different syntax and functionality.

In this article, we'll cover the--sass, features, and their benefits of three different CSS presets, less and stylus.

Introduced

The CSS preprocessor is a language used to write some CSS features without regard to browser compatibility issues. They compile the code into a general CSS, do not stay in the Stone Age. CSS presets have thousands of features that we'll cover in this article. Let's get started.

Grammar

Before using CSS, the most important thing is to understand the grammar, fortunately, the syntax of the three CSS is similar to CSS.

Sass and less

The standard CSS syntax is used by both sass and less. This makes it very easy to convert the preprocessor code into CSS code using CSS presets. The default SASS uses .scss the extension, while less uses the extension .less name. The sass and less basic settings can be as follows:

/* Style.scss or style.less */h1 {  color: #0982C1;}

As you can see, in the Sass and less styles, this code is simple enough.

The important point is that sass also supports the old syntax, that is, to not use curly braces and semicolons, and that the file uses the .sass extension, and that his syntax is similar to the following:

/* Style.sass */h1  color: #0982c1

Stylus

Stylus has a more grammatical pattern, it uses .styl the extension, and stylus also accepts the standard CSS syntax, but he also accepts the syntax without curly braces and semicolons, as follows:

/* style.styl */h1 {  color: #0982C1;} /* Omit curly braces */h1  color: #0982C1;/* Omit curly braces and semicolons */h1  color #0982C1

You can also use different variables in the same style sheet, such as the following:

h1 {  color #0982c1}h2  font-size:1.2em

Variable (Variables)

You can declare variables in the CSS preprocessor and use them throughout the style sheet. The CSS preprocessor supports any variable (for example, color, value, whether or not it includes units), text. You can then reference the variable anywhere.

Sass

The SASS declaration variable must be at the beginning, followed by the $ variable name and variable value, and the variable name and variable values need to be : separated by colons, just like CSS properties:

$mainColor: #0982c1; $siteWidth: 1024px; $borderStyle: dotted;body {  color: $mainColor;  border:1px $borderStyle $mainColor;  Max-width: $siteWidth;}

Less

The less declaration variable and the SASS declaration variable, the only difference is that the variable name is preceded by the @ character:

@mainColor: #0982c1; @siteWidth: 1024px; @borderStyle: dotted;body {  color: @mainColor;  border:1px @borderStyle @mainColor;  Max-width: @siteWidth;}

Stylus

Stylus declares a variable without any qualification, you can $ start with the symbol, and the ending semicolon ; is optional, but the equal sign between the variable name and the variable value = is required. One thing to note is that if we @ declare (0.22.4) variables using the beginning of the symbol, stylus compiles, but its corresponding value is not assigned to the variable. In other words, do not declare variables at the beginning of the stylus with a @ symbol.

Maincolor = #0982c1siteWidth = 1024px$borderstyle = dottedbody  color maincolor  border 1px $borderStyle Maincolor  Max-width Sitewidth

The translated CSS

The code above will be translated into the same CSS. You can imagine how much the variable works. We don't need to enter many times in order to modify a color, nor do we need to go around looking for him in order to modify a width. (We just need to modify the defined variables, and it's enough to modify them once.) Here is the translated CSS code:

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

Nesting (Nesting)

If we have an identical parent element in the CSS, then the write style becomes tedious, and we need to write the parent element again and again before each element.

section {  margin:10px;} Section nav {  height:25px;} Section nav a {  color: #0982C1;} Section nav a:hover {  text-decoration:underline;}

Instead, using the CSS preprocessor, we can write these elements in the curly braces of the parent element {} , and you can use the & symbol to refer to the parent selector.

Sass, less and stylus

For a nested selector, three CSS presets have the same syntax:

section {  margin:10px;  Nav {    height:25px;    A {      color: #0982C1;      &:hover {        text-decoration:underline;}}}  

The translated CSS

The CSS code translated by the above-mentioned preprocessor is the same as the CSS code we started to show. It's very convenient!

section {  margin:10px;} Section nav {  height:25px;} Section nav a {  color: #0982C1;} Section nav a:hover {  text-decoration:underline;}

Mixing (mixins)

A mixins is a function in a pre-place device. Usually when you write the style must have encountered, a CSS style is often used in multiple elements, so you need to repeat the write multiple times. In CSS presets, you can define a mixin for these common CSS styles, and then call your defined mixin directly where you want the CSS to use the styles. This is a very useful feature. Mixins is a well-known selector, and you can also define variables or default parameters in Mixins.

Sass

/* SASS defines a mixin named error, which sets a parameter "$borderWidth", the value of which is the default value 2px*/@mixin error ($borderWidth: 2px) without any special definition  border: $borderWidth solid #F00;  Color: #F00;}. generic-error {  padding:20px;  margin:4px;  @include error (); /* Call error mixins */}.login-error {  left:12px;  Position:absolute;  top:20px;  @include error (5PX); /* Call the error mixins and specify the value of the parameter $borderwidth as 5px*/}

Less

/* Less defines a mixin named error, which sets a parameter "$borderWidth", the value of which is the default value of 2px */.error (@borderWidth: 2px)  , if not specifically defined border: @borderWidth solid #F00;  Color: #F00;}. generic-error {  padding:20px;  margin:4px;  . Error (); /* Call error mixins */}.login-error {  left:12px;  Position:absolute;  top:20px;  . Error (5PX); /* Call the error mixins and specify the value of the parameter $borderwidth as 5px */}

Stylus

/* Stylus defines a mixin named error, this error sets a parameter "$borderWidth", the value of this parameter is the default value of 2px */error (borderwidth= 2px)  , without special definition Border:borderwidth solid #F00;  Color: #F00;}. generic-error {  padding:20px;  margin:4px;  Error (); /* Call error mixins */}.login-error {  left:12px;  Position:absolute;  top:20px;  Error (5PX); /* Call the error mixins and specify the value of the parameter $borderwidth as 5px */}

The translated CSS

The CSS code translated from the three CSS presets above is the same.

. 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;}

Mixins are different in three types of pre-places:

• Sass: In the SASS definition mixins and less, stylus is different, when declaring mixins need to use "@mixin", and then immediately followed by the mixins name, he can also define parameters, you can set a default value for this parameter, but parameter name is the use of "$" The symbol begins, and a colon (:) is required to separate it from the parameter values. In addition, calling Mixins in sass requires "@include", followed by the name of the mixins you want to call.

• The less:less declaration mixins and CSS definition styles are very similar, you can consider mixins as a selector, and of course mixins can set parameters and set default values for the parameters. However, the variable name of the set parameter is started with "@", and the same parameter and the default parameter values need to be separated by a colon (:).

• Stylus:stylus and the first two are slightly different, he can not use any symbols, that is, directly define the mixins name, and then the definition of the parameter and the default value with an equal sign (=) to connect.

The above is just the simple difference between the mixins in the three CSS presets, detailed can also go to their official website to understand, or compare the above three paragraph code.

Inheritance (inheritance)

When applying the same style to multiple elements, we usually write this in CSS:

P,ul,ol {/  * style written in this */}

This is very good, but often we need to add another style to the individual elements, this time we need to separate the selector to write the style, so that when we return to maintain the style is quite troublesome. To address this problem, the CSS preprocessor can inherit all styles from one selector to another.

Sass and Stylus

. block {  margin:10px 5px;  padding:2px;} p {  @extend. Block;/* inherit. Block all styles */  border:1px solid #EEE;} UL, ol {  @extend. Block;/* inherit. Block all styles *  /color: #333;  Text-transform:uppercase;}

The translated CSS

. block, P, UL, ol {  margin:10px 5px;  padding:2px;} p {  border:1px solid #EEE;} UL, ol {  color: #333;  Text-transform:uppercase;}

Less

The inheritance and sass supported by less are different from stylus, and instead of inheriting from the selector, they nest the styles in the mixins into each selector. The disadvantage of this approach is that there will be duplicate styles in each selector.

. block {  margin:10px 5px;  padding:2px;} p {  . Block;/* Inherit the style from '. Block ' */  border:1px solid #EEE;} UL, ol {  . Block;/* Inherit the style in '. Block ' *  /color: #333;  Text-transform:uppercase;}

The translated CSS

. block {  margin:10px 5px;  padding:2px;} p {  margin:10px 5px;  padding:2px;  /* Inherit the style from '. Block ' */  border:1px solid #EEE;} Ul,ol {  margin:10px 5px;  padding:2px;  /* Inherit the style from '. Block ' *  /color: #333;  Text-transform:uppercase;}

As you can see, the style of the above code .block will be inserted into the corresponding selector you want to inherit, but you need to be aware of the priority issue.

Importing (Import)

In CSS, you don't like to use @import to import styles, because it increases the HTTP request. But the import rule in the CSS preprocessor @import differs from CSS in that it simply imports different files semantically, but the end result is a CSS file. If you are @import 'file.css' importing a file.css style file, the effect is the same as a normal CSS import style file. Note: variables, mixes, and other information that are defined in the import file will also be introduced into the main style file, so you need to avoid conflicting with them.

Sass, less and stylus

/* file. {type} */body {  background: #EEE;}

@import "Reset.css"; @import "file. {type} ';p {  background: #0982C1;}

The translated CSS

@import "Reset.css"; body {  background: #EEE;} p {  background: #0982C1;}

Color function

The color function is the function of the color function built into the CSS preset, which can handle the color value, such as lighten, darken, gradient color and so on.

Sass

Lighten ($color, 10%);/* The returned color is $color based on 10% */darken ($color, 10%);  /* The color returned is dimmed on $color basis 10% */saturate ($color, 10%);   /* The color returned is increased by saturation on $color basis 10% */desaturate ($color, 10%);/* The color returned is less than $color based on the saturation of 10% */grayscale ($color);  /* Returns $color gray color */complement ($color); /* Returns complement color of $color */invert ($color);     /* Return $color color */mix ($color 1, $color 2, 50%);/* Mix $color 1 with $color 2 with a weight of 50% */

This is just a simple list of color functions in sass, and you can read the Sass document in more detail.

How a color function can be applied to any element is a color CSS property, and here's a simple example:

$color: #0982C1; h1 {  background: $color;  BORDER:3PX Solid Darken ($color, 50%);/* The Border color darkens on the basis of $color 50%*/}

Less

Lighten (@color, 10%);/* The returned color is @color based on 10% */darken (@color, 10%);  /* The returned color is dimmed on @color basis 10%*/saturate (@color, 10%);   /* The color returned is increased by saturation on @color basis 10% */desaturate (@color, 10%);/* The color returned is reduced by @color based on the saturation of 10%*/spin (@color, ten);  /* The color returned on @color based on the hue increase of */spin (@color,-10); /* The color returned is reduced by a hue of */mix (@color1, @color2) on a @color basis; /* The color returned is a blend of @color1 and @color2 */

For the full color function of less, please read the less document.

Here is a simple example of how to use a color function in less

@color: #0982C1; h1 {  background: @color;  BORDER:3PX Solid Darken (@color, 50%);}

Stylus

Lighten (color, 10%);/* The Returned color is lightened on the ' color ' basis 10% */darken (color, 10%);  /* The returned color is dimmed on the ' color ' basis 10% */saturate (color, 10%);   /* The color returned is increased by the saturation on ' color ' 10% */desaturate (color, 10%);/* The color returned is reduced by 10% on the ' color ' basis */

For a description of the color function for stylus, read the stylus documentation.

Here is a simple example of the stylus color function

color = #0982C1h1  background color  border 3px solid darken (color, 50%)

Operator (Operations)

We all aspire to do some arithmetic in CSS, but we can't do it. But doing some arithmetic on the style in the CSS preprocessor is a bit of a problem, for example:

Sass, less and stylus

Body {  margin: (14PX/2);  top:50px + 100px;  right:100px-50px;  Left:10 * 10;}

Practical use

We have introduced the various aspects of CSS preprocessor features, but we have not been in combat. Here are some examples of CSS preprocessor applications.

Property prefixes

This is one of the reasons for the promotion of CSS preprocessor, and is a good reason to save a lot of time and sweat. Creating a minxin to handle the browser prefix problem is a very simple, and can save a lot of repetitive work and painful code editing, let's look at an example.

Sass

@mixin Border-radius ($values) {  -webkit-border-radius: $values;     -moz-border-radius: $values;          Border-radius: $values;} p {  @include Border-radius (10px);}

Less

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

Stylus

Border-radius (values) {  -webkit-border-radius:values;     -moz-border-radius:values;          Border-radius:values;} P {  Border-radius (10px);}

The translated CSS

p {  -webkit-border-radius:10px;     -moz-border-radius:10px;          border-radius:10px;}

The problem of browser prefixes, mainly for the use of CSS3 attributes, it is well known that the CSS3 property has not all browsers support the standard syntax of the property, so in the actual application, we have to add the browser prefix to identify, this for our front-end staff is how hard to force the thing. Although there are prefix such a JS script to help us solve, but for how to say also need to add a script file, which for the pursuit of the perfect classmate may end the law accepted.
Now one more solution is to use CSS preprocessor, such as the implementation of the above rounded corners, which reduces our workload. If you are interested in this part of the implementation method, do not take the time to read the following source code:

• Cssmixins: mixins definition of CSS3 attribute in three preprocessor by Matthew Wagerfield: Less, sass (and SCSS) and stylus

• Less-prefixer

• Custom User @mixins

3D text

Making 3D text effects with multiple attributes of Text-shadow is a good way to do it. The only problem is changing the color of the text shadow. If we use mixin and color functions, it is very easy to achieve 3D text effect, let's try it out.

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

. 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 0 PX Darken (color, 15%), 4px 4px 0px darken (color, 20%), 4px 4px 2px #000span  font-size:32pt  Text3d (#0982c1)

The style of Text-shadow in Stylus is written in one line because the curly brackets and semicolons are omitted from the stylus ｛｝ ; .
The results of the above three methods are the same:

Column (Columns)

The first time I touched the CSS preprocessor, I was thinking about using numbers or variables to do the math. Using numeric and variable operations, it is easy to implement layout processing that adapts to the size of the screen. Just define the width of the variable, we can easily implement the layout according to the requirements. This is what the following example does.

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

@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;}

The translated CSS

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

Error Reporting

If you use CSS often, you will find it difficult to find the wrong place in CSS. Maybe you'll be like me, spending an afternoon of time, and sending out crazy annotations each line of style code to look for this CSS error.

The CSS preprocessor is much easier, and he will report errors to you. You can read this article to learn how to get the CSS preprocessor to report errors.

Note (Comments)

The CSS preprocessor supports /* */ such multi-line annotations (similar to the way CSS is commented), and also supports single-line // annotations (similar to the way JavaScript is commented).

Be aware that if you want to compress the files, you need to remove all comments.

Summarize

Three preprocessor we are all covered (sass, less and stylus), all with their unique characteristics to achieve the same effect. This allows developers to better choose their own CSS preprocessor, in order to better maintain their own code, improve development efficiency.

While not a requirement for development, CSS preprocessor can save a lot of time, and there are some very useful features.

I encourage you to try to use the CSS preprocessor as much as possible, so that you can effectively choose one of your favorite and know why he is favored by others. If you haven't tried using a CSS preprocessor to write your CSS style, I strongly recommend that you try it.
If you have the features of your favorite CSS preprocessor, I didn't mention it and want to share it with us in the comments below.

Translator Sign Language: the entire translation according to the original line, and in the process of translation slightly personal understanding of the technology. If the translation has the wrong place, also please peer friend pointing. Thank you!