css预加载器类型

一、less(https://less.bootcss.com/)

优点

1、写法

.module {
　.action {
　　a, a:hover {
　　　//styles
　　}
　}
}

2、结构清晰，便于扩展。对于模块很多的应用特别是单页 app，经常需要用 selector 来划分不同模块的 CSS 的 scope。应用less就简洁明了，可避免少写很多重复的选择器，而且结构非常清晰，相对于传统的css写法，可极大的避免选择器权重问题。

3、LESS是用JavaScript设计的，并且创建在 live 中使用，其编译速度比其他CSS预处理器更快。

4、完全兼容 CSS 代码，可以方便地应用到老项目中。

5、功能用法

      1） 变量——用@定义变量，如：@color: blue

     2） 扩展器——Extend是一个较少的伪类，它将放置的选择器与它所引用的选择器进行合并；

    3） 样式的混入（mixin）

•  merge需要在每个连接挂起声明上显式+或+_标记。

        .mixin() { box-shadow+: inset 0 0 10px #555;}

        .myclass {

            .mixin();

             box-shadow+: 0 0 20px black;

          }

• 混入类选择器和id选择器  

        .a, #b { color: red;}

        .mixin-class {

            .a();

          }

        .mixin-id {

             #b();

         }

•   带多个参数

        .mixin(@color) { color-1: @color;}

        .mixin(@color; @padding: 2) { color-2: @color; padding-2: @padding;}

        .mixin(@color; @padding; @margin: 2)

            { color-3: @color; padding-3: @padding; margin: @margin @margin @margin @margin;}

•    arguments变量参数参数

       .box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {

            -webkit-box-shadow: @arguments;

             -moz-box-shadow: @arguments;

             box-shadow: @arguments;}

        .big-block { .box-shadow(2px; 5px);}

•  高级参数和@rest变量

        .mixin(@a; @rest...) {

             // @rest is bound to arguments after @a

              // @arguments is bound to all arguments

           }

•   从mixin返回变量或mixin

        .mixin() {

          @width: 100%;

            @height: 200px;

        }

        .caller {

            .mixin(); width:

             @width; height: @height;

        }

    4）less插件引用及编写：使用@plugin的规则类似于使用@import您的.less文件。如：

          插件：

        registerPlugin({

           install: function(less, pluginManager, functions) {

                functions.add('pi', function() {

                     return Math.PI; });

        }

      })

        引用：@plugin "my-plugin";

            .show-me-pi { value: pi();}

        这样就能得到一个随机数 value

缺点

1、须要放在客户端编译

二、sass(https://www.sass.hk/)

功能：

1、写法：嵌套写法和less相似

2、变量：用$来定义 如:$color: blue

3、css语法规则：父选择器 & ;占位符选择器 %foo（通过@extend调用）;子组合选择器和同层组合选择器：>、+和~;基于Nicole Sullivan面向对象的css的理念,通过@extend来实现； @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

4、导入文件使用：@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀，如(@import 'blue-theme') 或者 .theme { @import 'theme'}

5、混合宏 （在@include混合器时给混合器传参）

•   不带参数

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

•  带参数

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

• 带参数且默认传参

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

6、数据类型 (Data Types)

• 数字，1, 2, 13, 10px
• 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
• 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
• 布尔型，true, false
• 空值，null
• 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

缺点

1、须要放在服务端编译

三、stylus(https://less.bootcss.com/)

功能

1、书写方式：Stylus的空格有重要的意义，通常使用缩排和凹排代替花括号{以及}，如：

    body 


            color  white

2、选择器

•  Stylus就跟CSS一样，允许使用逗号为多个选择器同时定义属性。

        texarea, input 


           border 1px solid #eee

        以上等同于

    

          texarea,

            input 


               border 1px solid #eee




• 样式混合

box-shadow()
    -webkit-box-shadow arguments
    -moz-box-shadow arguments
    box-shadow arguments
    html.ie8 &,
    html.ie7 &,
    html.ie6 &
      border 2px solid arguments[length(arguments) - 1]

  body
    #login
      box-shadow 1px 1px 3px #eee

• 传参

pad(n)
  padding (- n)

body
  pad(5px)

3、变量（指定表达式为变量，然后在我们的样式中贯穿使用）

font-size = 14px

body
  font font-size Arial, sans-seri

•  变量冒泡（属性会“向上冒泡”查找堆栈直到被发现，或者返回null）

body
  color: red
  ul
    li
      color: blue
      a
        background-color: @color

4、Stylus支持通过使用{}字符包围表达式来插入值，其会变成标识符的一部分

table
  for row in 1 2 3 4 5
    tr:nth-child({row})
      height: 10px * row