css预处理

说说less, scss, stylus的特点？

CSS预处器：用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。

基本语法：

sass

    /*style.sass新版语法规则*/
h1{
color:#936;
background-color:#333;
}	
/*老的语法和常规的CSS语法略有不同，他需要严格的语法，任何的缩进和字符的错误都会造成样式的编译错误。Sass可以省略大括号（｛｝）和分号（；）*/
h1
color:#936
background-color: #333

less

/*style.less*/
h1 {
color: #963;
background-color: #333;
}

stylus

/*style.stylus*/
/*类似于CSS标准语法*/
h1 {
color: #963;
background-color:#333;
}
/*省略大括号（｛｝）*/
h1 
color: #963;
background-color: #333;
/*省略大括号（｛｝）和分号（;）*/
h1
color:#963
background-color:#333

变量

sass

//sass变量必须是以$开头的，然后变量和值之间使用冒号（：）隔开，和css属性是一样的，
$maincolor : #092873;
$siteWidth : 1024px;
$borderStyle : dotted;
body {
    color: $maincolor;
    border: 1px $borderStyle $mainColor;
    max-width: $siteWidth;
}

less

//Less css中变量都是用@开头的，其余与sass都是一样的
@maincolor : #092873;
@siteWidth : 1024px;
@borderStyle : dotted;
body {
    color: @maincolor;
    border: 1px @borderStyle @mainColor;
    max-width: @siteWidth;
}

stylus

// stylus对变量是没有任何设定的，可以是以$开头，或者任何的字符，而且与变量之间可以用冒号，空格隔开，但是在stylus中不能用@开头。但变量名和变量值之间的等号（=）是需要的
maincolor = #092873
siteWidth = 1024px
borderStyle = dotted
body 
    color maincolor
    border 1px borderStyle mainColor
    max-width siteWidth

//以上转换为css，如下
body {
    color: #092873;
    border: 1px dotted #092873;
    max-width: 1024px;
}

作用域

sass：没有作用域之分

/*Sass样式*/
$color: black;
.scoped {
    $bg: blue;
    $color: white;
    color: $color;
    background-color:$bg;
}
.unscoped {
    color:$color;
}	 
//最终结果，两个类scoped，unscoped的color都是白色的

less：ESS中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止

@color: black;
.scoped {
    @bg: blue;
    @color: white;
    color: @color;
    background-color:@bg;
}
.unscoped {
    color:@color;
}	
//最终结果，两个类scoped为白色，unscoped的color是黑色的

stylus：Stylus虽然起步比较晚，但其作用域的特性和LESS一样，可以支持全局变量和局变量。会向上冒泡查找，直到根为止。

嵌套

sass,less,stylus

//sass,less,stylus都支持嵌套
nav { 
    ul { 
        margin: 0; 
        padding: 0; 
    } 
    li { 
        display: inline-block; 
    } 
    a { 
        display: block; 
        padding: 6px 12px; 
        text-decoration: none; 
    } 
}

//以上转换为css，如下
nav ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
nav li { 
    display: inline-block; 
} 
nav a { 
    display: block; 
    padding: 6px 12px; 
    text-decoration: none; 
}

运算符

sass,less,stylus,css

body {
margin: (14px/2);
top: 50px + 100px;
right: 80 * 10%;
}

颜色处理函数

sass

/*颜色函数如下：
lighten($color, 10%); 
darken($color, 10%);  
saturate($color, 10%);   
desaturate($color, 10%);
grayscale($color);  
complement($color); 
invert($color); 
mix($color1, $color2, 50%); */   
$color: #0982C1;
h1 {
    background: $color;
    border: 3px solid darken($color, 50%);
}

less

/*lighten(@color, 10%); 
darken(@color, 10%);  
saturate(@color, 10%);  
desaturate(@color, 10%); 
spin(@color, 10); 
spin(@color, -10); 
mix(@color1, @color2); */ 
@color: #0982C1;
h1 {
    background: @color;
    border: 3px solid darken(@color, 50%);
}

stylus

/*lighten(color, 10%); 
darken(color, 10%);  
saturate(color, 10%);  
desaturate(color, 10%); */
color = #0982C1 
h1
    background color
    border 3px solid darken(color, 50%)

导入

