用了很久的 css 预处理工具,但是没有专门进行整理和记录,总感觉知识图谱差点什么。
话不多说,今天就整理一下最开始被广泛使用的 scss,下面我们开始吧。
为什么会有预处理工具?
1.CSS有以下的几个缺点
语法不够强大
没有变量和合理的复用机制
使用逻辑上相关的属性值必须重复编写,导致难以维护
CSS的预处理器,就是用一种专门的编程语言,进行web页面样式的设计,再通过编译器转化为正常的css文件,以供项目使用
动态样式语言为css赋予了动态语言的特性,极大的提高了样式语言的可维护性
常用的动态样式语言:css的预处理器(scss/sass、less、stylus)
scss是一款强化css的辅助工具,他在css语法的基础上增加了变量,嵌套,混合,导入,函数等高级功能,这些拓展相对于css更强大与优雅。
scss的作用:有助于更好的管理样式文件,以及更高效的开发项目。
使用scss
在服务器端使用
(1)安装NodeJS解释器
(2)安装scss编译程序
在命令行界面输入:npm install -g node-sass
检查scss程序能否正常使用:node-sass -v
如果能查看到版本号,说明sass程序可用
(3)编译scss文件
1.创建一个scss文件,编写动态样式代码
2.通过以下命令行来完成编译
单文件的转换命令:node-sass scss/input.scss css/output.css
多文件的转换命令:node-sass scss文件夹名称 -o css文件夹名称
单文件监听命令:node-sass -w scss/input.scss css/output.css
多文件监听命令:node-sass -w scss文件夹名称 -o css文件夹名称
scss的基础语法
- 1.变量
使用$符号标识变量。
变量命名规范遵循css中选择器的命令规范,不能以数字开头,不能包含特殊字符(可以包含_,-),尽量见名知意。1
2
3
4
5$jd_red:#f10215; //颜色变量
$normal_width:100px; //数值变量
$before_content:"子曰:"; //字符串变量
$border_style:solid; //样式变量
$my_border:1px $border_style $jd_red; //声明变量时,变量的值也可以是其它变量。
1 | div{ |
注意:
(1)声明变量时变量值可以引用其它变量。
(2)变量定义在{}规则块外,整个样式表中都可以引用,定义在{}规则内,它只能在规则块中使用。
(3)声明重复变量,只有最后一处有效,且他会覆盖前面的值,尽量不要重复。
(4)!default规则,如果变量已经声明赋值了,那就用他声明的值,否则就用当前这个默认值。
- 2.嵌套规则
(1)在选择器中嵌套选择器将上面的css代码改成scss格式:1
2
3#main div.top h1{color:red;}
#main div.top p{margin:10px;}
#main div.middle{background:gray;}1
2
3
4
5
6
7#main{
div.top{
h1{color:red;}
p{margin:10px;}
}
div.middle{background:gray;}
}改写scss方式:1
2div a{color:red;}
div a:hover{color:blue;}
在嵌套规则中,有时候需要使用嵌套外层的父选择器,可用&代表嵌套规则外层的父选择器。
不添加&,标签和:之间会一个空格,导致浏览器不读取这个伪类(2)群组选择器嵌套1
2
3
4
5div{
a{color:red;
&:hover{color:blue;}
}
}
css的写法用scss方式写:1
2
3nav a,header a,section a{
color:blue;
}1
2
3
4
5nav,header,section{
a {
color:blue;
}
}
(3)属性嵌套
在scss中除了选择器,属性也可以嵌套
1 | div{ |
用scss的方式写:
1 | div{ |
3.导入文件
在scss中,局部文件名以_开头。
在scss编译时就不会编译这些以_开头的文件,而只是把这些文件用作导入,引入局部文件时可以不写文件的全名,即省略下划线,并且局部文件的后缀也可以不写。
同一个局部文件可以在不同的主文件中引用。
引入局部文件需用@import
定义了一个局部文件
_myColors.scss
引入该文件:@import "myColors"
4.混合器——需要复用的样式封装
1.普通混合器
使用 @minix
标识符定义。
语法: @minix 混合器名称{样式声明}
通过 @include
来使用混合器
语法:选择器{ @include 混合器名称}
1 | @mixin my_box_shadow { |
2.带参混合器
1 | @mixin 混合器名称(参数1,参数2,...){ |
使用带参混合器选择器{ @include 混合器名称(实参1,实参2,...)}
- 5.继承
通过@extend
实现继承
继承是说一个选择器可以继承另一个选择器定义的所有样式。1
2
3
4
5
6
7
8
9.round{
border:1px solid red;
border-radius:8px;
}
.round-shadow{
@extend .round;
box-shadow:0 0 5px 1px;
}
scss运算
- 1.数字:加减乘除,取整等运算(+,-,*,/,%),如果必要会在不同单位间转换值(前提是scss能转)
1
2
3$my_width:5%;
$my_max_width:$my_width*4;
$other_size:$my_width+$my_max_width;
(1)注意加法
+也可以用于连接字符串
1 | p:before{ |
如果用有引号的字符串去连接无引号的字符串,运算结果是由引号的,相反,无引号的字符串去连接有引号的字符串,运算结果则没有引号。—–(有没有双引号,以前面的为准)
(2)除法运算
1 | div{ |
在css中通常起到分隔数字的用途,同时也赋予除法的功能。
以下情况/被视为除法运算:
1.如果值,或值的一部分,是变量或者是函数的返回值。
2.如果值被圆括号包裹时
3.如果值是算术运算的一部分
(3)运算表达式与其他连用是,用空格做连接符
1 | p{ |
(4)在有引号的文本字符串中使用#{}插值语句可以添加动态的值。(有点借鉴模板字符串)
1 | p:before{ |
- 2.颜色:颜色值的运算是分段计算的,也就是分别计算红色,绿色,以及蓝色的值。计算:01+04=05 02+05=07 03+06=09
1
p{color:#010203+#040506};
结果:color:#050709;
值包含alpha(透明度),必须有相等alpha值才能进行运算,因为算术运算不会作用于alpha。1
rgba(125,25,10,.5)+rgba(245,65,90,.5)
scss函数
scss定义了多种函数,有些甚至可以通过普通的css语句调用。
ex:rgba(10,30,40,.7);在普通的css中也可以使用
1.颜色
rgba();
hsl(hue,saturation,lightness);
hue:色调,取值0-360,0-120红色,120-240绿色,240-360蓝色。
saturation:饱和度,取值为0%-100%
lightness:亮度,取值0%-100%
2.数字函数
round(value) 将数值进行四舍五入,转换成最接近的整数。
ceil(value) 向上取整
floor(value) 向下取整
min(num1,num2…)找出数值之间的最小值
max(num1,num2…)找最大值
random() 获取随机数
3.字符串函数
unquote(string) 删除字符串的引号
quote(string) 添加字符串的引号
to_upper_case(string) 将字符串小写字母转换为大写字母
to_lower_case(string) 将字符串大写字母转换为小写字母
4.自定义函数
scss支持自定义函数使用关键词 @function定义,并能在任何属性或scss中使用,需要调用 @return输出结果。
语法:
1 | @function 函数名($n){ |
5.控制指令
1.当 @if 的表达式返回值不是false或null时,表示条件成立,执行{}内的代码。
1 | p{ |
2.@if 声明后面可以跟多个 @else if 声明,或者一个 @else声明。
$type:abc;
nav{
@if $type==sun{
color:yellow;
} @else if $type==mars{
color:red;
} @else if $type==moon{
color:blue;
} @else{
color:black;
}
}
- 本文作者: Jambo
- 版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!