scss有几大特性

scss有几大特性

html中文网为各位总结了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}.png-600');
　　}
}
@while $j>0 {
　　.a5_img#{$j} {
        background-image: url('images/img#{$j}.png-600');
　　}
　　$j:$j - 1;
}
@each $item in 1,2,3,4,5 {
　　.a5_img#{$item} {
        background-image: url('images/img#{$item}.png-600');
　　}
}

十、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有几大特性的详细内容，更多请关注0133技术站其它相关文章！