sass/scss 对比css的优势 sasscss

1：@import的区别
二者的功能都是在css文件中导入其他css样式文件
【sass/scss 对比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 来使用这个混合器。@import 'src/style/mixin'; .button{ @include cl; } //scss最终生成 .button{ display: center; align-items: center; justify-content: center; }

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

小结：