SCSS
一,SCSS的安装
1,找到node文件并进入
2,输入下载命令即可 外网慢的话可以用镜像下载
3,验证是否安装成功
注意:如果安装失败可能是node的原因重新下载安装node即可
二,SCSS详细介绍
1,scss文件转为css文件
scss文件编写于后台，浏览器不能直接解析scss文件
我们需要提前把scss文件转换成对应的css文件，传递给浏览器
①单文件转换命令
node-sass scss文件 css文件
node-sass scss/01.scss css/01.css
②多文件转换
node-sass scss文件夹 -o css文件夹
③单文件监听----编写完scss后保存时同时转为对应.css文件到css文件中(前提是要已经转换了)
node-sass -w scss文件 css文件
④多文件监听 返回scss文件目录
2,scss语法
①变量
|
变量的声明，必须使用$开头，使用：赋值 变量可以使用数字，单词，- _ 。 不要用关键字，见名知意 如:$text-red:red; 调用变量： color:$text-red 可以保存为变量的值 1.颜色值 2.数值(注意单位) 3.字符串，带不带双引号都可以 4.属性的值 5.其它变量 注意：变量有作用域的问题:代码由上往下变量提前声明才能用 |
scss代码:
1 //变量 2 $text-red:#f00; 3 $my_size:100px;//单位必须 4 $my_content:'do you beleve light!'; 5 $my_style:solid; 6 7 $my_border:$my_size $my_style $text-red; //变量中可以保存其他变量 8 9 //变量有作用域问题 10 #d4{ 11 font-size: $my_size; 12 } 13 #d1{ 14 $bianliang:red; //这个变量只能在这里被调用 15 border:1px $my_style #FFF3CD ; //引用写中间 16 content: $my_content; 17 background-color: $text-red; 18 } 19 #d2{color: red; 20 border: $my_border; 21 } 22 23 #d3{ 24 border: 1px solid red; 25 }
转为的css代码:
1 #d4 { 2 font-size: 100px; } 3 4 #d1 { 5 border: 1px solid #FFF3CD; 6 content: "do you beleve light!"; 7 background-color: #f00; } 8 9 #d2 { 10 color: red; 11 border: 100px solid #f00; } 12 13 #d3 { 14 border: 1px solid red; }
②嵌套
I.选择器结构嵌套
可以在选择器内部直接编写其它选择器，生成后代选择器的关系
II.伪类选择器的嵌套
必须在伪类之前添加占位符&，不然会生成空格
scss代码:
1 a{ 2 color: red; 3 &:hover{color: yellow;} // (嵌套了悬浮时的样式)&代替a 取消空格 4 } 5 6 a{ 7 color: red; 8 :hover{ //这样写会报错 9 color: blueviolet; 10 } 11 } 12 13 14 15 #content{ 16 color: red; 17 div{ //同时设置id下的div的样式 18 color:burlywood; 19 p{ //在id下的div下的p标签的样式 20 font-size: 32px; 21 } 22 } 23 h3{ //设置与div同级的h3样式 24 color: red; 25 span{ //设置h3下的span样式 26 background-color: #FF00FF; 27 } 28 } 29 }
转为的css代码:
1 a { 2 color: red; } 3 a:hover { 4 color: yellow; } 5 6 a { 7 color: red; } 8 a :hover { /*会无法识别*/ 9 color: blueviolet; } 10 11 #content { 12 color: red; } 13 #content div { 14 color: burlywood; } 15 #content div p { 16 font-size: 32px; } 17 #content h3 { 18 color: red; } 19 #content h3 span { 20 background-color: #FF00FF; }
③导入 将多个scss导入到一个css中
注意:以下划线开头命名的scss文件，称为局部scss文件，这种文件不会被自动转换为对应css文件
局部scss文件，被导入时，文件名可以简写为_tian.scss
语法@import "tian"; "tain"为文件名 在一个scss中可以导入多个文件 多@import几次即可 然后保存后即可转到一个css中去
scss代码:
1 @import 'ceshi.scss'; //导入同目录下其他scss文件 2 @import 'blogs'; //下划线开头的文件可以直接简写
④混合器
把多个选择器，封装进一个混合器
在需要的地方直接调用这个混合
定义混合器
@mixin 名称(参数1，参数2....){
样式申明
}
调用混合器
@include 名称(参数);
scss代码:
1 //混合器 2 @mixin my_bglinner{ //定义混合器@mixi 自定义名字{样式} 3 background: -moz-linear-gradient(top,#000,#ff0); 4 background: -o-linear-gradient(top,#000,#ff0); 5 background: -ms-linear-gradient(top,#000,#ff0); 6 background: -webkit-linear-gradient(top,#000,#ff0); 7 } 8 9 10 @mixin my_color{ 11 color: red; 12 background-color: red; 13 border-color: red; 14 } 15 16 //调用 混合器 17 18 div{ 19 @include my_bglinner 20 @include my_color; 21 } 22 23 .coolorr{ 24 width: 200px; 25 height: 200px; 26 @include my_color; 27 }
转为的css代码:
1 div { 2 background: -moz-linear-gradient(top, #000, #ff0); 3 background: -o-linear-gradient(top, #000, #ff0); 4 background: -ms-linear-gradient(top, #000, #ff0); 5 background: -webkit-linear-gradient(top, #000, #ff0); 6 color: red; 7 background-color: red; 8 border-color: red; } 9 10 .coolorr { 11 width: 200px; 12 height: 200px; 13 color: red; 14 background-color: red; 15 border-color: red; }
带参数的混合器
@mixin bg_color1($dir,$c1,$c2) {
background: -webkit-linear-gradient($dir,$c1,$c2);
background: -o-linear-gradient($dir,$c1,$c2);
background: -moz-linear-gradient($dir,$c1,$c2);
background: -ms-linear-gradient($dir,$c1,$c2);
}
p{
@include bg_color1(right,#f00,#00f);
}
scss代码:
1 //带参数的混合器 2 //形参数前带$ 3 @mixin my_bglinner2($dir,$color1,$color2){ 4 background: -moz-linear-gradient($dir,$color1,$color2); 5 background: -ms-linear-gradient($dir,$color1,$color2); 6 background: -o-linear-gradient($dir,$color1,$color2); 7 background: -webkit-linear-gradient($dir,$color1,$color2); 8 } 9 10 p{ 11 @include my_bglinner2(top,#111,#ff0); //调用时填入参数 参数可以是其他定义的变量 12 } 13 div{ 14 @include my_bglinner2(right,#333,#FF00FF); 15 }
对应的css代码为
p { background: -moz-linear-gradient(top, #111, #ff0); background: -ms-linear-gradient(top, #111, #ff0); background: -o-linear-gradient(top, #111, #ff0); background: -webkit-linear-gradient(top, #111, #ff0); } div { background: -moz-linear-gradient(right, #333, #FF00FF); background: -ms-linear-gradient(right, #333, #FF00FF); background: -o-linear-gradient(right, #333, #FF00FF); background: -webkit-linear-gradient(right, #333, #FF00FF); }
⑤继承
一个选择器可以继承另一个选择器的所有样式
@extend 选择器;
效果是生成群组选择器
scss代码:
1 //继承 2 #s1{ 3 border: 0; 4 outline: 0; 5 } 6 #s2{ 7 width: 200px; 8 height: 200px; 9 @extend #s1;//继承s1 生成群组选择器 同时将s1的样式加到s2上; 10 }
对应的css代码为
1 #s1, #s2 { 2 border: 0; 3 outline: 0; } 4 5 #s2 { 6 width: 200px; 7 height: 200px; }
3,scss中的运算 + - * / % (这里仅介绍+ - / 其他与正常js中无差别)
①加法
字符串的拼接
有双引号+无双引号，结果有双引号
无双引号+有双引号，结果没有双引号
scss代码:
1 //加法 2 3 #d1{ 4 content:'欢迎来到我的'+博客园; 5 content:欢迎来到+'这里'; 6 //先入为主 先有引号生成的有引号 先没有引号加后没有引号 7 }
转换后的css
1 #d1 { 2 content: "欢迎来到我的博客园"; 3 content: 欢迎来到这里; }
②减法
-号有可能会被解析成变量名的一部分
所以在减号前后添加空格
scss代码:
1 //减法 2 $s_width:100px; 3 #s3{ 4 //width: $s_width-50px; 这种写法会报错 会认为后面是个整体的变量 5 width:$s_width - 50px; //解决办法加空格分开写即可(或加括号) 6 }
转换后的css
1 #s3 { 2 width: 50px; }
③除法
/ 除法符号， 亦可能被识别为 分隔符
在以下情况会被认为是除法
1.表达式中有变量
2.用括号包裹的表达式
3.除法运算式是其它运算式的一部分
除法一定要注意单位问题
scss代码:
1 //除法 2 div{ 3 width: 10px/5px;//分割符 4 $my_widht:1000px; 5 height: $my_widht/2; 6 height: $my_widht/2px;//px会被约掉 7 margin: (10px/2); 8 margin: (10px/2px);//px会被约掉 9 padding: 5px+8px/2; 10 padding: 5px+8px/2px; 11 }
转换后的css
1 div { 2 width: 10px/5px; 3 height: 500px; 4 height: 500; 5 margin: 5px; 6 margin: 5; 7 padding: 9px; 8 padding: 9px; }
④scss中的插值运算
js在模板字符串中使用的是${}做插值
scss在所有字符串中使用#{}做插值
scss代码:
1 //插值运算 2 3 div{ 4 content: 'jin tian shi #{2000+21} nian'; 5 } 6 //用#{}做插值
转换后的css:
1 div { 2 content: "jin tian shi 2021 nian"; }
⑤颜色的运算
分段运算 r+r g+g b+b
如果结果超过ff 或者255.就取ff、255
特殊rgba的计算，运算式的透明度必须相同，才能运算
scss代码:
1 //颜色的运算 2 div{ 3 color: #112233+#334455; 4 background-color: #776655+#445566; 5 border-color: #fffaaa+#222222; 6 //分段运算 r+r g+g b+b 超过ff或者255就取ff或者255 7 background-color: rgba(1,2,3,0.5)+rgba(33,55,44,0.5); 8 //透明度必须相同才能运算否则会报错 9 }
转换后的css:
1 div { 2 color: #446688; 3 background-color: #bbbbbb; 4 border-color: #ffffcc; 5 background-color: rgba(34, 57, 47, 0.5); }
4.函数
①预定义函数
|
round() 四舍五入 ceil() 向上取整 floor() 向下取整 min() 取最小值 max() 取最大值 random() 随机数 unquote() 去除双引号 quote() 添加双引号 |
scss代码
1 div{ 2 width: round(3.4)px; //四舍五入 3 height: ceil(4.1)px; //向上取整 4 margin: floor($number: 3.7)px; //向下取整 5 line-height: round($number: 2px);//单位写在括号内也可 6 padding: min(1,55,33,456,789)px;//取最小值 max()最大值 7 font-size: random($limit: 8);//取随机数 8 font-family: unquote($string: "mv boli");//去除双引号 9 content:quote($string: aced) ;//添加双引号 10 }
对应的css代码
1 div { 2 width: 3 px; 3 height: 5 px; 4 margin: 3 px; 5 line-height: 2px; 6 padding: 1 px; 7 font-size: 2; 8 font-family: mv boli; 9 content: "aced"; }
②自定义函数
关键字添加@,参数变量添加$,格式和语法与js相同
@function add($a,$b){
@return $a+$b;
}
scss代码
1 @function add($a,$b){ //关键字前加@ 参数变量前加$ 与js语法相同 2 @return ($a+$b) 3 } 4 div{ 5 width:add(24,50)px; 6 }
对应的css代码
1 div { 2 width: 74 px; }
5.指令（if-else）
@if @else @else if
条件的变量，要添加$
scss代码
1 $scode:98; 2 div{ 3 @if $scode>90{ //关键字前加@ 参数变量前加$ 与js语法相同 4 content: '牛逼'; 5 }@else if $scode>80{ 6 content: '还行'; 7 }@else if $scode>70{ 8 content: '一般'; 9 }@else if $scode>60{ 10 content: '将就'; 11 }@else{ 12 content: 'you are lower'; 13 } 14 }
对应的css代码
1 div { 2 content: '牛逼'; }
6.scss中的循环
scss代码
1 //for---- to 2 @for $j from 1 to 4{ //to后的值不包含 3 .top_font_size-#{$j}{font-size: 20px*$j;} 4 } 5 6 7 8 //for 循环 9 10 @for $i from 1 through 3{ //$i代表第几次循环 through后的值是大于后循环结束 11 .top_widht-#{$i}{width: 20px * $i;} 12 }
对应的css代码
1 .top_font_size-1 { 2 font-size: 20px; } 3 4 .top_font_size-2 { 5 font-size: 40px; } 6 7 .top_font_size-3 { 8 font-size: 60px; } 9 10 .top_widht-1 { 11 width: 20px; } 12 13 .top_widht-2 { 14 width: 40px; } 15 16 .top_widht-3 { 17 width: 60px; }
while 循环与之类似 便不赘述了.
浙公网安备 33010602011771号