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

猜你喜欢