SCSS和Sass有什么区别？

12 回答

• 3

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

  • 更新：SCSS（Sassy CSS）

  • 和较旧的原始：缩进语法，它是原始的Sass，也称为Sass .

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

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

  SCSS ：

  • 它的语法类似于CSS .

  • 使用大括号 {} .

  • 使用分号 ; .

  • SCSS中的变量符号为 $ .

  • SCSS中的分配登录是 : .

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

  Original Sass ：

  • 它的语法类似于Ruby .

  • 这里没有使用大括号 .

  • 没有严格的缩进 .

  • 没有分号 .

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

  • Sass中的分配符号是 = 而不是 : .

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

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

  有些人更喜欢Sass，原始语法 - 而其他人更喜欢SCSS . 无论哪种方式，但值得注意的是Sass’s indented syntax has not been and will never be deprecated .

  Conversions with sass-convert ：

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

  SASS REFERENCE

  回复于 2024-04-28T02:08:23+08:00
• 49

  原始 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;
  }
  

  回复于 2024-04-28T02:08:23+08:00
• 1430

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

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

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

  回复于 2024-04-28T02:08:23+08:00
• 62

  Difference between SASS and SCSS文章解释了细节上的差异 . 不要被SASS和SCSS选项混淆，虽然我最初也是，.scss是Sassy CSS，是下一代.sass .

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

  /* 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方式 .

  回复于 2024-04-28T02:08:23+08:00
• 9

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

  其主要原因是增加了CSS痛苦缺乏的功能（如变量） .

  SCSS和Sass之间的区别，Sass documentation page上的这个文字应该回答这个问题：

  Sass有两种语法可用 . 第一个，称为SCSS（Sassy CSS），在整个引用中使用，是CSS语法的扩展 . 这意味着每个有效的CSS样式表都是具有相同含义的有效SCSS文件 . 使用下面描述的Sass功能增强了此语法 . 使用此语法的文件具有.scss扩展名 . 第二个和更早的语法，称为缩进语法（有时只是“Sass”），提供了一种更简洁的CSS编写方式 . 它使用缩进而不是括号来指示选择器的嵌套，而使用换行符而不是分号来分隔属性 . 使用此语法的文件具有.sass扩展名 .

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

  回复于 2024-04-28T02:08:23+08:00
• 7

  它的语法不同，这是主要的专业（或者con，取决于你的观点） .

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

  SASS pro

  • cleaner - 如果你来自Python，Ruby（你甚至可以用类似符号的语法编写道具）或者甚至是CoffeeScript世界，它对你来说非常自然 - 在 .sass 中编写mixins，函数和一般任何可重用的东西都比 .scss （主观）更容易阅读 .

  SASS cons

  • 空白敏感（主观），我不介意在其他语言中，但在CSS中它只是困扰我（问题：复制，制表与太空战争等） .

  • 没有内联规则（这对我来说是游戏破坏），你不能像你在.scss body {color: red} 那样做 body color: red

  • 导入其他供应商的东西，复制vanilla CSS片段 - 一段时间后不是不可能但很无聊 . 解决方案是在项目中包含 .scss 文件（以及 .sass 文件）或将它们转换为 .sass .

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

  现在，我喜欢做的是在 .sass 中编写mixins和变量，以及在 .scss 中实际编译为CSS的代码（如果可能的话）（即Visual Studio不支持 .sass ，但每当我处理Rails项目时，我通常会将两个他们，而不是在一个文件中） .

  最近，我正在考虑给予 Stylus 机会（对于全时CSS预处理器），因为它允许您在一个文件中组合两个语法（在其他一些功能中） . 对于一支球队来说，这可能不是一个好方向，但是当你单独维护它时 - 没关系 . 当语法有问题时，手写笔实际上最灵活 .

  最后mixin for .scss vs .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
  

  回复于 2024-04-28T02:08:23+08:00
• 498

  紧凑的答案：

  SCSS refers to the main syntax supported by the Sass CSS pre-processor .

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

  • 以 .sass 结尾的文件表示源自ruby世界的Sass支持的"older"语法 .

  回复于 2024-04-28T02:08:23+08:00
• 10

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

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

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

  回复于 2024-04-28T02:08:23+08:00
• 45

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

  一些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))
  

  Output CSS after Compilation(Same for Both)

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

  更多参考官方website

  回复于 2024-04-28T02:08:23+08:00
• 6

  来自homepage of the language

  Sass有两种语法 . 新的主要语法（从Sass 3开始）被称为“SCSS”（用于“Sassy CSS”），并且是CSS3语法的超集 . 这意味着每个有效的CSS3样式表也是有效的SCSS . SCSS文件使用扩展名.scss . 第二个较旧的语法称为缩进语法（或仅称为“Sass”） . 受Haml的简洁启发，它适用于那些喜欢与CSS相似的简洁性的人 . 它使用行的缩进来指定块，而不是括号和分号 . 虽然不再是主要语法，但将继续支持缩进语法 . 缩进语法中的文件使用扩展名.sass .

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

  回复于 2024-04-28T02:08:23+08:00
• 20

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

  回复于 2024-04-28T02:08:23+08:00
• 292

  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） .

  回复于 2024-04-28T02:08:23+08:00