@import'src/style/mixin';.button{@includecl;}//scss最终会生成.button{display:center;对齐项目：居中；justify-content:center;}sass和less的区别？首先，它们都是css预处理语言，语法功能比css强大！使用预处理语言时：开发时使用预处理语言，打包启动时使用webpack和loader工具转换成css供浏览器使用。相同点：less和sass都是css预处理器，可以有变量集，操作，继承功能。使用两者可以使代码更易于维护和阅读。区别：编译环境不同。sass的安装需要ruby环境，在服务器上进行处理。变量符号不同。SASS变量符号为$LESS，变量符号为@。变量的范围不同。Sass支持条件语句，您可以使用if{}else{}、for{}循环等。Less不支持。/*Sass“if”语句示例*/@iflightness($color)>30%{}@else{}/*Sass“for”循环示例*/@for$ifrom1to10{.border-#{$i}{border:#{$i}px纯蓝色；}}1：@import的区别两者的作用都是在css文件中导入其他css样式文件CSS：css中的@import是为了开发者将css分解成更小的部分，它的引入会直接发起HTTP请求。SCSS预编译：scss的@import更像是我们使用的import等模块化的东西。它直接将代码包含到目标SCSS文件中，而无需生成额外的http请求。2:使用变量//declare$blue:#3190e8;$highlight-color:#F90;//使用:$nav-color:#F90;nav{$width:100px;宽度：$宽度；color:$nav-color;}//编译后的nav{width:100px;color:#F90;}3:Mixer如果你整个站点有几个相似的小样式（比如一致的颜色和字体），使用变量来统一处理这种情况是一个非常好的选择。但是当你的样式越来越复杂，需要大块的代码来重用样式时，自变量就无法处理这种情况了。您可以通过sass混合器重用大部分样式。混音器是使用@mixin定义的，这是一个为大部分样式命名的标识符。这样你就可以引用这个名字来重用这些样式示例A://mixin.scssfile@mixincl{对齐项目：居中；justify-content:center;}//然后你可以在你的样式表中使用它使用@include来使用这个mixin。@import'src/style/mixin';.button{@includecl;}//scss最终会生成.button{display:center;对齐项目：居中；justify-content:center;}示例B：将参数传递给混合器//字体大小、颜色@mixinsc($size,$color){font-size:$size;颜色：$color;}@mixinwh($width,$height){宽度：$width;高度：$height;}.list{@includesc(0.5rem,#999);@includewh(100px,100px);}示例C:Mixer默认参数@mixinfg($type:span-between){display:flex;justify-content:$type;}4:Inherit@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;边框：无；填充：10px15px；文本对齐：居中；行高：40px；游标：指针；}.button-report{@extend.button-basic;背景色：红色；}.button-submit{@extend.button-basic;背景颜色：蓝色；color:white;}//将上面的代码转换成CSS代码如下：.button-basic,.button-report,.button-submit{border:none;填充：15px30px；文本对齐：居中；字体大小：16px；cursor:pointer;}.button-report{background-color:red;}.button-submit{background-color:blue;color:white;}总结：变量是sass提供的最基本的工具，通过它可以让css值可以重用。相同的基础是嵌套机制，减少重复写相同的选择器，可以让结构更清晰。Sass提供了一个特殊的父选择器标识符&，通过它可以构造更高效的嵌套。这些关系使您的代码保持整洁和可维护。使用场景：
