scss有几大特性
易知道|edz.cc为各位总结了scss的10个常用特性，希望对各位有帮助！
一、（节点）可嵌套性
这个是基础，用的太多太多了，必须掌握
二、变量
变量以$开头（通常网站会有基础变量，譬如基础字体，基础色调等，可以将他们赋值给一个变量，以后调用变量就好了，很类似js里的变量）
三、 Mixins(混合@mixin)：可重用性高，可以注入任何东西
注意点：
1.可以相互调用，但是不能拿自己调用自己，形成递归
2.通过@include引用
例子：
@mixin banner {
width: 100
position: relative;
color: $deeepBlue;
.banner-content {
position: absolute;
top: 50px;
width: 100
}
}
.lead-banner {
@include banner;
}四、@extend：允许一个选择器继承另一个选择器
例子:
.a1 {
color: blue;
}
.a2 {
@extend .a1;
font-size: 12px;
}五、 @function:函数功能，用户使用@function可以去编写自己的函数（常用）
使用语法： 使用 @function+函数名称，每个函数都需要有返回值的内容
例子:
@function du($r) {
@return $r*2
}
.a8 {
border: solid #{du(2)}px red;
}六、引用父元素&：在编译时，&将被替换成父选择符（常用）
例子:
a {
font-size: 20px;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}编译后:
a {
font-size: 20px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}七、计算功能（会用 但是不多吧）
例子:
p {
margin: 20px + 30px;
width: (100 6)；
}编译后：
p {
margin: 50px;
width: 16.6666666667
}八、组合连接： #{} ： 变量连接字符串（目前用到的是这个）
例子：
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blur;
}被编译为：
p.foo {
border-color: blur;
}九、循环语句：（很少用到）
例子：
@for $i from 1 to 10 {
.a5_img#{$i} {
background-image: url('images/img#{$i}.webp');
}
}
@while $j>0 {
.a5_img#{$j} {
background-image: url('images/img#{$j}.webp');
}
$j:$j - 1;
}
@each $item in 1,2,3,4,5 {
.a5_img#{$item} {
background-image: url('images/img#{$item}.webp');
}
}十、if语句：（很少用到）
例子：
@mixin bgcolor($b) {
@if($b==5) {
background-color: #fff;
} @else if($b == 6) {
background-color: green;
} @else {
background: blue;
}
}总结1： 目前用的最多的或者个人觉得比较重要点，以后可能会用到的大概是这10个吧。
比较nice的。还有一点需要注意，引用sass是使用@import，sass编译有一个特点，就是当一个sass或scss的文件名以下划线_
开头，那么这个文件就不会被编译。一般定义基础样式的时候会选择这个。
总结2： sass与scss的区别：（其实是一种东西）
1. scss是sass3引入的新语法，语法完全兼容css3， 继承了sass的功能
2. scss和sass大部分语法相同，唯一不同的是，scss需要使用分号和花括号，sass是以严格的缩进式语法缩写---换行和缩进
3. 文件扩展名不同
更多CSS相关技术文章，请访问CSS3答疑栏目进行学习！
以上就是scss有几大特性的详细内容，更多请关注易知道|edz.cc其它相关文章！
