CSS - Analysis css preprocessor

Why preprocessor

Cascading Style Sheets css is a markup language, not a programming language, and therefore is not customizable variables, not reference the like, it does not have to support any syntax, it is mainly the following defects:

Grammar is not strong enough, such as: writing can not be nested, leading to the development of modular need to write a lot of choices duplicate device;
No reasonable style variable and reuse mechanism, such that the associated value to be repeatedly output in the form of logic literals, making it difficult to maintain

This leads to a lot of us no reason to increase the workload on the job. To solve this problem, front-end developers will use a technique called [] CSS preprocessor tool that offers CSS style layer multiplexing mechanism missing, reduce redundant code, improve code maintainability style. Greatly improving the efficiency of development on the front-end style.

What is the CSS preprocessor

CSS preprocessor defines a new language, the basic idea is to use a specialized programming language for programming CSS adds some features, the CSS file is generated as a target, then developers will just use this language to encode work of CSS. Is "using a specialized programming language for Web page design style, and then converted to normal CSS file by the compiler to use for the project."

CSS CSS pre-processor to add some programming features, regardless of browser compatibility issues, for example, you can use variables in CSS, some of the basic characteristics of simple logic, functions, etc. in a programming language that lets you the CSS is more simple, adaptable, better readability and easier to maintain the code of the many benefits and so on.

Popular CSS preprocessor

SASS

Based on Ruby, by server processing, and powerful. High resolution efficiency. Ruby language to learn, difficult to get started than LESS.
LESS

Based NodeJS, by the client process, simple to use. Function simpler than SASS, parsing efficiency is lower than SASS, but in the actual development is enough, so we back office staff if necessary, recommend the use of LESS.
Stylus

2010 generated from Node.js community. CSS is mainly used for pre-Node support to the project, there are some in this community of supporters, in a broad sense popularity is completely inferior to SASS and LESS.
A detailed comparison css preprocessor

LESS Detailed

less grammar

Notes: less can have two comments.
- The first comment: template Comment
```
  // 模板注释 这里的注释转换成CSS后将会删除
```
Because less can be converted to use css in your browser. After the conversion into css, this comment will be deleted (after all css not recognize this comment).
- The second comment: CSS comment syntax
```
/* CSS 注释语法 转换为CSS后让然保留 */
```
Summary: If you write comments in the less, we recommend first to write a comment. Unless it is similar to copyrights, etc., on the use of the second note.
Define the variable

We can value be reused or modified often defined as a variable that refers to this variable can be used where needed. This avoids a lot of duplicated effort.

(1) In less file, define a variable format:
```
@变量名: 变量值;        //格式
@bgColor: #f5f5f5;      //格式举例
```
(2) At the same time, refer to this variable in less file.

Ultimately, less the full version of the file code is as follows:

main.less：
```
// 定义变量
@bgColor: #f5f5f5;

// 引用变量
body{
    background-color: @bgColor;
}
```
We will file compiled less css file after the above (under some say less file compiler), the auto-generated code is as follows:

main.css：
```
body{
    background-color: #f5f5f5;
}
```

Using nested

In the css selector offspring often used, the effect might look like this:

.container {
  width: 1024px;
}

.container > .row {
  height: 100%;
}

.container > .row a {
  color: #f40;
}

.container > .row a:hover {
  color: #f50;
}

The above code is nested many layers, it is very cumbersome to write. But if nested syntax to write less code, it is relatively simple.

Nested example as follows:

main.less:

.container {
  width: @containerWidth;

  > .row {
    height: 100%;
    a {
      color: #f40;

      &:hover {
        color: #f50;
      }

    }
  }

  div {
    width: 100px;

    .hello {
      background-color: #00f;
    }

  }
}

After the above file is compiled less css files, automatically generated code is as follows:

main.css

.container {
    width: 1024px;
}

.container > .row {
    height: 100%;
}

.container > .row a {
    color: #f40;
}

.container > .row a:hover {
    color: #f50;
}

.container div {
    width: 100px;
}

.container div .hello {
    background-color: #00f;
}

Mixin

Mixin is to effect repetitive code into a class which, as long as each reference to the class name, which can refer to the code, is very convenient.

(1) a class definition file :( less in duplicate custom code into the class)
```
/* 定义一个类 */
.roundedCorners(@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}
```
Code above, the first line inside the parentheses is the parameter content: This parameter is the default value .

(2) The above referenced class file in less:
```
#header {
  .roundedCorners;
}
#footer {
  .roundedCorners(10px);
}
```
Code above, header references without parameters, a parameter indicating the default value; footer referenced with the parameters, then use this parameter.
Import

During the development phase, we can combine different styles into multiple files, and finally merge by @import way. It means that, when multiple less files appear, how they are referenced.

css file can have many, less files also can be many.

(1) defines a document referenced less_button.less
```
.btn{
  line-height: 100px;
  color: @btnColor;
}
```
Note : - cited less file, we used to be preceded underlined , indicating that it is part of the file . _button.lessYou may reference main.cssin the custom variable

(2) the main.cssreferences above_button1.less

main.css:
```
@btnColor: red;
@import url('_button.less'); //这里的路径写的是相对路径
body{
  width: 1024px;
}
```
After compilation of the above main.less main.css, the automatically generated code is as follows:
```
.btn {
    line-height: 100px;
    color: red;
}
body {
    width: 1024px;
}
```
Built-in functions

