SASS与SCSS的区别
Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言。Scss 是 Sass 3 引入新的语法，是Sassy CSS的简写，是CSS3语法的超集。
（1）文件扩展名不同。
Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名。
（2）语法书写方式不同。
Sass 是以严格的缩进式语法规则来书写，不带大括号和分号
SASS与LESS的区别
1、概念不同
Sass语法属于缩排语法，⽐css⽐多出好些功能(如变量、嵌套、运算,混⼊(Mixin)、继承、颜⾊处理，函数等)，更容易阅读。
Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加⼊到Sass⾥⾯，因此Sass语法进⾏了改良，Sass 3就
变成了Scss
Less也是⼀种动态样式语⾔. 对CSS赋予了动态语⾔的特性，如变量，继承，运算，函数. Less 既可以在客户端上运⾏ (⽀持IE 6+, Webkit,
Firefox)，也可在服务端运⾏ (借助 Node.js)
2、编译环境不同
Sass是在服务端处理的，以前是Ruby，现在是Dart-Sass或Node-Sass，⽽Less是需要引⼊less.js来处理Less代码输出CSS到浏览器，也可
以在开发服务器将Less语法编译成css⽂件，输出CSS⽂件到⽣产包⽬录。
3、标识符不同
变量符不⼀样，Less是@，⽽Scss是$
4、输出设置
Less没有输出设置，Sass提供4中输出选项，默认为nested
nested：嵌套缩进的css代码
expanded：展开的多⾏css代码
compact：简洁格式的css代码
compressed：压缩后的css代码
5、Sass⽀持条件语句
可以使⽤if{}else{},for{}循环等等。⽽Less不⽀持。
6、引⽤外部CSS⽂件
scss@import引⽤的外部⽂件如果不想编译时多⽣成同名的.css⽂件，命名必须以_开头, ⽂件名如果以下划线_开头的话，Sass会认为该⽂
件是⼀个引⽤⽂件，不会将其编译为同名css⽂件.
Less形如css中的@import
SCSS语法
1、变量 $ 使用
通过变量来复用属性值，比如颜色、边框大小、路径、固定参数等，一概全改
$color-primary: #3ecacb;
$color-success: #4fc48d;2、@import 导入Scss文件
（1）Css中的@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。
（2）Scss中的@import规则，不同的是，scss的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。
3、局部文件命名的使用
scss局部文件的文件名以下划线开头。这样，scss就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。在使用scss时，混合器mixins是最适合的使用场景，因为混合器不需要单独编译输出css文件。
4、Scss的嵌套功能和父选择器标识符
可以使用嵌套功能和选择器标识符来缩减重复的代码
.box {
&__box1 {
margin: 0;
}
&__box2 {
padding-left: 45px;
}
&__box3 {
width: 158px;
}
}5、@mixin 混合器和 @extend 指令的使用
变量使你能够复用属性值，但如果想要复用一大段规则呢？传统的做法是，如果重复就会把公共的规则抽离出来放到新的CSS类中。
在Scss中可以使用混合器@mixin和@extend继承指令来解决以上提到的复用一大段规则的场景。但两者的使用场景又有啥区别呢？
（1）@mixin主要的优势就是它能够接受参数。如果想传递参数，你会很自然地选择@mixin而不是@extend，因为@extend不能够接受参数
（2）因为混合器规则都混入到其他类中，所以在输出的样式表中不能完全避免重复。选择器继承的意思就是让一个选择器能够复用另一个选择器的所有样式，但又不重复输出这些样式属性；
综上所述，如果你需要传参数，只能使用@mixin混合器，否则用@extend继承来实现更优
@mixin用法
@mixin paneactive($image, $level, $vertical) {
background: url($image) no-repeat $level $vertical;
height: 100px;
width: 30px;
position: relative;
top: 50%;
}
&--left-active {
@include paneactive($btn-flip, 0, 0);
}
&--right-active {
@include paneactive($btn-flip, 0, -105px);
}@extend用法
.common-mod {
height: 250px;
width: 50%;
background-color: #fff;
text-align: center;
}
&-mod {
@extend .common-mod;
float: right;
}
&-mod2 {
@extend .common-mod;
}6、@mixin 混合器默认参数值的使用
在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值，如果所需要传的参数是 默认值，则@include时可以省略该参数；如果所需要传的参数不是默认值，则@include时则传入新的参数。
@mixin pane($dir: left) {
width: 35px;
display: block;
float: $dir;
background-color: #f1f1f1;
}
&__paneleft {
@include pane;
}
&__paneright {
@include pane(right);
}7、#{} 插值的使用
通过 #{} 插值语句可以在选择器或属性名中使用变量。当有两个页面的样式类似时，我们会将类似的样式抽取成页面混合器，但两个不同的页面样式的命名名称根据BEM命名规范不能一样，这时我们可使用插值进行动态命名。
@mixin home-content($class) {
.#{$class} {
position: relative;
background-color: #fff;
overflow-x: hidden;
overflow-y: hidden;
&--left {
margin-left: 160px;
}
&--noleft {
margin-left: 0;
}
}
}8、相关scss自带函数的应用
scss自带一些函数，例如hsl、mix函数等。
点击混合颜色
&:focus {
color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);
border-color: transparent;
background-color: transparent;}
&:active {
color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
border-color: transparent; background-color: transparent;
}9、自带函数FOR
@for指令可以在限制的范围内重复输出样式，每次按变量的值对输出结果进行变动
@for $i from 2 through 8 {
.com-hwicon {
> div:nth-child(#{$i}) {
position: relative;
float: right;
}
}
}10、each遍历、map数据类型、@mixin/@include混合器、#{}插值 结合使用
$img-list: (
(accessimg, $papers-access),
(folderimg, $papers-folder),
(bmpimg, $papers-bmp),
(xlsimg, $papers-excel),
(xlsximg, $papers-excel),
(gifimg, $papers-gif),
(jpgimg, $papers-jpg),
(unknownimg, $papers-unknown)
);
@each $label, $value in $img-list {
.com-hwicon__#{$label} {
@include commonImg($value);
}
}11、自带运算
SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)
.ps-input {
display: block;
&__inner {
-webkit-appearance: none;
padding-left: #{$--input-height + 10
};
padding-right: #{$--input-height + 10
};
}
}
Comments | NOTHING