blocks|key|716209|text|我是帮助创建Sass的开发人员之一。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|716210|不同之处在于语法。在文本的外观下，它们是相同的。这就是为什么sass和scss文件可以相互导入的原因。实际上，sass有四个语法分析器:+scss、Sass、CSS和less。所有这些都将不同的语法转换成Abstract+Syntax+Tree，然后通过sass-convert工具进一步处理为CSS输出，甚至转换为其他格式之一。|offset|length|716211|使用你最喜欢的语法，这两种语法都是完全支持的，如果你改变主意，你可以在它们之间进行更改。|716212|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Abstract_syntax_tree^0|0|2U|K|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

I'm one of the developers who helped create Sass.
The difference is syntax. Underneath the textual exterior they are identical. This is why sass and scss files can import each other. Actually, Sass has four syntax parsers: scss, sass, CSS, and less. All of these convert a different syntax into an <a href="http://en.wikipedia.org/wiki/Abstract_syntax_tree" rel="noreferrer">Abstract Syntax Tree</a> which is further processed into CSS output or even onto one of the other formats via the sass-convert tool.
Use the syntax you like the best, both are fully supported and you can change between them later if you change your mind.

blocks|key|716249|text|基本的区别在于语法。虽然SASS有一个松散的语法，有空格和没有分号，但SCSS更像CSS。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|716250|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

The basic difference is the syntax. While SASS has a loose syntax with white space and no semicolons, the SCSS resembles more to CSS.

blocks|key|716326|text|Sass+.sass文件在视觉上与.scss文件不同，例如|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|716327|Example.sass+-+sass是较旧的语法|716328|$color:+red

=my-border($color)
++border:+1px+solid+$color

body
++background:+$color
++%2Bmy-border(green)|code-block|syntax|javascript|716329|Example.scss+-+sassy+css是Sass3的新语法|716330|$color:+red;

@mixin+my-border($color)+{
++border:+1px+solid+$color;
}

body+{
++background:+$color;
++@include+my-border(green);
}|716331|只需将扩展名从.css更改为.scss，就可以将任何有效的CSS文档转换为Sassy+CSS+(SCSS)。|716332|entityMap^0|5|5|H|5|0|0|0|0|0|7|4|E|5|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]]|D|@]|E|$]]|$1|S|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|T|$]]

The Sass <code>.sass</code> file is visually different from <code>.scss</code> file, e.g.

<h3>Example.sass - sass is the older syntax</h3>

<pre><code>$color: red

=my-border($color)
 border: 1px solid $color

body
 background: $color
 +my-border(green)
</code></pre>

<h3>Example.scss - sassy css is the new syntax as of Sass 3</h3>

<pre><code>$color: red;

@mixin my-border($color) {
 border: 1px solid $color;
}

body {
 background: $color;
 @include my-border(green);
}
</code></pre>

Any valid CSS document can be converted to Sassy CSS (SCSS) simply by changing the extension from <code>.css</code> to <code>.scss</code>.

blocks|key|716366|text|Sass是第一个，语法略有不同。例如，包含一个mixin：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|716367|Sass:+%2Bmixinname()
Scss:+@include+mixinname()|code-block|syntax|javascript|716368|Sass忽略了花括号和分号，而是使用嵌套，我发现这更有用。|716369|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Sass was the first one, and the syntax is a bit different.
For example, including a mixin:

<pre><code>Sass: +mixinname()
Scss: @include mixinname()
</code></pre>

Sass ignores curly brackets and semicolons and lay on nesting, which I found more useful.

blocks|key|716477|text|Difference+between+SASS+and+SCSS文章详细解释了其中的区别。不要被SASS和SCSS选项搞糊涂了，尽管我最初也是这样，.scss是Sassy+CSS，是下一代.sass。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|716478|如果这没有意义，你可以在下面的代码中看到区别。|716479|/*+SCSS+*/
$blue:+#3bbfce;
$margin:+16px;

.content-navigation+{
++border-color:+$blue;
++color:+darken($blue,+9%25);
}

.border+{
++padding:+$margin+/+2;+margin:+$margin+/+2;+border-color:+$blue;
}|code-block|syntax|javascript|716480|在上面的代码中，我们使用；来分隔声明。为了进一步说明这一点，我甚至在一行中添加了.border的所有声明。相反，下面的SASS代码必须在不同的行上使用缩进，并且没有使用；。|716481|/*+SASS+*/
$blue:+#3bbfce
$margin:+16px

