提问



从我读过的内容来看,Sass是一种语言,它通过变量和数学支持使CSS变得更强大。


与SCSS有什么不同?它应该是同一种语言吗?相似?不同?

最佳参考


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


其主要原因是增加了CSS痛苦缺乏的功能(如变量)。


SCSS和Sass之间的区别,Sass文档页面上的这个文本应该回答这个问题:[50]



  Sass有两种语法可供使用。第一个,称为SCSS(Sassy CSS),在整个引用中使用,是CSS语法的扩展。这意味着每个有效的CSS样式表都是具有相同含义的有效SCSS文件。使用下面描述的Sass功能增强了此语法。使用此语法的文件具有 .scss 扩展名。

  
  第二个和较旧的语法,称为缩进语法(有时只是Sass),提供了一种更简洁的CSS编写方式。它使用缩进而不是括号来指示选择器的嵌套,而使用换行符而不是分号来分隔属性。使用此语法的文件具有 .sass 扩展名。



但是,所有这些只适用于最终创建CSS的Sass预编译器。它不是CSS标准本身的扩展。

其它参考1


我是帮助创建Sass的开发人员之一。


不同之处在于UI。在文字外部下方,它们是相同的。这就是为什么sass和scss文件可以互相导入的原因。实际上,Sass有四种语法分析器:scss,sass,CSS等等。所有这些都将不同的语法转换为抽象语法树,它通过sass-convert工具进一步处理成CSS输出甚至是其他格式之一。[51]


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

其它参考2


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


Example.sass - sass是较旧的语法



$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)


Example.scss - sassy css是Sass 3

的新语法

$color: red;

@mixin my-border($color) {
  border: 1px solid $color;
}

body {
  background: $color;
  @include my-border(green);
}


只需将扩展名从.css更改为.scss,即可将任何有效的CSS文档转换为Sassy CSS(SCSS)。

其它参考3


它的语法不同,这是主要的专业(或者con,取决于你的观点)。


我会尽量不重复其他人所说的内容,你可以轻松地谷歌,但相反,我想从我使用两者的经验中说几件事,有时甚至在同一个项目中。


