一、Scss
1.CSS有几个缺点
- 语法不够强大，没有变量和合理的样式复用机制
- 使得逻辑上相关的属性值必须以字面的形式重复输出，难以维护
- 动态的样式语言为css富裕了动态语言的特性
- 极大的提高了样式语言的可维护性
常见的样式语言：
1.scss/sass（scss兼容sass,scss更接近css的语法格式）
2.stylus
3.less
动态语言------css预处理----->*.css
2.什么是SCSS
是一款强化css的辅助工具
在css的语法上，增强了变量、嵌套，混合，导入，函数等高级功能。这些拓展另css更加强大与优雅。
3.scss的作用，有助于更好的管理样式文件，以及更高效的开发项目。
4.scss的使用
1.在服务器端使用
- 安装nodejs解释器
- 安装scss的编译程序
在线安装 npm install -g node-sass
注意：要求node.js版本在8.11以上
2. 把sass包中的4个文件拷贝进node.js文件夹
- 在黑窗口或者ws的控制台(alt+f12)输入
- node-sass-v 检测sass版本
- 如果输入版本，说明sass安装成功
3.编写01.scss文件
- 把.scss转化为.css文件
- 在正确路径下，打开黑窗口，输入
- node-sass scss/01.scss css/01.css
- 如果生成01.css则正确
- 批量把scss转化为css,多文件转换命令
- node-sass scss 文件夹 -o css文件夹
- 单文件监听命令，scss文件一旦保存，自动转换为css文件
- node-sass -w scss/01.scss css/01.css
多文件监听
- node-sass -w scss -o css
二、SCSS的基础语法
1.变量
使用$表示变量
变量的命名规范，遵循css中选择器的命名规范，
可以包含_ -,不能以数字开头，见名知意
- $jd-red:#f10125;颜色变量
- $w:100px;数值变量
- $before-content:"子曾经曰过"字符串变量
- $border-style:solid;样式变量
注意：
- 声明变量时，变量值可以应用其他的变量。
- 变量定义在{}规则外边，整个样式文件中都可以使用，如果定义在{}规则块外边，只能在当前规则块中使用。
- 声明重复变量，后声明的变量会覆盖前面的变量。
- !default规则，如果变量已经声明赋值了，那就用它之前声明的值
样式嵌套规则：
#content{
color:#f00;
div.top{
margin:0 auto;
h1{font-weight:normal}
p{font-size:20px;}
}
}
a{
color:#f00;
&:hover{
color:#00f;
}
}
群组选择器的嵌套
nav,div,footer{
a{
color:#000;
&:hover{color:#f00;}
}
}
属性嵌套
div{
border:{style:solid;width:1px;color:#f00;}
}
2.导入scss文件
在SCSS中，局部文件以下划线开头
这样做，sass在编译时就不会编译以下划线开头的文件，而是把这个文件用作导入。
引入局部文件时，是关键字@import "局部文件名"，局部文件省略了下划线和后缀。
并且一个局部文件可以被多个SCSS文件引用。
3.混合器
把需要在多个样式文件中出现的，相同的部分提取出来，封装到混合器中。
关键字 @mixin 混合器名称{重用的样式}
使用，关键字 @include 混合器名称。就可以在很多的样式中使用封装好的样式了。
带参数的混合器(类似参数的function)
- 定义混合器的时候，在()添加参数
- 调用混合器的时候，在()把参数补上
@mixin lin-colors($normal,$hover,$visited){
color:$normal;
$:hover{color:$hover}
$:visited{color:$visited}
}
ul li a{
@include lin-colors{#f00,#0f0,#00f};
}
#content a{
@include lin-colors{#faa,#afa,#aaf};
}
4.继承
继承就是说一个选择器可以继承另一个选择器定义的所有样式
在css中的表现形式是两个选择器共有的部分，变成了群组选择器
三、运算
1.数字
- 加减乘除，求模取值
- 会在不同单位间转换值
- width:1in+8pt;
- scss不能转换相对单位
- height:1rem+1em;
(1)注意：加法
p::before{
content:"Microsoft"+yahei;
font-family:A+"rial"
}
结果
content:"Microsoftyahei";
font-family:Arial;
+ 可以用于连接字符串
如果用引用去连接无引号的字符串，结果是有引号的
如果用无引号去连接有引号的字符串，结果是无引号的
(2)减法
- 会被优先解析为变量名，所以使用变量和减法，需要-前后添加空格
width:$size - $my-width
(3)除法
在scss中，除号经常起到分隔的用途 /
p{
font:10px/5px;
$width:100px;
width:$width/2;
height:(500px/2);
margin:5px+8px/2px;
}
在以下的情况视为除法运算
- 如果值，或者值的一部分，是变量或者函数的返回值
- 如果值被小括号包裹，视为除法
- 如果值是算术表达式的一部分，视为除法
(4)运算表达式与其他值连用时，用空格做连接
margin:4px + 5px auto;
(5)在有引号的字符串中，使用#{}插值语句可以添加动态的值
content:"I ate #{16+23} baozis"
2.颜色的运算
颜色是分段计算的，红+红 绿+绿 蓝+蓝
rgb(23,32,45)+rgb(11,23,33)
rgba(11,22,33,0.1)+rgba(22,33,44,0.1)
两个rgba相加，alpha的值，必须相等才可以计算，因为算术运算符不会作用到alpha
四、函数
1.scss定义了多种函数，有些函数甚至直接在css中调用
1.颜色函数
- rgba(red,green,blue,alpha)
- hsl(hue,saturation,lightness)
- hue:色调 取值 0~360 3个色段 每120 一个色段
- saturation:饱和度 0.0%~100.0%
- lightness:亮度 0.0%~100.0%
2.数字函数
round($value) 四舍五入
ceil($value)向上取整
floor($value)
max($v1,$v2,.......)
min($v1,$v2,........)
random()
3.字符串函数
unquote($string) 删除字符串引号
quote($string)给字符串添加引号
To-upper-case()
To-lower-case()
2.自定义函数
@function 函数名($n){
函数体;
@return 结果；
}
四.控制指令
@if 1+1=4{border-radius:50%}
@else if(1-1==-1){border-radius:30%}
@else {border-radius:10%}
@if,@else if ,@else
boolean 表达式，可以添加括号，也可以不加
原文地址：https://www.cnblogs.com/sna-ling/p/11621999.html