前端学习笔记-CSS扩展语言(LESS SCSS)
CSS扩展语言
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…匹配参数n){样式1}
- 匹配函数名(匹配参数,匹配参数1…匹配参数n){样式2}
- 调用:匹配函数名(匹配参数,实参1…实参n);//编译完后,合并样式1、样式2
-
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. 运算优先级
- ()
- * / %
- + -
- > < >= <=
嵌套语法
可以在scss中,嵌套地设置样式,更清晰地看出结构,并且由scss自动编译成css,对于父子级较复杂的语法,就不用程序员自己写了
其他语法
- 插值语法:通过#{}插值语句可以在选择器、属性名和属性值中使用变量。#{}可以避免SCSS运行运算表达式,直接编译CSS
- 父选择器:&,类似this指针的用法。可在选择器下直接设置其他样式
- !default:在变量结尾添加!default,若该变量之前被赋值,则取之前赋值的语句,否则取当前语句
- 若变量是null,则被视作未赋值
- !gobal:在局部定义的变量,需要提升作用域时,尾后添加!gobal,可将变量提升为全局作用域
- !optional:将可能出现错误编译的变量加上!optional,可以使得发生错误时,不编译
rules与指令
- @import:引入scss文件或sass文件
- @media:与css用法一致,增加了可嵌套的语法。
- @extend:继承,样式复用。
- 可复用任意元素的选择器
- 多重继承:多个选择器可继承同一个选择器
- 继续延申:一个选择器延申给第二个选择器后,第二个选择器可以继续延申给下一个
- 选择器列,当某个选择器是由多个元素合并时,尽量不使用继承,会出现排列组合的情况,容易产生隐患
- 调试常用指令:@debug,@warn,@error
控制指令
- if(expression,value1,value2):如果expression为true,执行value1,否则执行value2
- @if、@else if:可以执行多个声明
- @for from to/through:to,不包含最后字符,through包含字符
- @while:直到表达式结果为false,退出循环
更多前端学习笔记: gitee仓库.