css预处理器

css预处理器

• sass
• Less
• stylus

基本语法

Less 的基本语法属于CSS 风格

Sass，stylus 相比之下更激进一些， 可以利用缩进，空格和换行来减少需要输入的字符

不过区别在于 Sass， stylus同时兼容CSS风格的代码

Less& SCSS :

.box{
    dispaly:block;
}
复制代码

Sass

.box
	dispaly: block
复制代码

stylus

.box
    dispaly: block
复制代码

注：后面的 Sass 代码会用被更多人接受的 SCSS 风格给出

嵌套语法

三者的嵌套语法都是一致的，甚至连引用父选择器的标记 & 也相同

区别只是 Sass 和 stylus 可以省略大括号

Less

.a{
    &b{
        color: red;
    }
}
复制代码

变量

变量为 CSS 增加了一种有效的复用方式， 减少了原来在 CSS 中无法避免的重复编码

Less：

@red: #c00;

srtong {
    color: @red;
}
复制代码

Sass:

$red: #c00;

strong {
    color: $red
}
复制代码

stylus

redColor = #c00

strong{
    color: redColor
}
复制代码

@import

Less 中可以在字符串中进行插值：

@device: mobile;
@import "styles.@{device}.css";
复制代码

Sass 中只能在使用url（）表达式引入的时候进行变量插值：

@device: mobile;
@import url(styles.#{$device}.css)
复制代码

stylus 中无法插值，但是可以用字符串拼接来实现功能：

device = "mobile"
@import "styles" + device + ".css"
复制代码

混入

混入（mixin）应该说是预处理器最精髓的功能之一了。

它提供了 CSS 缺失的最关键的东西 ：样式层面的抽象。

Less 的混入有两种方式：

1. 直接在目标位置混入另一个类的样式（输出已确实，无法使用参数）

   2.定义一个不输出的样式片段（可输入参数）， 在目标位置输出。

.alert{
    font-weight:700;
}

.highlight(@color: red){
    font-size: 1.2em;
    color: @color;
}

.heads-up {
    .alert();
    .highlight(red);
}
复制代码

Sass

@mixin large-text{
    font: {
        family: Arial;
        size: 20px;
        weight: bold;
    }
    color: #ff0000;
}
.page-title { 
    @include large-text;
    padding: 4px;
    margin: 10px;
}
复制代码

继承

stylus，Scss

.message
    padding: 10px;
    border: 1px solid #eee
    
.warning
    @extend .message
    color: #e2e21e 
复制代码

Less

.message{
    padding: 10px;
    border: 1px solid #eee;
}
复制代码

函数

三种预处理器都自带了诸如色彩处理，类型判断， 数值计算等内置函数

stylus

@function golden-ratio($n){
    @return $n * 0.618;
}

.golden-box{
    width: 200px;
    heigth: golden-ratio(200px);
}
复制代码