Sass和SCSS的区别

Sass 提供了两种不同的语法：

Sass
SCSS

两者相似并且做同样的事情，但以不同的风格编写。 SCSS 是最新的，被认为比 Sass 更好。

SASS 和 SCSS 的区别

Sass：Sass 源自另一个称为 Haml 的预处理器。它是由 Ruby 开发人员设计和编写的，因此 Sass 样式表使用类似 Ruby 的语法，没有大括号、分号和严格的缩进。在 Sass 中，变量符号是 ! 而不是 $ 并且赋值符号是 = 而不是 :。
看这个例子：

// Variable  
!primary-color= hotpink  

// Mixin  
=border-radius(!radius)  
    -webkit-border-radius= !radius  
    -moz-border-radius= !radius  
    border-radius= !radius  

.my-element  
    color= !primary-color  
    width= 100%  
    overflow= hidden  

.my-other-element  
    +border-radius(5px)

SCSS：SCSS 提供了 CSS 友好的语法来缩小 Sass 和 CSS 之间的差距。 SCSS 被称为 Sassy CSS。

看这个例子：

// Variable  
$primary-color: hotpink;  

// Mixin  
@mixin border-radius($radius) {  
    -webkit-border-radius: $radius;  
    -moz-border-radius: $radius;  
    border-radius: $radius;  
}  

.my-element {  
    color: $primary-color;  
    width: 100%;  
    overflow: hidden;  
}  

.my-other-element {  
    @include border-radius(5px);  
}

在这里，可以看到 SCSS 比 Sass 更接近 CSS。

Sass语法的优点：

Sass 的语法与 CSS 完全不同，但它更短且更易于键入。不需要输入分号或大括号，甚至不需要使用@mixin 或@include，只要一个字符就足够了:=和+。

它还提供了干净的编码标准，因为它遵循缩进语法。

SCSS语法的优点：
它完全兼容 CSS。可以将 CSS 文件重命名为 .scss 扩展名，它也可以工作。由于它遵循 CSS 的语法，因此非常容易学习和工作。

欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果。
转载请注明：文章转载自有区别网 [http://www.vsdiffer.com]
本文标题：Sass和SCSS的区别
本文链接：https://www.vsdiffer.com/vs/sass-vs-scss.html
免责声明：以上内容仅是站长个人看法、理解、学习笔记、总结和研究收藏。不保证其正确性，因使用而带来的风险与本站无关！如本网站内容冒犯了您的权益，请联系站长，邮箱：，我们核实并会尽快处理。

Sass和SCSS的区别

SASS 和 SCSS 的区别

随机