CSS预处理语言

scss 和 sass 区别

::: tip

Sass (Syntactically Awesome StyleSheets)，是由buby语言编写的一款css预处理语言，和html一样有严格的缩进风格，和css编写规范有着很大的出入，是不使用花括号和分号的，所以不被广为接受。 Sass 是一款强化 CSS 的辅助工具，是对 CSS 的扩展，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承(extend)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目，其后缀是.sass。

Sass允许嵌套css选择器，嵌套方式与 HTML 的视觉层次结构相同。请注意，过度嵌套的规则将导致过度限定的 CSS，这些 CSS 可能很难维护，并且通常被认为是不好的做法。

SCSS (Sassy CSS)，一款css预处理语言，SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。SCSS 需要使用分号和花括号而不是换行和缩进。SCSS 对空白符号不敏感，其实就和css3语法一样，其后缀名是分别为 .scss。
:::

sass和scss的关系
sass和scss其实是一样的css预处理语言，SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.scss两种。
SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。
两者是有不同的，继sass之后scss的编写规范基本和css一致，sass时代是有严格的缩进规范并且没有‘{}’和‘；’。
而scss则和css的规范是一致的。

异同：简言之可以理解scss是sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能力。语法形式上有些许不同，最主要的就是sass是靠缩进表示嵌套关系，scss是花括号

LESS 和 SCSS 的区别

相同点：

LESS和SCSS都是css的预处理器，可以拥有变量，运算，继承，嵌套的功能，使用两者可以使代码更加的便于阅读和维护。
都可以通过自带的插件，转成相对应的css文件。
都可以参数混入，可以传递参数的class，就像函数一样
嵌套的规则相同，都是class嵌套class

不同点：

声明和使用变量

LESS用@符号，SCSS用$符号表示

@link-color:#632bca
$to-color:#632bca
.main{
    color:@link-color   //#632bca颜色LESS
    background-color:$to-color  //#632bca颜色SCSS
}

变量插值

LESS采用@{XXXX}的形式，SCSS采用${XXXX}的形式

作用：可以用为LESS和SCSS声明变量，变量作为css的选择器

示范：

LESS:

@main-top : search;
.@{ main-top } {
    font-size ： 24px；
    color : #fff;
}
// 是用LESS，定义类，类选择器选中search标签，给其设置css样式

SCSS:

$main-top : search;
.@{ main-top } {
    font-size ： 24px；
    color : #fff;
}
// 是用scss，定义类，类选择器选中search标签，给其设置css样式

SCSS支持条件语句，LESS不支持

SCSS可以使用if{}else，for循环等等，LESS不支持

/* Sample Sass “if” statement */

@if lightness($color) > 30% {

} @else {

}

/* Sample Sass “for” loop */

@for $i from 1 to 10 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }

应用外部css文件方式不同

SCSS应用的css文件名必须以‘_’开头（下划线），文件名如果以下划线开头的话，sass会认为改文件是一个应用文件，不会将它转成css文件

// 源代码：
@import "_main.css";
@import "_layout.css";
@import "_text.css";

颜色函数
调整色相的话，LESS使用spin（）的函数；SCSS使用名为adjust_hue()的函数

示范：

LESS:

@state-success-border: darken(spin(@state-success-bg, -10), 5%);

SCSS:

$state-success-border: darken(adjust_hue($state-success-bg, -10), 5%);

引用父选择器&符号的使用
LESS和SCSS都可以使用&符号表示父选择器，但是SCSS的&符号只能出现在一个组合选择器的开始位置，LESS则没有这个限制

示范：
LESS:

.bg-variant(@color) {
  background-color: @color;
  a&:hover,
  a&:focus {
    background-color: darken(@color, 10%);
  }
}

SCSS:

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

总结：

SCSS和LESS都是一种基于css之上的高级语言，两者之间各有优点，sass在功能上面比LESS更强大，LESS比较的清晰明了，容易上手，主要是看大家的工作中，更倾向于使用那个进行开发，两者都能够大大提高书写代码的效率