从我所读到的内容来看,Sass是一种通过变量和数学支持使CSS更强大的语言。
SCSS有什么不同?应该是同一种语言吗?相像的不同的
从我所读到的内容来看,Sass是一种通过变量和数学支持使CSS更强大的语言。
SCSS有什么不同?应该是同一种语言吗?相像的不同的
当前回答
我是帮助创建Sass的开发人员之一。
区别在于语法。在文本外部之下,它们是相同的。这就是sass和scs文件可以相互导入的原因。实际上,Sass有四个语法解析器:scs、Sass、CSS等等。所有这些都将不同的语法转换为抽象语法树,然后通过sass转换工具将其进一步处理为CSS输出,甚至转换为其他格式之一。
使用您最喜欢的语法,这两种语法都是完全支持的,如果您改变主意,您可以稍后在它们之间进行更改。
其他回答
基本区别在于语法。虽然SASS的语法松散,没有空格和分号,但SCSS更像CSS。
我是帮助创建Sass的开发人员之一。
区别在于语法。在文本外部之下,它们是相同的。这就是sass和scs文件可以相互导入的原因。实际上,Sass有四个语法解析器:scs、Sass、CSS等等。所有这些都将不同的语法转换为抽象语法树,然后通过sass转换工具将其进一步处理为CSS输出,甚至转换为其他格式之一。
使用您最喜欢的语法,这两种语法都是完全支持的,如果您改变主意,您可以稍后在它们之间进行更改。
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是语法上很棒的样式表,是CSS的扩展,它提供了嵌套规则、继承和混合的特性,而SCSS是Sassy级联样式表,它与CSS相似,填补了CSS和SASS之间的空白和不兼容性。它是根据麻省理工学院的许可证颁发的。本文详细介绍了这些差异:https://www.educba.com/sass-vs-scss/
从语言主页
Sass有两种语法。新干线语法(从Sass 3开始)被称为“SCSS”(代表“Sassy CSS”),是CSS3语法的超集。这意味着每个有效的CSS3样式表都是有效的SCSS。SCSS文件使用扩展名.scs。第二种更古老的语法称为缩进的语法(或只是“Sass”)。灵感来自Haml的简洁适合喜欢的人简洁而不是与CSS的相似性。它不是括号和分号,而是使用行的缩进来指定块。虽然不再是主语法,缩进语法将继续得到支持。文件夹在缩进语法中,使用扩展名.sas。
SASS是一种解释性语言,它输出CSS。Sass的结构看起来像CSS(远程),但在我看来,描述有点误导;它不是CSS的替代品或扩展。它是一个解释器,最终输出CSS,所以Sass仍然有普通CSS的局限性,但它用简单的代码掩盖了它们。