CSS预处理器

• CSS预处理器就是用某一种语言来为CSS增加一些动态语言的特性(变量,函数,继承等)
• CSS预处理器可以让你的CSS更加简洁,适应性更强,代码更直观等诸多好处
• 简而言之:CSS预处理器就是升级版CSS
• 常见的CSS预处理器:Less,Sass,Stylus

Less

• Less是一门CSS预处理语言,为CSS赋予了动态语言的特征
• 它扩展了CSS语言,增加了变量,Mixin(混合),嵌套,函数和运算等特性,使CSS更容易维护和扩展
• 用类似JS的语法去写CSS
• 为什么需要less
  • CSS语法虽然简单,但它同时也带来一些问题
  • CSS需要书写大量看似没有逻辑的代码,不方便维护及扩展,也不利于复用
  • 造成这些原因的本质源于CSS是一门非程序式的语言,没有变量/函数/作用域等概念
• less基本使用
  • 在浏览器直接运行
    • 编写less文件-->引入less.js-->运行
    • 一定要先引入less.css在引入less.js
    • 如果less代码是写到单独的文件中,一定要在服务器环境运行才能生效
  • 提前预编译
    • 编写less文件-->利用工具转换为css文件-->引入css文件
    • 无需引入less.js文件,无需在服务端运行

less中的注释

• 在less中既有单行注释也有多行注释
• less中的单行注释不会参与预处理,预处理的时候不会把单行注释编译到处理后的文件中

less中的变量

• 和js中的变量概念基本一样
  • less定义变量的格式:@变量名称:值;
  • less中使用变量的格式:@变量名称;
  • 和js一样可以将一个变量赋值给另一个变量,@变量名称:@变量名称;
• 和js一样less中的变量也有全局变量和局部变量
  • 定义在{}外面的就是全局变量,什么地方都可以使用
  • 定义在{}里面的就是局部变量,只能在{}中使用
• less中的变量是延迟加载的,写到后面也能在前面使用
• 和js一样不同作用域的变量不会相互影响,只有相同作用域的变量才会相互影响
• 和js一样在访问变量时会采用就近原则
• 在less中属性的取值可以直接使用变量,但是如果是属性名称或者选择器名称并不能直接使用变量,如果属性名称或者选择器名称想使用变量中保存的值,呢么必须使用变量插值的格式:@{变量名称}

less中的运算

• less中的运算和CSS3中新增的calc函数一样,都支持+ - * /运算
• 两个数至少有一个需要带单位

less中的混合

• 将需要重复使用的代码封装到一个类中,在需要使用的地方调用封装好的类即可
• 在预处理的时候less会自动将用到的封装好的类中的代码拷贝过来
• 如果混合名称的后面没有(),那么在预处理的时候,会保留混合的代码
• 如果混合名称的后面加上(),那么在预处理的时候,不会保留混合的代码
• less中的@arguments和js中的arguments一样,可以拿到传递进来的所有形参
• less中的...表示可以接收0个或多个参数,如果形参列表中使用了...,那么...必须写在形参列表最后
• less中混合的匹配模式
  • 匹配模式就是在形参列表最前面随便加一个字符串,将来想调用哪一个混合就传递哪一个对应的字符串
  • @_:表示通用的匹配模式
  • 无论同名的哪一个混合被匹配了,都会先执行通用匹配模式中的代码

less中的内置函数

• 由于less的底层就是用JavaScript实现的,所以JavaScript中常用的一些函数在less中都支持

less中的层级结构

• 如果在某一个选择器的{}中直接写上了其他的选择器,会自动转换成后代选择器
• &的作用,是告诉less在转换的时候不要用后代来转换,直接拼接在当前选择器的后面即可
• less中的继承和混合的区别
  • 使用时的语法格式不同
  • 转换之后的结果不同(混合是直接拷贝,继承是并集选择器)

less中的条件判断

• less中可以通过when给混合添加执行限定条件,只有条件满足(为真)才会执行混合中的代码
• when表达式中可以使用标记运算符(> < >= <= =),逻辑运算符,或者检查函数来进行条件判断
  • (),()相当于JS中的||
  • ()and()相当于JS中的&&

---

SASS

