Sass--CSS预处理器
认识sass
- 它是一个css的预处理器, 文件的后缀为
.scss
安装
1 | npm i -g sass |
语法规则
动态变量
1 | // 使用变量,可以在变量中使用变量 |
嵌套
- 使用嵌入式, 使用
&
符号 连接伪元素 - 属性的嵌套, 如果有多个相同前缀的属性, 使用
前缀名:{后缀属性: 属性值}
1 | .nav { |
1 | /* // 属性的嵌套 前缀有-可以使用 前缀名:{} */ |
mixin alert函数
- 可以给alert函数加参数也可以不加, 调用时使用include方法调用alert函数
- 也可以给alert函数参数定义默认值
1 | /* // mixin */ |
继承extend
1 | /* // 继承 */ |
@import方法
- 导入时不需要加入后缀
- 多行注释在不压缩编译后也能显示
1 | @import 'base'; |
data-type
- 使用type-of方法来判断数据类型
- 在终端输入
sass -i
数字函数
abs()
绝对值round()
方法 四舍五入ceil()
方法 向上取整 取大floor()
方法 向下取整 取小min() max()
判断大小
字符串处理方法
to-upper-case()
方法 将字符串全部改为大写to-lower-case()
方法 全部改为小写str-length(变量)
输出字符串的长度str-index(变量, 检测的字符串)
输出当前检测字符串在变量字符串中第一次出现的索引号str-insert(变量, 输入插入的值, 索引位置)
在字符串的指定位置插入值
颜色函数
adjust-hue
对颜色值进行调整, 对hsl颜色进行调整darken
函数可以改变颜色的深度, 更暗lignten
函数更亮, 第一个参数是要转换的值, 第二个参数是改变的程度百分比saturate函
数 颜色的饱和度desaturate
函数 减少颜色的饱和度 对hsl颜色进行处理- opacify函数 设置不透明度
- transparentize函数 设置透明度
列表 List
- length方法, index方法 nth方法 append方法
- join方法组合 使用comma 会使用’, ‘分隔
- map-get()方法获取 列表对应的属性值 map-keys 返回所有的key值, map-value 返回列表中的值, 判断是否存在某个属性, 使用map-has-key方法 map-merge()方法将新创建的属性加入到列表中使用map-remove方法来移除列表中的指定属性
使用interpolation方法
#{}
格式
1 | // 使用变量,可以在变量中使用变量 |
控制指令
- @if
1 | $primary-color:#1269b5; |
- @for, through包括最后一个值; to不包括
1 | $colums:4; |
- @each 遍历数组
1 | $icons: error success info; |
- @while 计算字符要空格
1 | $i:6; |
自定义函数
- 格式
@function(传入的参数){@return 属性值}
如果是对象可以使用map方法获取第一个参数是构造的对象属性, 第二个参数是要调用的对象参数
1 | $color:(light:#fff, dark:#000); |
警告和错误
- @warn和@error 打印输入 在终端输出
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Harry の 心 阁!
评论