1.scss是什么
scss是css的一种预处理语言
scss是一门很好用的类css，在现实中的工作当中几乎都是不采用css的，而是使用类css语言。
例如：scss、less、stylus等，所以学习一门css语言是必须得，由于我用的比较多的就是scss了，所以我在这里就简要介绍一下我理解的scss用法
首先它是一款强化css的辅助工具，在css的基础上怎加了：
-
变量（variables）
-
嵌套（nested nutes）
-
混合（mixin）
-
导入（inline imports）等等一些功能
scss是sass3.0后的一个版本，后缀名为.scss
2.为什么要使用scss
scss的优势也是很多的，主要分为一下几点：
-
scss完全兼容所有版本的css。
-
特性丰富，scss拥有比其他的任何css扩展语言更丰富的功能和特性。
-
行业认可，社区庞大，大多数科技企业和成百上千名开发者为技术提供支持。
-
有无数的框架使用scss，如：bootstrap等。
-
让css更加简洁，适应性更强，阅读性更佳，更易于代码的维护等诸多好处。
3.scss的使用
一、注释分为三种：
/* */css中显示，
//css中不显示，
/*重要注释!*/压缩不会被删掉二、命令导入外部的css，less，scss文件：
@import "../assets/scss/home.scss";三、声明变量：
$+变量名+：+变量值；如下：
$color : red; //声明颜色变量 $color
$width: 100px; //声明宽度变量 $width
$left: left;四、区分默认变量:
默认变量只需要在变量值后加上 !default , 用来设置默认值 ，对默认变量进行重新声明可以实现覆盖默认值；如：
$color : yellow !default; //声明默认变量 $color
$color : purple; //根据需求覆盖默认变量五、区分全局变量和局部变量：
全局变量是元素外声明的变量，局部变量是在元素里声明的变量，重复声明时局部变量会覆盖全局变量；
局部变量值后加上 !global 关键词可以使得局部变量变成全局变量；
$color : red; //声明颜色变量 $color
$width: 100px; //声明宽度变量 $width
$left: left;
.div {
$border-color: rgba(28, 46, 208, 0.8); //局部变量
$bd-color: rgb(223, 15, 195) !global; //加!global变为全局变量
width: $const;
height: $const;
color: $color;
border: 5px solid $border-color;
.spans {
font-size: 30px;
color: $color;
}
}
.div2 {
width: $const;
height: $const;
border: 5px solid $bd-color; //使用加了!global得全局变量
border-#{$left}: 10px solid red; //变量嵌套引用：即字符串插值，需要使用 #{} 来进行包裹
}六、 继承
.class 使用 @extend
.div2 {
width: 100px;
height: 50px;
border: 5px solid #f00;
}
.div3 {
@extend .div2; //继承.div2中得所有样式
}七、占位符 %
使用% 声明的代码块，如果不被@extend调用的话就不会被编译。编译出来的代码会将相同的代码合并在一起，代码变得十分简洁。
%m5 {
background-color: rgb(12, 174, 228);
}
.div3 {
@extend %m5;
}八、混合@mixin
·重复代码块，使用混合@mixin命令定义，以及使用@include调用该mixin
// 在使用@mixin和@include时，传入参数和默认值
@mixin normalStyle ($width , $height , $color , $defaultValue : orange) {
width: $width ;
height: $height ;
color: $color ;
background-color: $defaultValue ;
}
.div4 {
//在此处使用并传参
@include normalStyle (300px, 100px, green, rgb(188, 40, 40));
}九、SCSS使用编程式方法
// ·条件语句
.div4 {
p {
@if 1+1>3 {
border: 1px solid blue;
}
@else {
border: 2px dashed palevioletred;
}
}
}十、SCSS中的三种循环
-
for循环
在sass中的@for循环有两种方式：
① @for $i from <start> through <end>
② @for $i from <start> to <end>
其中$i表示变量，start表示开始值，end表示结束值；
through表示包括end这个数值；to表示不包括end这个数值；
@for $i from 1 to 3 {
.item-#{$i} {
width: 100px;
height: 100px;
border : #{$i}px solid #f00;
}
}
//最终编译为：
.item-1 {
width: 100px;
height: 100px;
border : 1px solid #f00;
}
.item-2 {
width: 100px;
height: 100px;
border : 2px solid #f00;
}
@for $i from 1 through 3 {
.item-#{$i} {
width: 100px;
height: 100px;
border : #{$i}px solid #f00;
}
}
//最终编译为：
.item-1 {
width: 100px;
height: 100px;
border : 1px solid #f00;
}
.item-2 {
width: 100px;
height: 100px;
border : 2px solid #f00;
}
.item-3 {
width: 100px;
height: 100px;
border : 3px solid #f00;
}2.while循环
只要@while后面的条件为true就会执行，直到表达式值为false时停止循环；
$m : 2;
@while $m >0 {
.item-#{$m} {
width: 100px * $m ;
height: 100px;
background-color: aquamarine;
}
$m : $m - 1;
}
//最终编译为：
.item-#2 {
width: 100px * 2 ;
height: 100px;
background-color: aquamarine;
}
.item-#1 {
width: 100px * 1 ;
height: 100px;
background-color: aquamarine;
}3.each 语法
@each $item in item-1,
item-2 {
//$item就是遍历了in关键词后面的类名列
.#{$item} {
background-color: purple;
}
}
//会编译成 .item-1, .item-2 {background-color:purple;}十一、自定义函数及使用
使用@function 自定义函数及使用
@function double($sn ) {
//SCSS允许自定义函数
@return $sn * 2;
}
.function {
width: double(200px); //使用在SCSS中自定义的函数
height: 100px;
border: 1px solid red;
}以上就是本人总结的一些常用的方法功能，有不足之处还请多多指教。
