从我所读到的内容来看,Sass是一种通过变量和数学支持使CSS更强大的语言。
SCSS有什么不同?应该是同一种语言吗?相像的不同的
从我所读到的内容来看,Sass是一种通过变量和数学支持使CSS更强大的语言。
SCSS有什么不同?应该是同一种语言吗?相像的不同的
当前回答
从语言主页
Sass有两种语法。新干线语法(从Sass 3开始)被称为“SCSS”(代表“Sassy CSS”),是CSS3语法的超集。这意味着每个有效的CSS3样式表都是有效的SCSS。SCSS文件使用扩展名.scs。第二种更古老的语法称为缩进的语法(或只是“Sass”)。灵感来自Haml的简洁适合喜欢的人简洁而不是与CSS的相似性。它不是括号和分号,而是使用行的缩进来指定块。虽然不再是主语法,缩进语法将继续得到支持。文件夹在缩进语法中,使用扩展名.sas。
SASS是一种解释性语言,它输出CSS。Sass的结构看起来像CSS(远程),但在我看来,描述有点误导;它不是CSS的替代品或扩展。它是一个解释器,最终输出CSS,所以Sass仍然有普通CSS的局限性,但它用简单的代码掩盖了它们。
其他回答
它的语法不同,这是主要的优点(或缺点,取决于你的观点)。
我会尽量不重复别人说的话,你可以很容易地在谷歌上搜索,但相反,我想从我使用这两种方法的经验中说几句话,有时甚至在同一个项目中。
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的语法松散,没有空格和分号,但SCSS更像CSS。
我是帮助创建Sass的开发人员之一。
区别在于语法。在文本外部之下,它们是相同的。这就是sass和scs文件可以相互导入的原因。实际上,Sass有四个语法解析器:scs、Sass、CSS等等。所有这些都将不同的语法转换为抽象语法树,然后通过sass转换工具将其进一步处理为CSS输出,甚至转换为其他格式之一。
使用您最喜欢的语法,这两种语法都是完全支持的,如果您改变主意,您可以稍后在它们之间进行更改。
从语言主页
Sass有两种语法。新干线语法(从Sass 3开始)被称为“SCSS”(代表“Sassy CSS”),是CSS3语法的超集。这意味着每个有效的CSS3样式表都是有效的SCSS。SCSS文件使用扩展名.scs。第二种更古老的语法称为缩进的语法(或只是“Sass”)。灵感来自Haml的简洁适合喜欢的人简洁而不是与CSS的相似性。它不是括号和分号,而是使用行的缩进来指定块。虽然不再是主语法,缩进语法将继续得到支持。文件夹在缩进语法中,使用扩展名.sas。
SASS是一种解释性语言,它输出CSS。Sass的结构看起来像CSS(远程),但在我看来,描述有点误导;它不是CSS的替代品或扩展。它是一个解释器,最终输出CSS,所以Sass仍然有普通CSS的局限性,但它用简单的代码掩盖了它们。
我发现自己也在想同样的事情,在哈佛大学的CS50中偶然发现了一个直截了当的解释:
一种叫做Sass的语言。。。(是)本质上是CSS的扩展。。。它为CSS添加了附加功能。。。只是为了让它更强大一点供我们使用。
Sass的一个关键特性是能够使用变量
Sass扩展名为.scs(与普通css文件的.css不同)。
因此,当我们问“scs和sass之间有什么区别?”时,答案很简单,.scs只是希望使用sass而不是常规CSS时使用的文件扩展名。