从我所读到的内容来看,Sass是一种通过变量和数学支持使CSS更强大的语言。
SCSS有什么不同?应该是同一种语言吗?相像的不同的
从我所读到的内容来看,Sass是一种通过变量和数学支持使CSS更强大的语言。
SCSS有什么不同?应该是同一种语言吗?相像的不同的
当前回答
Sass是第一个,语法有点不同。例如,包括mixin:
Sass: +mixinname()
Scss: @include mixinname()
Sass忽略了大括号和分号,而专注于嵌套,我发现这更有用。
其他回答
Sass是第一个,语法有点不同。例如,包括mixin:
Sass: +mixinname()
Scss: @include mixinname()
Sass忽略了大括号和分号,而专注于嵌套,我发现这更有用。
从语言主页
Sass有两种语法。新干线语法(从Sass 3开始)被称为“SCSS”(代表“Sassy CSS”),是CSS3语法的超集。这意味着每个有效的CSS3样式表都是有效的SCSS。SCSS文件使用扩展名.scs。第二种更古老的语法称为缩进的语法(或只是“Sass”)。灵感来自Haml的简洁适合喜欢的人简洁而不是与CSS的相似性。它不是括号和分号,而是使用行的缩进来指定块。虽然不再是主语法,缩进语法将继续得到支持。文件夹在缩进语法中,使用扩展名.sas。
SASS是一种解释性语言,它输出CSS。Sass的结构看起来像CSS(远程),但在我看来,描述有点误导;它不是CSS的替代品或扩展。它是一个解释器,最终输出CSS,所以Sass仍然有普通CSS的局限性,但它用简单的代码掩盖了它们。
紧凑的答案:
SCSS是指Sass CSS预处理器支持的主要语法。
以.scs结尾的文件表示Sass支持的标准语法。SCSS是CSS的超集。以.sass结尾的文件表示源于Ruby世界的sass支持的“旧”语法。
SASS和SCSS文章之间的差异在细节上解释了差异。不要被SASS和SCSS选项所迷惑,尽管我最初也这么认为,.scs是Sassy CSS,是.sas的下一代。
如果这不合理,您可以在下面的代码中看到差异。
/* SCSS */
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}
.border {
padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}
在上面的代码中,我们使用;将声明分开。为了进一步说明这一点,我甚至将.bborder的所有声明都添加到了一行中。相反,下面的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样式与传统的SASS方法相比更类似于常规CSS。
/* CSS */
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
我认为这些天大多数时候,如果有人提到他们正在与Sass合作,他们指的是在.scs中创作,而不是传统的.sas方式。
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文档