Day_14 less,scss,stylus

less,scss,stylus 的特点

1. npm安装方式：

scss: npm i -d sass-loader node-sass
less: npm i -d less-loader less
stylus: npm i -d stylus-loader stylus

3. 相关资料网站：

scss：https://www.sass.hk/　　
less：http://lesscss.cn/　http://www.bootcss.com/p/lesscss/　
stylus：http://stylus-lang.com/　https://www.zhangxinxu.com/jq/stylus/
scss和sass的区别请详见：http://sass.bootcss.com/docs/scss-for-sass-users/

3. 共同点：

• 引入外部样式文件：@import ‘path’ //注：在vue-cli框架内使用时，如果想使用相对src下的路径则，在路径前添加_{@/(不适用于less和stylus下引用.css后缀文件)，例：‘}@/path’
• 都有选择器嵌套功能
• 单行注释: //都不会被输出到编译后的文件中
• 都提供了父选择器标识符&
• 都有混合器，混合器都可以传参和设置默认值, 混合器内都可以使用&选择器
• 都提供了各自的内置函数
• 都可以使用一些常用的运算符: ±*/

4. 基本语法：

• Sass 和 Less 都使用的是标准的 CSS 语法, Sass 同时也支持不包含 { } 和 ; 的方式
• Stylus 支持的语法要更多样性，花括号和分号写不写都可以

5. scss有属性嵌套功能

font: {
    　　family: fantasy;
    　　size: 30em;
    　　weight: bold;
　　}
　　//编译结果：
　　//font-family: fantasy;
　　//font-size: 30em;
　　//font-weight: bold

6. 变量的申明方式：

scss：$variable-name：value
less: @variable-name：value
stylus: variable-name = value

7. 混合器的使用方式

 scss
声明：@mixin mixin-name($param:defaultValue) {...}　　
引入: @include mixin-name($param:value) 
// 注：声明和引用不需传参时()可省略

less
声明：.mixin-name(@param:defaultValue){...}　　
引入: div{.mixin-name(param:value)} 
// 注：声明时不用传参数时()可省略,但省略后无论是否被引用该样式都会被打包，所以无论是否需要参数都不能省略声明的(), 引入不用传参数时()可省略

stylus
声明：mixin-name(param=defaultValue){...}　　
引入: div{mixin-name(param:value)} 
//注：声明时不用传参数时()可省略,但省略后无论是否被引用该样式都会被打包，所以无论是否需要参数都不能省略声明的(), 引入不用传参数时()不可省略

8. 插值:

scss: #{}
less: @{}
stylus: {}

9. 自定义函数：

scss: 
声明：@function funName($param:defaultValue){...}　　
调用: funName($param:value)

stylus: 
声明：funName(param=defaultValue){...} 　
调用: funName(param:value)

less: 暂无

10. 可用预算符：

scss：+,-,*,/,%,>,>=,==,!=,<=,<,
less：+,-,*,/,>,>=,=,=<,<
stylus：[],!,~,+,-,**,*,/,%,...,..,>,>=,<,<=,==,!=,&&,||,?,:,=,:=,?=,+=,-=,*=,/=,%=

11. 内置函数：

scss：
nth,join,append,map-get,map-merge
less：
round,ceil,floor,percentage,saturate,lighten,darken,fade,fadein,fadeout,spin,mix,
stylus：round,ceil,floor,saturate,desaturate,saturation,light,lighten,lightness,darken,red,green,blue,alpha,hue,push,keys,values,typeof,unit,match,abs,min,max,even,add,sum,avg,join,hsla,rgba,invert,unquote,s,operate,length,warn,error,last,p,oppsite-position,image-size,add-property

12. 关键字:

scss:and,or,not less:when,truth,
stylus:is defined,in,is,not,is
not,isnt,is a,and,or,if,unless,

13. 避免编译：
    less：～’…’
    stylus：@css{…}
14. 避免编译拓展,可用于解决有些样式经过编译拓展后被丢失的问题
    less、scss:
    /! autoprefixer: off/
    不要扩展的样式:
    -webkit-box-orient:vertical;
    /! autoprefixer: on/
15. 避免编译引入文件
    scss: 被引入文件名前加_,引入时不用加_,例：引入_colors.scss:@import ‘colors’
16. 指令：
    scss：@if,@else if,@else,@for,@each,@while,@-root,@debug,@warn,@extend-Only
17. 继承
    scss、stylus：@extend selector
    注：不要在scss的css规则中使用后代选择器（比如.foo .bar）去继承css规则，这样生成css中的选择器的数量很快就会失控

总结：

1. scss提供了属性嵌套功能，可以更进一步减少重复的样式代码，但其继承规则有限制是个缺点
2. less和stylus提供了更丰富的运算方法和内置函数
3. stylus的语法相对要更简洁些,也免去了重复的写{}和;
4. Sass和less有中文版官网，更便于学习

postcss

css 预处理原理

CSS 预处理器用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者可以直接使用这种语言进行 CSS 的编码工作。
简单来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。

实战：项目中需要100个类名，作用于pading:1px 至 padding ： 100px区间，用任意CSS预处理器实现。

番外： vue 中的style 中的scoped 属性是左什么的？原理？