sass:只能在使用 url() 表达式引入时进行变量插值( $device: mobile;@import url(styles.#{$ device}.css);), less：可以在字符串中进行插值(@device: mobile;@import "styles.@{device}.css";), stylus:无插值，但是可以利用其字符串拼接的功能实现(device = "mobile"@import "styles." + device + ".css")

//在CSS中，并不喜欢用@import来导入样式，因为这样的做法会增加http的请求。但是在CSS预处理器中的导入(@import)规则和CSS的有所不同，它只是在语义上导入不同的文件，但最终结果是生成一个CSS文件。如果你是通过“@import ‘file.css’”导入“file.css”样式文件，那效果跟普通CSS导入样式文件一样。注意：导入文件中定义了变量、混合等信息也将会被引入到主样式文件中，因此需要避免他们的相互冲突
1.css:
/* file.{type} */
body {
    background: #000;
}
2.less
@ import "1.css";
@ import "file.{type}";
p {
background: #092873;
}  
3.最终预处理器处理后的css
@ import "1.css";
body {
    background: #000;
}
p {
    background: #092873;
}

继承：为多个元素定义相同样式

sass

//sass可通过@extend来实现代码组合声明
message {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}
.success {
    @extend .message;
    border-color: green;
}
.error {
    @extend .message;
    border-color: red;
}

less

.message {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}
.success {
    .message;
    border-color: green;
}
.error {
    .message;
    border-color: red;
}

.message, .success, .error, .warning {
    border: 1px solid #cccccc;
    padding: 10px;
    color: #333;
}
.success {
    border-color: green;
}
.error {
    border-color: red;
}

混入：当某段 CSS 经常需要在多个元素中使用时，可以为这些共用的 CSS 定义一个 Mixin，然后只需要在需要引用这些 CSS 地方调用该 Mixin 即可。

sass：可以传参

@mixin error($borderWidth: 2px) {
    border: $borderWidth solid #F00;
    color: #F00;
}
.generic-error {
    padding: 20px;
    margin: 4px;
    @ include error(); //这里调用默认 border: 2px solid #F00;
}
.login-error {
    left: 12px;
    position: absolute;
    top: 20px;
    @ include error(5px); //这里调用 border:5px solid #F00;
}

less：可传参

.error(@borderWidth: 2px) {
    border: @borderWidth solid #F00;
    color: #F00;
}
.generic-error {
    padding: 20px;
    margin: 4px;
    .error(); //这里调用默认 border: 2px solid #F00;
}
.login-error {
    left: 12px;
    position: absolute;
    top: 20px;
    .error(5px); //这里调用 border:5px solid #F00;
}

stylus：可传参

error(borderWidth= 2px) {
    border: borderWidth solid #F00;
    color: #F00;
}
.generic-error {
    padding: 20px;
    margin: 4px;
    error(); 
}
.login-error {
    left: 12px;
    position: absolute;
    top: 20px;
    error(5px); 
}

.generic-error {
    padding: 20px;
    margin: 4px;
    border: 2px solid #f00;
    color: #f00;
}
.login-error {
    left: 12px;
    position: absolute;
    top: 20px;
    border: 5px solid #f00;
    color: #f00;
}

if语句

sass

$type: monster;
p {
    @if $type == ocean {
        color: blue;
    } @else if $type == matador {
        color: red;
    } @else if $type == monster {
        color: green;
    } @else {
        color: black;
    }
}	
//最终样式为p {color:green;}

less：LESS的条件语句使用有些另类，他不是我们常见的关键词if和else if之类，而其实现方式是利用关键词“when”。且还提供了很多类型检查函数来辅助条件表达式，例如：iscolor、isnumber、isstring、iskeyword、isurl等等

.mixin (@a) when (@a >= 10) { 
    background-color: black; 
} 
.mixin (@a) when (@a < 10) { 
    background-color: white; 
} 
.class1 { .mixin(12) } //结果.class1 { background-color: black; } 
.class2 { .mixin(6) } // 结果 .class2 {  background-color: white; }

stylus：与sass类似

循环语句

sass

@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}	
/*结果：
.item-1 {  width: 2em; }
.item-2 {  width: 4em; }
.item-3 {  width: 6em; }*/

less：没有for语句，只能通过when模拟

.loopingClass (@index) when (@index > 0) {
.myclass {
    z-index: @index;
}
// 递归
.loopingClass(@index - 1);
}
// 输出
.loopingClass (3);
/*结果：
.myclass {z-index: 3;}
.myclass {z-index: 2;}
.myclass {z-index: 1;}	
*/

stylus：在Stylus样式中通过for/in对表达式进行循环，

//  形式如下：  for <val-name> [, <key-name>] in <expression>
body
    for num in 1 2 3
        foo num		
/*结果：
body {
    foo: 1;
    foo: 2;
    foo: 3;
}	
*/

你理解的postcss?

postcss:是一个利用JS插件来对CSS进行转换的工具
postcss不是预处理器
PostCSS最引人注目之处在于它不局限于任何一种类型功能，它是完全可以定制的，可配置的，可以说功能是无限的，根据你自己特定目定安装所需的插件。

链接链接

简述下CSS预处理的原理?

CSS预处理的原理:
1. 取到 DSL 源代码的分析树
2. 将含有动态生成相关节点的分析树转换为静态分析树
3. 将静态分析树转换为 CSS 的静态分析树
4. 将 CSS 的静态分析树转换为 CSS 代码
CSS后处理的原理:
1. 将源代码做为 CSS 解析，获得分析树
2. 对 CSS 的分析树进行后处理
3. 将 CSS 的分析树转换为 CSS 代码

实战: 项目中需要一百个类名, 作用于padding: 1px 至padding: 100px区间，用任意CSS预处理实现即可

   @for $i from 1 through 100 {
    .item-#{$i} { 
        padding: 1px * $i; 
        }
    }

番外: vue中的style中scoped属性是做什么的？原理？

scoped作用：在vue组件中，为了使样式私有化（模块化），不对全局造成污染
scoped原理：vue通过在DOM结构以及css样式上加唯一不重复的标记，以保证唯一，达到样式私有化模块化的目的
1. 给HTML的DOM节点加一个不重复data属性(形如：data-v-2311c06a)来表示他的唯一性
2. 在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-2311c06a]）来私有化样式
3. 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性

说说less, scss, stylus的特点？

你理解的postcss?

简述下CSS预处理的原理?

实战: 项目中需要一百个类名, 作用于padding: 1px 至padding: 100px区间，用任意CSS预处理实现即可

番外: vue中的style中scoped属性是做什么的？ 原理？

番外: vue中的style中scoped属性是做什么的？原理？