Home>Article>Web Front-end> What is css preprocessor
The CSS preprocessor is a specialized programming language used to add some programming features to CSS (CSS itself is not a programming language). There is no need to consider browser compatibility issues because the CSS preprocessor ultimately compiles and outputs standard CSS styles. You can use basic programming skills such as variables, simple logical judgments, and functions in the CSS preprocessor.
The operating environment of this tutorial: Windows 7 system, CSS3 version, Dell G3 computer.
CSS (Cascading Style Sheet) is translated as cascading style sheet. As a front-end practitioner, this professional term is not unfamiliar. It is usually called "Style Style Sheet" in the industry. Sheet)", which is mainly used for web page style design. By setting up a style sheet, you can uniformly control the display attributes of each tag in HTML (XHTML). It allows people to more effectively control the appearance of Web pages (or Web applications), and can accurately specify the position and appearance of Web elements and the ability to create special effects. CSS has the ability to edit web page object and model styles, and can perform preliminary interactive design. It is currently the best performance design language based on text display. CSS can simplify or optimize the writing method according to the understanding ability of different users, making it highly readable for all types of people.
As far as CSS itself is concerned, it is not a problem for most web front-end practitioners. Anyone who has studied CSS knows that it is not a programming language. You can use it to develop web page styles, but you can't use it to program. In other words, CSS is basically a designer's tool, not a programmer's tool. In the eyes of programmers, CSS is a headache. Unlike other programming languages, such as PHP, Javascript, etc., it has its own variables, constants, conditional statements and some programming syntax. It is just a line of pure attributes. Description is quite time-consuming to write, and the code is difficult to organize and maintain.
Naturally, some people began to wonder whether some programming elements could be added to CSS like other programming languages, so that CSS could do some predetermined processing like other programming languages. In this way, there is a "CSS Preprocessor".
CSS preprocessor defines a new language. Its basic idea is to use a specialized programming language , adds some programming features to CSS, uses CSS as a target to generate files, and then developers only need to use this language for coding work. In layman's terms, the CSS preprocessor uses a specialized programming language to design Web page styles, and then compiles them into normal CSS files for project use. The CSS preprocessor adds some programming features to CSS without having to consider browser compatibility issues. For example, you can use variables, simple logic programs, functions, etc. in CSS. Some basic features in programming languages allow you to CSS is more concise, more adaptable, more readable, easier to maintain, and many other benefits.
CSS preprocessor technology has been very mature, and many different CSS preprocessor languages have emerged, such as: Sass (SCSS), LESS, Stylus, Turbine, Swithch CSS, CSS Cacheer , DT CSS, etc. There are so many CSS preprocessors, so "Which CSS preprocessor should I choose?" has become a hot topic on the Internet recently, on Linkedin, Twitter, CSS-Trick, Zhihu and major technical forums , many people are arguing about this. This is a big step forward from where we once were on the subject of whether we should use CSS preprocessors.
So far, among the many excellent CSS preprocessor languages, Sass, LESS and Stylus are the best, with many discussions and comparisons. This article will introduce you to these three CSS preprocessor languages from their background, installation, usage syntax, differences and other comparisons. I believe that front-end development engineers will make their own choice-which CSS preprocessor should I choose?
(Learning video sharing:css video tutorial)
In order to better understand these three This is a popular CSS preprocessor. Let’s start with its background and briefly understand the background information of each.
1. Sass background introduction
Sass is an extension of the syntax of CSS (Cascading Style Sheets). It was born in 2007 and is the earliest and most mature one. A CSS preprocessor language that can use variables, constants, nesting, mixins, functions and other functions to write CSS more efficiently and flexibly. Sass will eventually compile legal CSS for the browser to use, which means that its own syntax is not easy for the browser to recognize, because it is not a standard CSS format, and dynamic variables can be used within its syntax, so It is more like a very simple dynamic language.
In fact, Sass now has two sets of grammar rules: one still uses indentation as a separator to distinguish code blocks; the other set of rules uses curly brackets ({}) as a separator like CSS. symbol. The latter grammar rule is also called SCSS, and is supported by versions after Sass3.
Note: Sass official website address: http://sass-lang.com
2. Background introduction to LESS
An open source project in 2009, which is greatly influenced by Sass, but uses CSS syntax, which makes most developers and designers Easier to get started. LESS provides a variety of ways to smoothly convert written code into standard CSS code. LESS can often be seen in many popular frameworks and tools (for example, Twitter's Bootstrap framework uses LESS).
According to the introduction on Wikipedia, LESS is actually an open source project created by Alexis Sellier under the influence of Sass. At that time, SASS used indentation as a delimiter to distinguish code blocks, instead of the curly brackets ({}) widely used in CSS. In order to make it more convenient for existing users of CSS, Alexis developed LESS and provided CSS-like writing functions.
Note: The official website of LESS: http://lesscss.org
3. Stylus background introduction
Stylus, produced in 2010, comes from The Node.js community is mainly used to provide CSS preprocessing support for Node projects. It has certain supporters within this community, but in a broad sense its popularity is not as good as Sass and LESS.
Stylus is billed as a revolutionary new language that provides an efficient, dynamic, and expressive way to generate CSS for use by browsers. Stylus supports both indentation and CSS regular style writing rules.
Note: Stylus official website: http://learnboost.github.com/stylus
Every A language has its own certain grammatical rules, and CSS preprocessor language is no exception. Before actually using CSS preprocessor language, there is another indispensable knowledge point, which is the understanding of grammar. Fortunately, the syntax and CSS syntax of these three CSS preprocessor languages are similar.
1.Sass syntax
Sass3.0 version starts to use standard CSS syntax, which can be said to be the same as SCSS. This makes it easier to convert Sass code into CSS code. By default Sass uses the ".scss" extension. Sass syntax rules can be written like CSS:
/*style.sass新版语法规则*/ h1{ color:#936; background-color:#333; }
As you can see, in Sass style, such code cannot be simpler.
The important point is that Sass also supports the old syntax. The old syntax is slightly different from the regular CSS syntax. It requires strict syntax. Any indentation and character errors will cause the style to be compiled. mistake. Sass can omit braces ({}) and semicolons (;), relying entirely on strict indentation and formatting of code, and the file uses the ".sass" extension. Its syntax is similar to:
/*style.sass*/ h1 color:#936 background-color: #333
2.LESS syntax
LESS is an extended form of CSS. It does not emasculate the functions of CSS, but adds many additional functions to the existing CSS syntax. In terms of syntax rules, LESS, like Sass, uses the standard syntax of CSS, except that the extension of the source file of LESS is ".less", and its basic syntax is similar to:
/*style.less*/ h1 { color: #963; background-color: #333; }
3 .Stylus syntax
Stylus has more syntax tricks. Its file extension is ".styl". Stylus also accepts standard CSS syntax, but it also uses abbreviations like Sass's old syntax rules. At the same time, Stylus also accepts syntax without braces ({}) and semicolons, as shown below:
/*style.styl*/ /*类似于CSS标准语法*/ h1 { color: #963; background-color:#333; } /*省略大括号（｛｝）*/ h1 color: #963; background-color: #333; /*省略大括号（｛｝）和分号（;）*/ h1 color:#963 background-color:#333
In Stylus styles, you can also use different syntaxes in the same style file Rules, the following writing method will not report an error:
/*style.styl*/ h1 { color #963 } h2 font-size:1.2em
These three CSS preprocessor languages have some common features Features such as: variables, mixins, nesting, functions, etc. In this section, we will compare the similarities and differences in various features of these three CSS preprocessor languages, as well as how to use them.
1. Variables
If you are a developer, variables should be one of your best friends. In the CSS preprocessor language you can also declare variables and use them throughout the style sheet. The CSS preprocessor language supports any variable (e.g. color, numeric value, text). Then you can reference the variable anywhere.
a) Sass variables
Sass variables must start with "$", followed by the variable name and variable value, and the variable name and variable value need to use a colon ( :) separated. Just like CSS property settings:
/*声明变量*/ $mainColor: #963; $siteWidth: 1024px; $borderStyle: dotted; /*调用变量*/ | /*转译出来的CSS*/ ------------------------------------------+------------------------------ body { | body { color: $mainColor; | color: #963; border:1px $borderStyle $mainColor; | border:1px dotted #963; max-width: $siteWidth; | max-width: 1024px; } | } | }
b) LESS variables
Declaring variables and calling variables in LESS style are the same as Sass, the only difference is in front of the variable name The "@" character is used:
/*声明变量*/ @mainColor: #963; @siteWidth: 1024px; @borderStyle: dotted; /*调用变量*/ | /*转译出来的CSS*/ ----------------------------------------+------------------------------- body { | body { color: @mainColor; | color:#963; border:1px @borderStyle @mainColor; | border:1px dotted #963; max-width: @siteWidth; | max-width:1024px; } | }
c) Stylus variables
There are no restrictions on declaring variables in the Stylus style. You can start with the "$" symbol. The trailing semicolon (;) is optional, but the equal sign (=) between the variable name and variable value is required. One thing to note is that if we use the "@" symbol to declare (0.22.4) variables, Stylus will compile, but the corresponding value will not be assigned to the variable. In other words, do not declare variables in Stylus with the "@" symbol at the beginning. The method of calling variables in Stylus is exactly the same as LESS and Sass.
/*声明变量*/ mainColor = #963; siteWidth = 1024px; $borderStyle = dotted; /*调用变量*/ | /*转译出来的CSS*/ ----------------------------------------+-------------------------------- body | body { color mainColor | color: #963; border 1px $borderStyle mainColor | border:1px dotted #963 max-width siteWidth | max-width:1024px; | }
Stylus also has a unique feature that allows you to define reference properties without assigning values to variables:
/*水平垂直居中*/ | /*转译出来的CSS*/ ------------------------------------+------------------------------------ #logo | #logo { position absolute | position:absolute; top 50% | top:50%; left 50% | left:50%; width w = 150px | width:150px; height h = 80px | height:80px; margin-left -(w / 2) | margin-left:-75px; margin-top -(h / 2) | margin-top:-40px; | }
从上面的代码中我们可以看出，CSS预处理器语言中的变量是值级别的重复使用，可以将相同的值定义成变量统一管理起来。
CSS预处理器语言中变量的特性适用于定义主题（也就是我们常说的换肤），我们可以将背景颜色、字体颜色、边框属性等常规样式统一定义，这样不同的主题只需要定义不同的变量文件就可以。
2.作用域（Scope）
CSS预处理器语言中的变量和其他程序语言一样，可以实现值的复用，同样它也存在生命周期，也就是Scope（变量范围，开发人员习惯称之为作用域），简单点讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释这三款CSS预处理器的作用域使用。
a)Sass的作用域
Sass中作用域在这三款预处理器是最差的，可以说在Sass中是不存在什么全局变量。具体来看下面的代码：
/*Sass样式*/ $color: black; .scoped { $bg: blue; $color: white; color: $color; background-color:$bg; } .unscoped { color:$color; }
先看转译出来的CSS样式：
.scoped { color:white;/*是白色*/ background-color:blue; } .unscoped { color:white;/*白色（无全局变量概念）*/ }
示例明显的告诉我们，在Sass样式中定义变量，调用变量是没有全局变量一个概念存在，因此在Sass中定义了相同变量名时，在调用之时千万要多加小心，不然会给你的样式带来错误。
b)LESS的作用域
LESS中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止，同样上面的例子，我们来看看他在LESS下所起的变化。
/*LESS样式*/ @color: black; .scoped { @bg: blue; @color: white; color: @color; background-color:@bg; } .unscoped { color:@color; }
转译出来的CSS样式：
.scoped { color:white;/*白色（调用了局部变量）*/ background-color:blue; } .unscoped { color:black;/*黑色（调用了全局变量）*/ }
c)Stylus的作用域
Stylus虽然起步比较晚，但其作用域的特性和LESS一样，可以支持全局变量和局变量。会向上冒泡查找，直到根为止。
3.混合(Mixins)
Mixins是CSS预处理器中语言中最强大的特性，简单点来说，Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。平时你在写样式时肯定有碰到过，某段CSS样式经常要用到多个元素中，这样你就需要重复的写多次。在CSS预处理器语言中，你可以为这些公用的CSS样式定义一个Mixin，然后在你CSS需要使用这些样式的地方直接调用你定义好的Mixin。这是一个非常有用的特性，Mixins被当作一个公认的选择器，还可以在Mixins中定义变量或者默认参数。
a)Sass的混合
Sass样式中声明Mixins时需要使用“@mixin”，然后后面紧跟Mixins的名，他也可以定义参数，同时可以给这个参数设置一个默认值，但参数名是使用“$”符号开始，而且和参数值之间需要使用冒号（：）分开。
在选择器调用定义好的Mixins需要使用“@include”，然后在其后紧跟你要调用的Mixins名。不过在Sass中还支持老的调用方法，就是使用加号“+”调用Mixins，在“+”后紧跟Mixins名。
一起来看个简单的例子，比如说在你的Sass样式中定义了一个名叫“error”的Mixin，这个“error”设置了一个参数“$borderWidth”，在没特别定义外，这个参数的默认值设置为“2px”：
/*声明一个Mixin叫作“error”*/ @mixin error($borderWidth:2px){ border:$borderWidth solid #f00; color: #f00; } /*调用error Mixins*/ .generic-error { @include error();/*直接调用error mixins*/ } .login-error { @include error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/ }
b)LESS的混合
在LESS中，混合是指将定义好的“ClassA”中引入另一个已经定义的“Class”，就像在当前的“Class”中增加一个属性一样。
不过LESS样式中声明Mixins和Sass声明方法不一样，他更像CSS定义样式，在LESS可以将Mixins看成是一个类选择器，当然Mixins也可以设置参数，并给参数设置默认值。不过设置参数的变量名是使用“@”开头，同样参数和默认参数值之间需要使用冒号（：）分隔开。
正如Sass混合是的示例，同样在LESS样式中定义一个名叫“error”的Mixin，这个“error”设置了一个参数“@borderWidth”，在没有特别定义外，这个参数的默认值是“2px”：
/*声明一个Mixin叫作“error”*/ .error(@borderWidth:2px){ border:@borderWidth solid #f00; color: #f00; } /*调用error Mixins*/ .generic-error { .error();/*直接调用error mixins*/ } .login-error { .error(5px);/*调用error mixins，并将参数@borderWidth的值重定义为5px*/ }
c)Stylus的混合
Stylus中的混合和前两款CSS预处理器语言的混合略有不同，他可以不使用任何符号，就是直接声明Mixins名，然后在定义参数和默认值之间用等号（=）来连接。
/*声明一个Mixin叫作“error”*/ error(borderWidth=2px){ border:borderWidth solid #f00; color: #f00; } /*调用error Mixins*/ .generic-error { error();/*直接调用error mixins*/ } .login-error { error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/ }
三个示例都将会转译成相同的CSS代码：
.generic-error { border: 2px solid #f00; color:#f00; } .login-error { border:5px solid #f00; color: #f00; }
4.嵌套（Nesting）
CSS预处理器语言中的嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而减少代码量，并且增加了代码的可读性。比如说，我们在CSS中多个元素有一个相同的父元素，那么写样式会变得很乏味，我们需要一遍一遍的在每个元素前写这个父元素，除非给特定的元素添加类名“class”或者ID。
section { margin:10px; } section nav { height:25px; } section nav a { color: #0982c1; } section nav a:hover { text-decoration: underline; }
相反，使用CSS预处理器语言的嵌套特性，我们可以在父元素的大括号（｛｝）里写这些元素。同时可以使用“&”符号来引用父选择器。对于Sass、LESS和Stylus这三款CSS预处理器语言的嵌套选择器来说，他们都具有相同的语法：
section { margin:10px; nav { height:25px; a { color:#0982c1; &:hover { text-decoration:underline; } } } }
上面的预处理器转译出来的CSS代码和我们开始展示的CSS代码是相同的，非常的方便吧！
5.继承（Inheritance）
对于熟悉CSS的同学来说，对于属性的继承并不陌生。平时在写CSS样式常碰到多个元素应用相同的样式时，我们在CSS中通常都是这样写：
p,ul,ol{/*样式写在这里*/}
这样做非常的好，但往往我们需要给单独元素添加另外的样式，这个时候我们就需要把其中选择器单独出来写样式，如此一来我们维护样式就相当的麻烦。为了应对这个问题，CSS预处理器语言可以从一个选择继承另个选择器下的所有样式。
a)Sass和Stylus的继承
Sass和Stylus的继承是把一个选择器的所有样式继承到另个选择器上。在继承另个选择器的样式时需要使用“@extend”开始，后面紧跟被继承的选择器：
.block { margin: 10px 5px; padding: 2px; } p { @extend .block;/*继承.block选择器下所有样式*/ border: 1px solid #eee; } ul,ol { @extend .block; /*继承.block选择器下所有样式*/ color: #333; text-transform: uppercase; }
上面的代码转译成CSS：
.block,p,ul,ol { margin: 10px 5px; padding:2px; } p { border: 1px solid #eee } ul,ol { color:#333; text-transform:uppercase; }
b)LESS的继承
LESS支持的继承和Sass与Stylus不一样，他不是在选择器上继承，而是将Mixins中的样式嵌套到每个选择器里面。这种方法的缺点就是在每个选择器中会有重复的样式产生。
.block { margin: 10px 5px; padding: 2px; } p { .block;/*继承.block选择器下所有样式*/ border: 1px solid #eee; } ul,ol { .block; /*继承.block选择器下所有样式*/ color: #333; text-transform: uppercase; }
转译出来的CSS代码：
.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; }
正如所看到的，上面的代码“.block”的样式将会被插入到相应的你要继承的选择器中，但需要注意的是优先级的问题。
6.运算符（Operations）
CSS预处理器语言还具有运算的特性，其简单的讲，就是对数值型的Value（如：数字、颜色、变量等）进行加减乘除四则运算。这样的特性在CSS样式中是想都不敢想的，但在CSS预处理器语言中对样式做一些运算一点问题都没有了，例如：
@base_margin: 10px; @double_margin: @base_margin * 2; @full_page: 960px; @half_page: @full_page / 2; @quarter_page: (@full_page / 2) / 2;
上面代码是LESS的运算示例，声明一下，在取得“@quarter_page”变量时，我们可以直接除以4，但是在这里，我们只是想演示一下圆括号组成的“运算顺序”（这个运算顺序小学生也知道）。在复合型运算中，小括号也是很有必要的，例如：
border: (@width / 2) solid #000;
Sass在数字运算上要比LESS更专业，他可以直接换算单位了。Sass可以处理无法识别的度量单位，并将其输出。这个特性很明显是一个对未来的尝试——证明W3C作出的一些改变。
Stylus的运算是三款预处理器语言中最强大的一款，他拥有其他程序语言一样的运算功能，简单点的加减乘除，复杂的有关系运算、逻辑运算等。受限于篇幅，感兴趣的同学可以到官网上仔细阅读。
7.颜色函数
颜色函数是CSS预处理器语言中内置的颜色函数功能，这些功能可以对颜色进行处理，例如颜色的变亮、变暗、饱和度控制、色相控制，渐变颜色等处理十分的方便。
a)Sass颜色函数
lighten($color, 10%); /* 返回的颜色在$color基础上变亮10% */ darken($color, 10%); /* 返回的颜色在$color基础上变暗10% */ saturate($color, 10%); /* 返回的颜色在$color基础上饱和度增加10% */ desaturate($color, 10%); /* 返回的颜色在$color基础上饱和度减少10% */ grayscale($color); /* 返回$color的灰度色*/ complement($color); /* 返回$color的补色 */ invert($color); /* 返回$color的反相色 */ mix($color1, $color2, 50%); /* $color1 和 $color2 的 50% 混合色*/
这只是Sass中颜色函数的一个简单列表，更多详细的介绍可以阅读Sass文档。
颜色函数可以运用到任何一个元素上，只要其有颜色的属性，下面是一个简单的例子：
$color: #0982C1; h1 { background: $color; border: 3px solid darken($color, 50%);/*边框颜色在$color的基础上变暗50%*/ }
b)LESS颜色函数
lighten(@color, 10%); /* 返回的颜色在@color基础上变亮10% */ darken(@color, 10%); /* 返回的颜色在@color基础上变暗10%*/ saturate(@color, 10%); /* 返回的颜色在@color基础上饱和度增加10% */ desaturate(@color, 10%); /* 返回的颜色在@color基础上饱和度降低10%*/ spin(@color, 10); /* 返回的颜色在@color基础上色调增加10 */ spin(@color, -10); /* 返回的颜色在@color基础上色调减少10 */ mix(@color1, @color2); /* 返回的颜色是@color1和@color2两者的混合色 */
LESS的完整颜色函数功能，请阅读LESS文档。
下面是LESS中如何使用一个颜色函数的简单例子：
@color: #0982C1; h1 { background: @color; border: 3px solid darken(@color, 50%); }
c)Stylus的颜色函数
lighten(color, 10%); /* 返回的颜色在'color'基础上变亮10% */ darken(color, 10%); /* 返回的颜色在'color'基础上变暗10% */ saturate(color, 10%); /* 返回的颜色在'color'基础上饱和度增加10% */ desaturate(color, 10%); /* 返回的颜色在'color'基础上饱和度降低10% */
有关于Stylus的颜色函数介绍，请阅读Stylus文档。
下面是Stylus颜色函数的一个简单实例：
color = #0982C1 h1 background color border 3px solid darken(color, 50%)
从上面展示的部分颜色函数可以告诉我们，Sass、LESS和Stylus都具有强大的颜色函数功能，功能特性上都大同小异，只是在使用方法上略有不同。而且他们都具有相同的一个目的，就是方便操作样式中的颜色值。
8.导入（Import）
在CSS中，并不喜欢用@import来导入样式，因为这样的做法会增加http的请求。但是在CSS预处理器中的导入(@import)规则和CSS的有所不同，它只是在语义上导入不同的文件，但最终结果是生成一个CSS文件。如果你是通赤“@import ‘file.css’”导入“file.css”样式文件，那效果跟普通CSS导入样式文件一样。注意：导入文件中定义了变量、混合等信息也将会被引入到主样式文件中，因此需要避免他们的相互冲突。
Sass、LESS和Stylus三款CSS预处理器语言，导入样式的方法都是一样：
被导入文件的样式：
/* file.{type} */ body { background: #EEE; }
需要导入样式的文件：
@import "reset.css"; @import "file.{type}"; p { background: #0982C1; }
转译出来的CSS代码：
@import "reset.css"; body { background: #EEE; } p { background: #0982C1; }
9.注释（Comment）
CSS预处理器语言中的注释是比较基础的一部分，这三款预处理器语言除了具有标准的CSS注释之外，还具有单行注释，只不过单行注释不会被转译出来。
a)Sass、LESS和Stylus的多行注释
多行注释和CSS的标准注释，他们可以输出到CSS样式中，但在Stylus转译时，只有在“compress”选项未启用的时候才会被输出来。
/* *我是注释 */ body padding 5px
b)Sass、LESS和Stylus的单行注释
单行注释跟JavaScript语言中的注释一样，使用双斜杠（//），但单行注释不会输出到CSS中。
//我是注释 @mainColor：#369;//定义主体颜色
在Stylus中除了以上两种注释之外，他还有一种注释，叫作多行缓冲注释。这种注释跟多行注释类似，不同之处在于始的时候，这里是”/*！”。这个相当于告诉Stylus压缩的时候这段无视直接输出。
/*! *给定数值合体 */ add(a, b) a + b
上面从九个常用的特性对Sass、LESS和Stylus三款CSS预处理器语言的使用做了对比，在某些特性上可以说是一模一样，而有一些特性上功能其实一样，只是在部分书写规则上有所不同。当然有些特性是完全不同。在这里几是从使用方法上做为一个比较，主要目的是让大家经过对比之后，使自己选择哪一款CSS预处理器语言有所方向和帮助。
更多编程相关知识，请访问：编程视频！！
The above is the detailed content of What is css preprocessor. For more information, please follow other related articles on the PHP Chinese website!