SASS专业



  • 清除 - 如果你来自Python,Ruby(你甚至可以用类似符号的语法编写道具)甚至是CoffeeScript世界,它对你来说都很自然 - 编写mixins,函数和一般任何可重用的东西[[.sass.scss(主观)更容易和可读。



SASS缺点



  • 空白敏感(主观),我不介意用其他语言,但在CSS中它只是困扰我(问题:复制,制表符对太空战争等)。

  • 没有内联规则(这对我来说是游戏中断),你不能像[[sc]] body {color: red}
  • 一样body color: red
  • 导入其他供应商的东西,复制vanilla CSS片段 - 一段时间后不是不可能但很无聊。解决方案是在项目中包含.scss个文件(以及.sass个文件)或将它们转换为.sass



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


现在,我喜欢做的是在.sass中编写mixins和变量,以及在.scss中实际编译为CSS的代码(如果可能的话)(即Visual Studio不支持.sass但每当我在Rails项目上工作时,我通常会将它们中的两个组合在一起,而不是在一个文件中。


最近,我考虑给 Stylus 一个机会(对于全时CSS预处理器),因为它允许你将两个语法组合在一个文件中(在其他一些特性中)。这可能不是一个好的一个团队的方向,但当你单独维护它时 - 没关系。当语法有问题时,手写笔实际上最灵活。


最后用.scss.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

其它参考4


来自语言的主页[52]



  Sass有两种语法。 新主力
  语法(从Sass 3开始)被称为
  SCSS(用于Sassy CSS)
,是一个
  CSS3语法的超集。意即
  每个有效的CSS3样式表都是
  有效的SCSS也是如此。 SCSS文件使用
  扩展名.scss。

  
  第二个较旧的语法称为
  缩进语法(或只是Sass)。

  受到Haml的简洁启发,它就是
  适合喜欢的人
  与CSS相似的简洁性。
  它代替括号和分号
  使用行的缩进
  指定块。虽然不再了
  主要语法,缩进语法
  将继续得到支持。档
  在缩进语法中使用
  扩展名.sass。



SASS是一种解释语言,可以吐出CSS。 Sass 的结构看起来像CSS(远程),但在我看来,描述有点误导;它的不是替代CSS或扩展。它是一个最终吐出CSS的解释器,所以Sass仍然有普通CSS的限制,但它用简单的代码掩盖它们。

其它参考5


Sass ( Syntactically Awesome StyleSheets )有两种语法:



  • 较新的: SCSS ( Sassy CSS )

  • 和较旧的原始:缩进语法,它是原始的 Sass ,也称为 Sass 。



因此它们都是 Sass 预处理器的一部分,具有两种不同的可能语法。


SCSS 与原始 Sass 之间最重要的区别:


SCSS :



  • 它的语法类似于 CSS 。

  • 使用大括号{}

  • 使用分号;

  • SCSS 中的变量符号为$

  • SCSS 中的分配签到:

  • 使用此语法的文件具有 .scss 扩展名。



原始 Sass :



  • 它的语法类似于 Ruby 。

  • 这里没有使用大括号。

  • 没有严格的缩进。

  • 没有分号。

  • Sass 中的变量符号是!而不是$

  • Sass 中的作业签名是=而不是:

  • 使用此语法的文件具有 .sass 扩展名。



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


有些人更喜欢 Sass ,原始语法 - 而其他人更喜欢 SCSS 。无论哪种方式,但值得注意的是 Sass的缩进语法还没有,也永远不会被弃用。[53]


与 sass-convert 的转化:


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

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


SASS REFERENCE [54]

其它参考6


基本区别在于语法。虽然SASS的语法松散且带有空格且没有分号,但SCSS更像CSS。

其它参考7


原始的sass是ruby语法,类似于ruby,jade等...


在那些语法中,我们不使用{},而是使用空格,也不使用; ...


scss中,语法更像CSS,但是获得了更多选项,如:嵌套,声明等,类似于less和其他预处理CSS ......


它们基本上做同样的事情,但是我把每行的几行看到语法差异,看看{};spaces:


SASS:


$width: 100px
$color: green

div
  width: $width
  background-color: $color


SCSS:


$width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}

其它参考8


Sass是第一个,语法有点不同。
例如,包括mixin:


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


Sass忽略了大括号和半冒号并且在嵌套上,我发现它更有用。

其它参考9


SASS和SCSS文章之间的差异解释了细节上的差异。不要被SASS和SCSS选项混淆,虽然我最初也是,.scss是Sassy CSS并且是下一代.sass。[55]


如果这没有意义,你可以看到下面代码的差异。


/* SCSS */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}


在上面的代码中我们使用;分开声明。我甚至将.border的所有声明添加到一行中以进一步说明这一点。
相反,下面的SASS代码必须在带有缩进的不同行上,并且没有使用;。


/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue


您可以从下面的CSS中看到,SCSS样式与常规CSS相比,与旧的SASS方法非常相似。


/* CSS */
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}


我想大多数时候,如果有人提到他们正在与Sass合作,他们指的是.scss而不是传统的.sass方式。

其它参考10



  SASS代表Syntactically Awesome StyleSheets。这是一个扩展
  CSS为基本语言增添了力量和优雅。 SASS是
  新命名为SCSS有一些chages,但旧的SASS也是
  那里。在使用SCSS或SASS之前,请参阅以下差异。



[56]


一些SCSS和SASS语法的示例


SCSS


$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

//Mixins
@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

.box { @include transform(rotate(30deg)); }


SASS


$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

//Mixins
=transform($property)
  -webkit-transform: $property
  -ms-transform:     $property
  transform:         $property

.box
  +transform(rotate(30deg))


编译后输出CSS(两者相同)


body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
//Mixins
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}


更多参考官方网站[57]

其它参考11


紧凑的答案:


SCSS是指Sass CSS预处理器支持的主要语法



  • .scss结尾的文件代表Sass支持的标准语法。 SCSS是CSS的超集。

  • .sass结尾的文件代表源自红宝石世界的Sass支持的较旧语法。