关于sass:sassscss-对比css的优势

43次阅读

共计 1897 个字符，预计需要花费 5 分钟才能阅读完成。

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;
}

小结：