sass的基本使用
1.嵌套规则
翻译后
2.父选择器 &
翻译后
3.属性嵌套
翻译后
命名空间也可以包含自己的属性值
翻译为
4.注释 /* */ 与 //
//这种注释不会翻译出来
/**/这种注释可以翻译出来
可以设置变量 $qwe:"123"; 用 #{$qwe}输出
不管哪种注释用中文会出错(我的会)
5.运算
数学运算
支持数字的加减乘除、取整等运算 (+, -, *, /, %),如果必要会在不同单位间转换值。
如果需要使用变量,同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中,只需要用 #{} 插值语句将变量包裹
颜色值运算
翻译后
IE 滤镜要求所有的颜色值包含 alpha 层,而且格式必须固定 #AABBCCDD,使用 ie_hex_str 函数可以很容易地将颜色转化为 IE 滤镜要求的格式。
翻译后
字符串运算
+ 可用于连接字符串
如果有引号字符串(位于 + 左侧)连接无引号字符串,运算结果是有引号的,相反,无引号字符串(位于 + 左侧)连接有引号字符串,运算结果则没有引号
运算表达式与其他值连用时,用空格做连接符
在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值
空的值被视作插入了空字符串
圆括号可以用来影响运算的顺序
翻译为
变量定义 !default
在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值,此时,如果变量已经被赋值,不会再被重新赋值,但是如果变量还没有被赋值,则会被赋予新的值
变量是 null 空值时将视为未被 !default 赋值
6.混合器
用@mixin 定义内容 用
@include 调用内容
翻译后
混合器也支持基本语法
翻译后
给混合器传参
混合器可以像方法一样传参 、翻译后
7.使用选择器继承来精简CSS
用 @extend 继承 、、翻译后
大概的基本用法就是这些、了解更多、请查看官网
上一篇下一篇