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

SCSS有什么不同?应该是同一种语言吗?相像的不同的


当前回答

它的语法不同,这是主要的优点(或缺点,取决于你的观点)。

我会尽量不重复别人说的话,你可以很容易地在谷歌上搜索,但相反,我想从我使用这两种方法的经验中说几句话,有时甚至在同一个项目中。

SASS专业

更干净-如果你来自Python、Ruby(你甚至可以用类似符号的语法编写道具),甚至是CoffeeScript世界,这对你来说是非常自然的-在.sas中编写mixin、函数和任何可重用的东西比在.scs(主观)中“更容易”和可读。

SASS缺点

空格敏感(主观),我不介意在其他语言中使用,但在CSS中,它只是让我感到困扰(问题:复制、制表符与空格大战等)。没有内联规则(这对我来说是一个突破),你不能像在scs中那样做身体颜色:红色。scs身体{颜色:红色}导入其他供应商的东西,复制普通的CSS片段-这不是不可能的,但过了一段时间后非常无聊。解决方案是在项目中包含.scs文件(与.sass文件一起)或将其转换为.sass。

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

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

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

最后,将.scs与.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

其他回答

TL;博士

两者都是Sass,但不同的只是编译选项。

S(组件)CSS=Sass

您可以使用SASS的语法不仅有一种,还有两种:一方面,您具有原始形式,这很高兴被称为“缩进语法”或简称为“SASS”。此外,还有一个更新的变体,它更接近于CSS的规范,因此被称为Sassy CSS(SCSS),即SASS风格的CSS。在SASS第3版中,SCSS已被确立为官方语法。最大的区别是使用了括号和分号。

原始SASS语法使用缩进和换行符,这是一种基于YAML的方法。要终止一行代码,只需换行即可,即按Enter键。缩进非常简单地通过制表器工作。因此,通过改变字体的位置,就形成了分组——所谓的声明块。这对于CSS本身是不可能的。这里,大括号必须用于分组,分号必须用于属性声明。这正是SCSS所需要的。

因此,SASS与SCSS之间存在争议

一些用户对原始SASS的易用性信誓旦旦,因为在移动源代码片段时,您不必注意括号的正确位置,通常会生成更精简、更简洁的代码。总的来说,“缩进语法”使用更少的字符和行。另一方面,SCSS的支持者很乐意接受额外的努力,因为无论如何,它与CSS所知的更为相似。

SCSS是CSS的超集,这确保了CSS代码基本上也可以在SCSS中工作,但不是相反。尽管如此,SASS的功能仍被完全包括在内。这使得同时使用两种语言更加容易。此外,对于已经使用CSS并且已经习惯语法的人来说,切换要容易得多。尽管SASS支持这两种语法,但您必须根据项目进行选择:为了能够区分不同的格式,您可以将文件扩展名为.SASS或.scs。

它的语法不同,这是主要的优点(或缺点,取决于你的观点)。

我会尽量不重复别人说的话,你可以很容易地在谷歌上搜索,但相反,我想从我使用这两种方法的经验中说几句话,有时甚至在同一个项目中。

SASS专业

更干净-如果你来自Python、Ruby(你甚至可以用类似符号的语法编写道具),甚至是CoffeeScript世界,这对你来说是非常自然的-在.sas中编写mixin、函数和任何可重用的东西比在.scs(主观)中“更容易”和可读。

SASS缺点

空格敏感(主观),我不介意在其他语言中使用,但在CSS中,它只是让我感到困扰(问题:复制、制表符与空格大战等)。没有内联规则(这对我来说是一个突破),你不能像在scs中那样做身体颜色:红色。scs身体{颜色:红色}导入其他供应商的东西,复制普通的CSS片段-这不是不可能的,但过了一段时间后非常无聊。解决方案是在项目中包含.scs文件(与.sass文件一起)或将其转换为.sass。

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

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

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

最后,将.scs与.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

SASS是语法上很棒的样式表,是CSS的扩展,它提供了嵌套规则、继承和混合的特性,而SCSS是Sassy级联样式表,它与CSS相似,填补了CSS和SASS之间的空白和不兼容性。它是根据麻省理工学院的许可证颁发的。本文详细介绍了这些差异:https://www.educba.com/sass-vs-scss/

Sass.Sass文件在视觉上与.scs文件不同,例如。

Example.sass-sass是较旧的语法

$color: red

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

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

Example.scss-sassycss是Sass 3的新语法

$color: red;

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

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

只要将扩展名从.CSS更改为.scs,任何有效的CSS文档都可以转换为SassyCSS(SCSS)。

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