SCSS和Sass有什么区别？

从我一直在阅读的内容来看，Sass是一种使CSS变得更强大的语言，它支持variables和math。

SCSS有什么不同？ 它应该是相同的语言？ 类似？ 不同？

Answer 1

Sass是一个具有语法改进function的CSS预处理器。 高级语法中的样式表由程序处理，并转换为常规的CSS样式表。 但是，它们本身并没有扩展CSS标准。

这样做的主要原因是增加了CSS痛苦地缺乏的function（如variables）。

SCSS和Sass之间的区别， Sass文档页面上的这个文本应该回答这个问题：

有两种语法可用于Sass。 第一个被称为SCSS（Sassy CSS），在整个这个引用中使用，是CSS的语法的扩展。 这意味着每个有效的CSS样式表都是具有相同含义的有效SCSS文件。 这个语法通过下面描述的Sass特性得到了增强。 使用此语法的文件具有.scss扩展名。

第二个和更老的语法 （称为缩进语法（或者有时候就是“Sass”））提供了一个更简洁的编写CSS的方法。 它使用缩进而不是括号来表示select器的嵌套，而使用换行符而不是分号来分隔属性。 使用此语法的文件具有.sass扩展名。

但是，所有这些只能在最终创buildCSS的Sass预编译器中使用。 它不是CSS标准本身的扩展。

Answer 2

我是帮助创buildSass的开发者之一。

不同的是UI。 在文字外观下面，它们是相同的。 这就是为什么sass和scss文件可以导入对方。 实际上，Sass有四个语法分析器：scss，sass，CSS和less。 所有这些将不同的语法转换为抽象语法树 ，通过sass转换工具将其进一步处理成CSS输出或甚至其他格式之一。

使用你最喜欢的语法，两者都得到完全支持，如果你改变了主意，你可以稍后改变它们。

Answer 3

Sass .sass文件在视觉上与.sass文件不同，例如

example.sass

 $color: red =my-border($color) border: 1px solid $color body background: $color +my-border(green) 

example.scss

 $color: red; @mixin my-border($color) { border: 1px solid $color; } body { background: $color; @include my-border(green); } 

任何有效的CSS文档都可以简单地通过将扩展名从.css改为.scss来转换为Sassy CSS（SCSS）。

Answer 4

它的语法是不同的，这是主要的pro（或con，取决于你的观点）。

我会尽量避免重复别人所说的，你可以很容易地用谷歌来说，但是我想用我的经验说两种，有时甚至在同一个项目中。

SASS亲

• 更清洁 – 如果你来自Python，Ruby（甚至可以用象征性的语法来编写道具），甚至是CoffeeScript世界，这对你来说是非常自然的 – 编写mixins，函数和基本任何可重用的东西.sass非常“更容易'和可读性比.scss （主观）。

SASS利弊

• 白色空间敏感（主观），我不介意在其他语言，但在这里在CSS它只是困扰我（问题：复制，标签与太空战等）。
• 没有内联规则（这是对我来说游戏突破），你不能做body color: red就像你可以在.scss body {color: red}
• 导入其他供应商的东西，复制香草CSS片段 – 不是不可能，但一段时间后很无聊。 解决scheme是在您的项目中有.sass文件（与.sass文件一起）或将其转换为.sass 。

除此之外 – 他们做同样的工作。

现在，我想要做的是在.sass和代码中编写mixins和variables，如果可能的话，它们实际上将编译为.sass中的css（即Visual Studio不支持.sass但是每当我使用Rails项目时结合其中两个，而不是在一个文件中）。

最近我正在考虑给Stylus一个机会（对于全职的css预处理器），因为它允许你在一个文件（在一些其他的特性中）结合两个语法。 这对于一个团队来说可能不是一个好的方向，但是当你独自维护它的时候 – 没关系。 当语法有问题时，手写笔实际上是最灵活的。

并.sass mixin为.sass与.sass语法比较：

 // SCSS @mixin cover { $color: red; @for $i from 1 through 5 { &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) } } } .wrapper { @include cover } // SASS =cover $color: red @for $i from 1 through 5 &.bg-cover#{$i} background-color: adjust-hue($color, 15deg * $i) .wrapper +cover 

Answer 5

从语言的主页

Sass有两个语法。 新的主要语法（如Sass 3）被称为“SCSS”（用于“Sassy CSS”） ，并且是CSS3语法的超集。 这意味着每个有效的CSS3样式表也是有效的SCSS。 SCSS文件使用扩展名.scss。

第二个较老的语法被称为缩进语法（或者只是“Sass”）。 受到Haml简洁的启发，它适用于那些喜欢与CSS相似的简洁性的人。 它使用行的缩进来指定块，而不是括号和分号。 虽然不再是主要的语法，但是缩进的语法将继续被支持。 缩进语法中的文件使用扩展名.sass。

SASS是一种解释 CSS的语言。 Sass的结构看起来像CSS（远程），但在我看来，描述有点误导。 它不是 CSS或扩展的替代品。 这是一个最终吐出CSS的解释器，所以Sass仍然具有普通CSS的局限性，但它用简单的代码掩盖了它们。

Answer 6

Sass （ Syntactically Awesome StyleSheets ）有两个语法：

• 一个新的： SCSS （ Sassy CSS ）
• 和一个更古老的原始：缩进语法，这是原来的萨斯 ，也被称为萨斯 。

所以它们都是Sass预处理器的一部分，有两种不同的可能语法。

SCSS和原来的Sass最重要的不同：

SCSS ：

• 它的语法与CSS类似。
• 使用大括号{} 。
• 使用分号码 。
• variablesloginSCSS是$ 。
• SCSS中的分配标志是: 。
• 使用此语法的文件具有.scss扩展名。

原始的Sass ：

• 它的语法与Ruby类似。
• 这里没有使用大括号。
• 没有严格的缩进。
• 没有分号。
• Sass的variables是! 而不是$ 。
• Sass中的作业标志是=而不是: 。
• 使用此语法的文件具有.sass扩展名。

这些是Sass可用的两种语法。

有些人更喜欢Sass ，原来的语法 – 而另一些人喜欢SCSS 。 无论哪种方式，但值得注意的是， Sass的缩进语法并没有被永远弃用 。

转换为sass-convert ：

 # Convert Sass to SCSS $ sass-convert style.sass style.scss # Convert SCSS to Sass $ sass-convert style.scss style.sass 

SASS参考

Answer 7

基本的区别是语法。 虽然SASS语法松散，空格也没有分号，但SCSS更像CSS。

Answer 8

Sass是第一个，语法有点不同。 例如，包含一个mixin：

 Sass: +mixinname() Scss: @include mixinname() 

萨斯忽略大括号和半殖民地，并躺在筑巢，我发现更有用。

Answer 9

原始的sass是ruby语法，类似于ruby，玉石等…

在这些语法中，我们不使用{} ，而是使用空格，也没有使用; …

在scss语法更像CSS ，但获得更多的选项，如：嵌套，声明等，类似于less和其他预处理CSS …

他们基本上是做同样的事情，但是我把每一行的几行看语法的区别，看看{} ， ，和spaces ：

上海社会科学院：

 $width: 100px $color: green div width: $width background-color: $color 

SCSS：

 $width: 100px; $color: green; div { width: $width; background-color: $color; }