• SASS是一套利用Ruby实现的,最早最成熟的CSS预处理器,诞生于2007年
• 它扩展了CSS语言,增加了变量,Mixin(混合),嵌套,函数和运算等特性,使CSS更易维护和扩展
• 如何学习SASS
  • 由于LESS的诞生比SASS要晚,并且LESS受到了SASS的影响,所以在LESS中能看到大量SASS中的特性
  • 所以只要学会了LESS就等同于学会了大部分的SASS
• LESS和SASS文件后缀名区别
  • LESS以.less结尾
  • SASS以.sass或者.scss结尾
    • .sass结尾以缩进代替{}表示层级结构,语句后面不用编写分号
    • .scss以{}表示层级结构,语句后面需要写分号
    • 企业开发中推荐使用.scss结尾

SASS中的注释

• SASS中的注释和LESS中的注释一样
• 单行注释不会被编译(不会出现在编译后的文件中)
• 多行注释会被编译(会出现在编译后的文件中)

SASS中的变量

• SASS中的变量和LESS中一样,只是定义格式不同
  • LESS中定义变量 @变量名称:值;
  • SASS中定义变量 $变量名称:值;
• SASS中变量特点
  • SASS中变量特点和LESS中几乎一样
  • 后定义覆盖先定义
  • 可以把变量赋值给其他变量
  • 区分全局变量和局部变量(访问采用就近原则)
• SASS中变量不是延迟加载,不可以先使用后定义
• SASS中的变量插值
  • SASS中的变量插值和LESS中也一样,只不过格式不一样
  • LESS变量插值格式:@{变量名称}
  • SASS变量插值格式:#{$变量名称}
  • SASS中的运算与LESS也一样

SASS中的混合

• SASS中的混合和LESS中也一样,只是定义格式和调用的格式不同
  • LESS中混合定义:.混合名称{} 或者.混合名称(){}
  • LESS中混合调用:.混合名称; 或者.混合名称();
  • SASS中混合定义:@mixin 混合名称{}; 或者@mixin 混合名称(){};
  • SASS中混合调用:@include 混合名称; 或者@include 混合名称();
• SASS中带参数混合和LESS中也一样
• SASS中的可变参数
  • SASS中的可变参数和LESS中也一样
  • 只不过由于SASS不是使用JS实现的,所以不能直接在混合中使用arguments
  • 必须通过args来使用
  • 和LES一样可变参数必须卸载形参列表的最后
• .scss文件中导入其他的.scss文件
  • 和LESS一样SASS文件中也支持导入其他SASS文件
  • 其实原生的CSS也支持通过@import导入其他的CSS文件,只不过不常用
  • 不常用的原因在于原生的@import导入其他的CSS文件,只有执行到@import时浏览器才会去下载对应css文件,这导致请求次数变多,页面加载起来特别慢
  • LESS和SASS中的@import是直接将导入的文件拷贝到当前文件中生成一份CSS,所以只会请求一次,速度更快

SASS中的内置函数

• 和LESS一样,SASS中也提供了很多内置函数方便我们使用
• 同时支持自定义函数
• 可以在SASS官方文档查看(http://www.sass.hk)

SASS中的层级结构

• 和LESS一样支持嵌套,默认情况下嵌套的结构会转化成后代选择器
• 和LESS一样也支持通过&符号不转换成后代选择器

SASS中的继承

• 和LESS中的继承一样,都是通过并集选择器来实现的,只不过格式不一样
• 混合和继承区别
  • 混合是直接拷贝,有多少个地方用到就会拷贝多少份
  • 继承是通过并集选择器,不会拷贝只会保留一份

SASS中的条件判断

• 和LESS一样SASS中也支持条件判断,只不过SASS中的条件判断支持得更为彻底
• SASS中支持if/else if/else,SASS中当条件不为false或者null时就会执行{}中的代码

SASS中的循环

• SASS中直接支持循环语句,而LESS中需要通过混合+条件判断自己实现
• SASS中支持两种循环,分别是for循环和while循环
  • for循环
  • @for $i form 起始整数 through 结束整数{}
  • @for $i form 起始整数 to 结束整数{}
  • 两者的区别 through包头包尾,to包头不包尾
  • while循环
  • @while(条件语句){}