从我所读到的内容来看,Sass是一种通过变量和数学支持使CSS更强大的语言。
SCSS有什么不同?应该是同一种语言吗?相像的不同的
从我所读到的内容来看,Sass是一种通过变量和数学支持使CSS更强大的语言。
SCSS有什么不同?应该是同一种语言吗?相像的不同的
当前回答
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的语法松散,没有空格和分号,但SCSS更像CSS。
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是第一个,语法有点不同。例如,包括mixin:
Sass: +mixinname()
Scss: @include mixinname()
Sass忽略了大括号和分号,而专注于嵌套,我发现这更有用。
SCSS是Sass的新语法。在扩展方面,.sas表示sass,.scs表示scss。这里,SCSS具有比SASS更逻辑和复杂的编码方法。因此,对于软件领域的新手来说,更好的选择是SCSS。
TL;博士
两者都是Sass,但不同的只是编译选项。
S(组件)CSS=Sass
您可以使用SASS的语法不仅有一种,还有两种:一方面,您具有原始形式,这很高兴被称为“缩进语法”或简称为“SASS”。此外,还有一个更新的变体,它更接近于CSS的规范,因此被称为Sassy CSS(SCSS),即SASS风格的CSS。在SASS第3版中,SCSS已被确立为官方语法。最大的区别是使用了括号和分号。
原始SASS语法使用缩进和换行符,这是一种基于YAML的方法。要终止一行代码,只需换行即可,即按Enter键。缩进非常简单地通过制表器工作。因此,通过改变字体的位置,就形成了分组——所谓的声明块。这对于CSS本身是不可能的。这里,大括号必须用于分组,分号必须用于属性声明。这正是SCSS所需要的。
因此,SASS与SCSS之间存在争议
一些用户对原始SASS的易用性信誓旦旦,因为在移动源代码片段时,您不必注意括号的正确位置,通常会生成更精简、更简洁的代码。总的来说,“缩进语法”使用更少的字符和行。另一方面,SCSS的支持者很乐意接受额外的努力,因为无论如何,它与CSS所知的更为相似。
SCSS是CSS的超集,这确保了CSS代码基本上也可以在SCSS中工作,但不是相反。尽管如此,SASS的功能仍被完全包括在内。这使得同时使用两种语言更加容易。此外,对于已经使用CSS并且已经习惯语法的人来说,切换要容易得多。尽管SASS支持这两种语法,但您必须根据项目进行选择:为了能够区分不同的格式,您可以将文件扩展名为.SASS或.scs。