前端学习笔记-CSS扩展语言（LESS SCSS）

LESS

安装

1.Node.js

npm install -g less

lessc styles.less styles.css

2.浏览器环境中引用

<link rel=“stylesheet/less” type=“text/css” href=“styles.less” />

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

变量

• 赋值：@变量名
• 参数：@{变量名}

变量延迟加载，当变量作为赋值参数时，会先解析完作用域中所有变量，然后将该变量赋值给对应的变量。

嵌套规则

• & ，指向父级对象
• 嵌套使用

混合

混合即将一系列属性从一个规则集引入到另一个规则集的方式

1. 普通混合

2. 不常输出的混合

3. 带参数的混合

4. 带参数并且有默认值的混合

5. 带多个参数的混合

6. 命名参数

7. 匹配模式

   • 匹配函数名(@_,匹配参数1…匹配参数n){样式1}
   • 匹配函数名(匹配参数,匹配参数1…匹配参数n){样式2}
   • 调用：匹配函数名(匹配参数，实参1…实参n);//编译完后，合并样式1、样式2

8. arguments变量

运算

• +
• -
• *
• / 需加上（）

继承

可将某一样式设置封装在类里，通过调用该类，进行继承。

变量名:extend(类名 all) 若带all，表示继承该类所有的状态

性能比混合高，但灵活度比混合低，因为不能带参数进行声明

less避免编译

~"(样式计算)"，样式计算交由浏览器进行计算，less不做编译

SCSS

数据类型

SassScript支持7种主要的数据类型

• 数字
• 字符串
• 颜色
• 布尔型
• 空值
• 数组（list）
• maps，相当于JavaScript的Object

对于其他css属性值，如Unicode字符集、或!important声明，将视为无引号字符串进行处理
判断数据类型方式：type-of($value)

运算

1. 数字运算符

op1 + op2

• 纯数字，有单位则带单位
• 纯字符串，引号随op1
• 数字字符串，引号随op1，若op1为无引号数字，引号随op2

op1 - op2

• 纯数字：有单位则带单位，做运算
• 数字字符串: 操作符维持原样，做拼接，不做运算

op1 * op2

• 纯数字：只能其一带单位
• 数字字符串：不能纯字符，必须以数字开头，且只能其一带字符

op1 / op2

• op1 其一带单位或数字后跟字符，则结果随op1.op2只能是不带单位的数字。二者均带单位，则结果不带
• 不会四舍五入，精确到小数点后5位

op1 % op2

• 纯数字：其一有单位则带单位，做运算。若op1是不带单位的数字，则需与%之间空一格
• 数字字符串：不能纯字符，必须以数字开头，且只能其一带字符

2. 关系运算符

• 两端必须为数字
• 返回值为Boolean值

3. 相等运算符

• 返回值为Boolean值
• 数字与带单位的数字 //true
• 字符与但引号的字符 //true

4. 布尔运算符

• and or not
• 值与运算符之间空格分隔

5. 颜色值运算

• 颜色值与颜色值，以红绿蓝分开运算
• 颜色值与数字，每个色值与数字进行运算
• RGB与HSL，必须拥有相同的alpha值才能做运算，否则对alpha不起作用

6. 运算优先级

1. ()
2. * / %
3. + -
4. > < >= <=

嵌套语法

可以在scss中，嵌套地设置样式，更清晰地看出结构，并且由scss自动编译成css，对于父子级较复杂的语法，就不用程序员自己写了

其他语法

1. 插值语法：通过#{}插值语句可以在选择器、属性名和属性值中使用变量。#{}可以避免SCSS运行运算表达式，直接编译CSS
2. 父选择器：&，类似this指针的用法。可在选择器下直接设置其他样式
3. !default：在变量结尾添加!default，若该变量之前被赋值，则取之前赋值的语句，否则取当前语句
   • 若变量是null，则被视作未赋值
4. !gobal：在局部定义的变量，需要提升作用域时，尾后添加!gobal，可将变量提升为全局作用域
5. !optional：将可能出现错误编译的变量加上!optional，可以使得发生错误时，不编译

rules与指令

1. @import：引入scss文件或sass文件
2. @media：与css用法一致，增加了可嵌套的语法。
3. @extend：继承，样式复用。
   1. 可复用任意元素的选择器
   2. 多重继承：多个选择器可继承同一个选择器
   3. 继续延申：一个选择器延申给第二个选择器后，第二个选择器可以继续延申给下一个
   4. 选择器列，当某个选择器是由多个元素合并时，尽量不使用继承，会出现排列组合的情况，容易产生隐患
4. 调试常用指令：@debug，@warn，@error

控制指令

1. if(expression,value1,value2)：如果expression为true，执行value1，否则执行value2
2. @if、@else if：可以执行多个声明
3. @for from to/through：to，不包含最后字符，through包含字符
4. @while：直到表达式结果为false，退出循环

更多前端学习笔记: gitee仓库.