.content-navigation
++border-color:+$blue
++color:+darken($blue,+9%25)

.border
++padding:+$margin+/+2
++margin:+$margin+/+2
++border-color:+$blue|716482|您可以从下面的CSS中看到，与旧的SASS方法相比，SCSS样式更类似于常规CSS。|716483|/*+CSS+*/
.content-navigation+{
++border-color:+#3bbfce;
++color:+#2b9eab;
}

.border+{
++padding:+8px;
++margin:+8px;
++border-color:+#3bbfce;
}|716484|我认为大多数时候，如果有人提到他们正在与Sass合作，他们指的是用.scss而不是传统的.sass方式进行创作。|716485|entityMap|0|LINK|mutability|MUTABLE|url|http://programingsoeasy.blogspot.in/2018/05/difference-between-sass-scss-and-css.html^0|0|W|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1A|8|@]|9|@]|C|$]]|$1|Q|3|R|5|H|7|1B|8|@]|9|@]|C|$I|J]]|$1|S|3|T|5|6|7|1C|8|@]|9|@]|C|$]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]]]

<a href="http://programingsoeasy.blogspot.in/2018/05/difference-between-sass-scss-and-css.html" rel="noreferrer">Difference between SASS and SCSS</a> article explains the difference in details. Don’t be confused by the SASS and SCSS options, although I also was initially, .scss is Sassy CSS and is the next generation of .sass.

If that didn’t make sense you can see the difference in code below.

<pre><code>/* SCSS */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
 border-color: $blue;
 color: darken($blue, 9%);
}

.border {
 padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}
</code></pre>

In the code above we use ; to separate the declarations. I’ve even added all the declarations for .border onto a single line to illustrate this point further.
In contrast, the SASS code below must be on different lines with indentation and there is no use of the ;.

<pre><code>/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
 border-color: $blue
 color: darken($blue, 9%)

.border
 padding: $margin / 2
 margin: $margin / 2
 border-color: $blue
</code></pre>

You can see from the CSS below that the SCSS style is a lot more similar to regular CSS than the older SASS approach.

<pre><code>/* CSS */
.content-navigation {
 border-color: #3bbfce;
 color: #2b9eab;
}

.border {
 padding: 8px;
 margin: 8px;
 border-color: #3bbfce;
}
</code></pre>

I think most of the time these days if someone mentions that they are working with Sass they are referring to authoring in .scss rather than the traditional .sass way.

blocks|key|932636|text|SASS是语法上很棒的样式表，是CSS的扩展，提供了嵌套规则、继承、混合等特性，而SCSS是类似于CSS的Sassy级联样式表，填补了CSS和SASS之间的空白和不兼容之处。它是在麻省理工学院的许可下授权的。这篇文章有更多关于差异的内容：https://www.educba.com/sass-vs-scss/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|932637|entityMap|0|LINK|mutability|MUTABLE|url|https://www.educba.com/sass-vs-scss/^0|3B|10|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

SASS is Syntactically Awesome Style Sheets and is an extension of CSS which provides the features of nested rules, inheritance, Mixins whereas SCSS is Sassy Cascaded Style Sheets which is similar to that of CSS and fills the gaps and incompatibilities between CSS and SASS. It was licensed under the MIT license.
This article has more about the differences:<a href="https://www.educba.com/sass-vs-scss/" rel="noreferrer">https://www.educba.com/sass-vs-scss/</a>

blocks|key|932669|text|SCSS是Sass的新语法。在扩展方面，对于SASS使用.sass，而对于SCSS使用.scss。在这里，SCSS的编码方法比SASS更有逻辑性和复杂性。因此，对于软件领域的新手来说，更好的选择是SCSS。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|932670|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

SCSS is the new syntax for Sass. In Extension wise, .sass for the SASS while .scss for the SCSS. Here SCSS has more logical and complex approach for coding than SASS.
Therefore, for a newbie to software field the better choice is SCSS.

From what I've been reading, Sass is a language that makes CSS more powerful with variable and math support. 

What's the difference with SCSS? Is it supposed to be the same language? Similar? Different?

What's the difference between SCSS and Sass?

据我所知，Sass是一种语言，它通过变量和数学支持使CSS变得更加强大。与SCSS有什么不同？它应该是同一种语言吗？相似吗？不一样？

问SCSS和Sass有什么不同？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SCSS和Sass有什么不同？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SCSS和Sass有什么不同？
EN