less has some built-in functions, here to talk about lighten and darken two built-in functions.

main.less:
```
body{
  backgroud-color: lighten(#000, 10%); //让黑色变亮10%
  color: darken(#fff, 10%); //让白色变暗10%
}
```
After compilation of the above main.less main.css, the automatically generated code is as follows:

main.css：
```
body {
  background-color: #1a1a1a;
  color: #e6e6e6;
}
```
How to Cite less
- A practice: After writing less file, compile it to css file (compiled less refers to written documents generated as compiled less css file .less, depending on environment ** ** NodeJS.), Then css files referenced in the code.
- Practice two: with less files directly referenced in the code. In fact, the browser-line to convert the file to a local less css file.
Once your product, of course, it is the use of a practice, because practice two will be more than compile time.

Usually when development or demonstration demo can practice two.

Detailed Stylus

installation
```
npm install stylus -g
```
Basic use

1, the new installation directory index.styl file, and then a new index folder, create a new folder in the index index.html;
```
//css.styl文件
div
  color:red;

//index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
  <div>我是div</div>  
</body>
</html>
```
2, input stylus -w index.styl -o index be translated into a css file;

-w index.styl- automatic monitoring css.stylfile changes

-o index- the same name as the compiled index.cssfile into the index folder

3, direct stylus to write in css.styl

The basic syntax

stylus Chinese reference documentation

For example grammar freedom

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
  <div class="div1">我是div1，我有花括号，冒号和分号</div>
  <div class="div2">我是div2，我无花括号，但有冒号和分号</div>
  <div class="div3">我是div3，我无花括号、冒号，但有分号</div>
  <div class="div4">我是div4，我无花括号、冒号、分号</div>
  <div class="div5">我是div5，我有花括号，但无冒号、分号</div>
</body>
</html>
//index.styl
//1、 有花括号，冒号和分号
.div1 {
  color: red;
}
//2、 无花括号，但有冒号和分号
.div2
  color: green;
// 3 、无花括号、冒号，但有分号
.div3
  color blue;
// 4 、无花括号、冒号、分号
.div4
  color greenyellow
// 5 、有花括号，但无冒号、分号
.div5{
  color rosybrown
}

variable

stylus in addition to the variable name can not begin with the @ outside, the other can

//html文件
<div class="bianliang"> 变量示范 </div>
//styl文件
largeFontSize = 50px
$borderStyle=solid

.bianliang
  font-size largeFontSize
  border 1px $borderStyle red

Nesting

//html
  <div class="parent">
      <div class="child">
          <p>我是child里的p</p>
      </div>
  </div>
//styl
.parent {
  border 1px solid red

  .child {
    border 2px solid green

    p {
      font-size 50px
      &:hover{
        color green
      }
    }
      // hover下面的写法也可以
      //p:hover{
      //  color red
      //
      //}
  }
}

Mixing

<div class="mixin1">混入示例1</div>
<div class="mixin2">混入示例2</div>

setBorder($borderwidth = 1px){
  border $borderwidth solid red
}
.mixin1{
  width 200px 
  height 200px
  setBorder()
}
.mixin2{
  width 100px
  height 100px
  setBorder(5px)
}

In fact, there can be derived the following syntax

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

inherit

Sometimes some css statements of the different elements is the same, if not using inheritance syntax, you need to carry out each element separately, then write the same syntax, the drawback is that can not be directly written in the style of the original selector, need re-write the same style selectors to write. If you use inheritance syntax, there is no such situation.

<div class="jicheng">
      我是继承示例
      <div class="parent1">
          我是parent1
          <div class="child1">
              我是child1 <div>我是个没有class和id 的div</div>
              <p>我是child1里的p--- <span>我是p里的span</span> </p>
          </div>
      </div>
</div>

.reset{
  margin 0;
  padding 0;
  border 1px solid red
}
.jicheng{
  @extend .reset
  color red
  .parent1{
    @extend .reset
    color green
    .child1{
      @extend .reset
      color blue
      p{
        @extend .reset
        color yellow
      }
    }
  }
}

If we do not use inheritance, you may need to write:

.jicheng, .jicheng .parent1,.parent1 .child1,.child1 p{
  margin 0
  padding 0
  border 1px solid red
}
.jicheng{
  color red
  .parent1{
    color green
    .child1{
      color blue
      p{
        color yellow
      }
    }
  }
}

colour

Color which has built-in functions which can be used to adjust the brightness of the color, saturation; Example

<div class="color-function">
    颜色函数
    <div class="dark">我变暗了</div>
    <div class="baohedu">饱和度降低了</div>
</div>

colorValue=red
.color-function{
  background-color colorValue
  .dark{
    background-color darken(colorValue,50%)
  }
  .baohedu{
    background-color desaturate(colorValue,40%)
    }
}

Operators

<div class="yunsuanfu">
   运算符例子
</div>

.yunsuanfu
  font-size 30px+30px
  margin 10px+20px

condition

<div class="tiaojian">
    <div class="have">条件语句--有margin</div>
    <div class="have-not">条件语句--没有margin</div>
</div>

box(x,y,haveMargin=false)
  padding x y
  if haveMargin
    margin x y
.tiaojian{
  div{
    border 1px solid red
  }
  .have{
    box(10px,10px,true)
  }
  .have-not{
    box(10px,20px,false)
  }
}

Iteration

<div class="diedai">
  迭代示例
</div>
.diedai{
  for n in 1 2 3
  z-index n
}