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

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


当前回答

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

其他回答

从语言主页

Sass有两种语法。新干线语法(从Sass 3开始)被称为“SCSS”(代表“Sassy CSS”),是CSS3语法的超集。这意味着每个有效的CSS3样式表都是有效的SCSS。SCSS文件使用扩展名.scs。第二种更古老的语法称为缩进的语法(或只是“Sass”)。灵感来自Haml的简洁适合喜欢的人简洁而不是与CSS的相似性。它不是括号和分号,而是使用行的缩进来指定块。虽然不再是主语法,缩进语法将继续得到支持。文件夹在缩进语法中,使用扩展名.sas。

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

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代表Syntactically Awesome StyleSheets。这是一个扩展CSS为基础语言增添了力量和优雅。SASS是新命名为SCSS,有一些变化,但旧的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))

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

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

有关更多指南,请访问官方网站。

原始sass是ruby语法,类似于ruby、jade等。。。

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

在scs中,语法更像CSS,但随着获得更多选项,如:嵌套、声明等,类似于less和其他预处理CSS。。。

它们基本上做了相同的事情,但我用每一行中的几行来查看语法差异,看看{};,和空格:

SASS:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

scs:

$width: 100px;
$color: green;

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

Sass(语法上很棒的样式表)有两种语法:

更新版本:SCSS(Sassy CSS)以及一个更古老的、原始的:indent语法,这是原始的Sass,也称为Sass。

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

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

scs:

语法类似于CSS(以至于每个常规有效的CSS3都是有效的SCSS,但在另一个方向上的关系显然不会发生)使用大括号{}使用分号;分配标志为:要创建mixin,它使用@mixin指令要使用mixin,请在其前面使用@include指令文件的扩展名为.scs。

原始Sass:

语法类似于Ruby无大括号无严格缩进无分号分配符号为=,而不是:要创建混合,它使用=符号要使用mixin,请在其前面加+号文件的扩展名为.sass。

有些人更喜欢Sass这一原始语法,而另一些人更喜欢SCSS。无论如何,但值得注意的是,Sass的缩进语法从未被弃用,也永远不会被弃用(web存档)。

sass转换:

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

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

Sass和SCSS文档