sass/scss 对比css的优势

Posted 2021-09-06 _Junjun

1：@import的区别

二者的功能都是在css文件中 导入其他css样式文件

CSS： css中的@import是为了开发者能将css分解成更小的部分，它的引入会直接发起一个HTTP的请求。
SCSS预编译： scss的@import则更加像我们使用的import等模块化的东西，它是直接将代码包含进目标SCSS文件，而不会产生额外的http请求。

2：使用变量

// 声明
$blue: #3190e8; 
$highlight-color: #F90;

// 使用：
$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

// 编译后
nav {
  width: 100px;
  color: #F90;
}

3: 混合器

如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体），那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。

混合器使用@mixin定义，这个标识符给 一大段样式赋予一个名字。这样你就可以引用这个名字 重用这些样式
例子A:

// mixin.scss文件
@mixin cl {
     display: center;
     align-items: center;
     justify-content: center;
}

// 然后就可以在你的样式表用@include 来使用这个混合器。
<style lang="scss" scoped>
@import \'src/style/mixin\';
 .button{
     @include cl;
 }
 
 //scss最终生成
 .button{
      display: center;
      align-items: center;
      justify-content: center;
}
</style>

例子B: 给混合器传参数

// 字体大小，颜色
@mixin sc($size, $color){
    font-size: $size;
    color: $color;
}
@mixin wh($width, $height){
    width: $width;
    height: $height;
}


.list{
     @include sc(0.5rem, #999);
     @include wh(100px, 100px);
}    

例子C： 混合器默认参数

@mixin fg ($type: spance-between){
     display: flex;
     justify-content: $type;
}     

4： 继承@extend
@extend指令告诉sass一个选择器的样式从另一个选择器继承。
使用场景：
我们创建了一个基本的按钮样式 button-basic， 接着我们定义了两个按钮 button-report和 button-submit，他们都继承了button-basic, 他们主要的区别是 背景颜色和字体颜色，其他样式都是一样的。
使用了@extend后 我们在html标签中就不需要 class=".button-basic .button-submit"，只需要设置class=".button-submit"类 就可以了
@extend很好的体现了代码的复用

.button-basic{
    font-size: 16px;
    border: none;
    padding: 10px 15px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
 }
 
.button-report{
    @extend .button-basic;
    background-color: red;
}
.button-submit{
    @extend .button-basic;
    background-color: blue;
    color: white;
} 
 
// 将以上代码转换为 CSS 代码，如下所示：
.button-basic, .button-report, .button-submit {
    border: none;
    padding: 15px 30px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
} 
.button-report  {
    background-color: red;
}

.button-submit  {
    background-color: blue;
    color: white;
} 

小结：

1. 变量是sass提供的最基本的工具，通过变量可以让css值变得可重用。
2. 同样基础的是嵌套机制，减少重复编写同样的选择器，可以让结构更加清晰。
3. sass提供了特殊的父选择器标识符&，通过他可以构造出更高效的嵌套。
4. 通过这些关系可以保持你的代码整洁性和 可维护性。