从我所读到的内容来看,Sass是一种语言,通过对变量和数学的支持使CSS变得更加强大。
与SCSS有什么区别?它应该是同一种语言吗?类似吗?还是不同?
Sass是一个具有先进语法的CSS预处理器。高级语法的样式表被程序处理,并变成常规的CSS样式表。然而,它们并不***扩展CSS标准本身。
支持并可以利用CSS变量,但不像预处理器变量那样好用。
SCSS和Sass的区别,Sass文档页上的这段文字应该可以回答这个问题。
Sass有两种语法可用。第一种被称为SCSS(Sassy CSS),并在本参考文献中使用,是对CSS语法的扩展。这意味着每个有效的CSS样式表都是一个有效的SCSS文件,具有相同的意义。这种语法通过下面描述的Sass特性得到了增强。使用这种语法的文件具有.scss扩展名。
第二种也是较早的语法,被称为缩进式语法(或有时只是 "Sass"),提供了一种更简洁的CSS编写方式。它使用缩进而不是括号来表示选择器的嵌套,使用换行而不是分号来分隔属性。使用这种语法的文件的扩展名是.sass。
然而,所有这些只在Sass预编译器中起作用,它最终会创建CSS。它并不是对CSS标准本身的一种扩展。
我是帮助创建Sass的开发者之一。
区别在于用户界面。在文字的外表下,它们是相同的。这就是为什么sass和scss文件可以互相导入。实际上,Sass有四个语法分析器:scss、sass、CSS和less。所有这些都将不同的语法转换为抽象语法树,进一步处理为CSS输出,甚至通过sass-convert工具转换为其他格式之一。
使用你最喜欢的语法,这两种语法都是完全支持的,如果你改变主意,你可以在它们之间转换。
Sass .sass
文件与.scss
文件在视觉上是不同的,例如: ### Example.sass - sass是旧的语法。
$color: red
=my-border($color)
border: 1px solid $color
body
background: $color
+my-border(green)
$color: red;
@mixin my-border($color) {
border: 1px solid $color;
}
body {
background: $color;
@include my-border(green);
}
任何有效的CSS文档都可以通过简单地将扩展名从.css
改为.scss
来转换为Sassy CSS(SCSS)。
Sass(Syntactically Awesome StyleSheets)有两种语法。
所以它们都是Sass预处理程序的一部分,有两种不同的可能语法。
SCSS和原始Sass最重要的区别。
SCSS:
语法与CSS相似(以至于每一个正常有效的CSS3也是有效的SCSS,但在另一个方向的关系显然不会发生)。
使用大括号{}
。
使用分号";"。
赋值符号是:
要创建一个mixin,它使用@mixin
指令。
要使用mixin,就在前面加上@include
指令。
文件的扩展名为.scss。
原始的Sass。
=
而不是:
。=
符号。+
号。有些人喜欢Sass,原始语法--而有些人则喜欢SCSS。 无论哪种方式,但值得注意的是,[Sass的缩进语法没有,也不会被废弃][1]。
用sass-convert进行转换。
# Convert Sass to SCSS
$ sass-convert style.sass style.scss
# Convert SCSS to Sass
$ sass-convert style.scss style.sass
[Sass和SCSS文件][2]
[1]: http://thesassway.com/news/sass-is-here-to-stay [2]: https://sass-lang.com/documentation
它的语法是不同的,这就是主要的优点(或缺点,取决于你的角度)。
我尽量不重复别人说的太多,你可以很容易地谷歌,但相反,我'想从我使用两者的经验中说几件事,有时甚至在同一个项目中。
SASS亲
.sass
中编写混搭、函数和任何可重用的东西都比在.scss
中更'容易&39;
和可读性比.scss
要好得多(主观)。SASS的缺点
body color: red
像你可以在.scss中做body {color: 红}
.scss
文件(和.sass
文件一起),或者把它们转换成.sass
。除此以外--它们做着同样的工作。
现在,我喜欢做的是在.sass
中编写 mixins 和变量,如果可能的话,在.scss
中编写能够实际编译成 CSS 的代码(即 Visual studio 不支持.sass
,但每当我在 Rails 项目中工作时,我通常会将它们中的两个结合起来,而不是在一个文件中)。
最近,我正在考虑给Stylus一个机会(作为一个全职的CSS预处理器),因为它允许你在一个文件中结合两种语法(以及其他一些功能)。 对于一个团队来说,这可能不是一个好的方向,但当你独自维护它时--它'就可以了。 当语法有问题时,手写笔其实是最灵活的。
最后混搭一下.scss
和.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有两种语法。新的主 语法(从Sass 3开始)被称为 "SCSS"(代表 "Sassy CSS"),并且是一个 是CSS3的语法的超集。这意味着 每个有效的CSS3样式表都是 SCSS也是有效的。SCSS文件使用的是 扩展名为.scss。
第二种较早的语法被称为 缩进的语法(或仅仅是 "Sass")。 灵感来自于Haml的简洁性,它是 是为那些喜欢 简洁而不是与CSS相似的人。 它不使用括号和分号,而使用 使用行的缩进来指定块。 指定块。尽管不再是 主要的语法,但缩进的语法 将继续被支持。文件 缩进式语法中的>文件使用 扩展名为.sass。
SASS是一种解释的语言,可以吐出CSS。Sass的结构看起来像CSS(远程),但在我看来,这种描述有点误导;它不是CSS的替代品,也不是一种扩展。它是一个解释器,最后会吐出CSS,所以Sass仍然有普通CSS的局限性,但它用简单的代码掩盖了这些局限。
Sass是第一个,语法有些不同。 比如,包括一个mixin。
Sass: +mixinname()
Scss: @include mixinname()
Sass忽略了大括号和分号,并在嵌套上做了铺垫,我觉得这比较有用。
>.SASS是Syntactically Awesome StyleSheets的缩写。 SASS是Syntactically Awesome StyleSheets的缩写。 它是一个扩展
的CSS,它为基本语言增加了力量和优雅。 SASS是
新命名为SCSS,但有一些变化,但旧的SASS也是。
在那里。 在你使用SCSS或SASS之前,请看下面的区别。
[![在此输入图片描述][1]][1] 。
一些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);
}
更多攻略可参考官方【官网】[2]。
[1]: https://i.stack.imgur.com/fJUJV.jpg [2]: https://sass-lang.com/guide
SASS和SCSS的区别]1文章详细解释了两者的区别。 不要被SASS和SCSS的选项所迷惑,虽然我最初也是这样,.scss是Sassy CSS,是.sass的下一代。
如果没弄明白的话,你可以看看下面的代码的区别。
/* SCSS */
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}
.border {
padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}
在上面的代码中,我们用 ; 来分隔这些声明。 我甚至把.border的所有声明都加到了一行,以进一步说明这一点。 相比之下,下面的 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样式与普通CSS相比,比老式的SASS方式更相似。
/* CSS */
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
我想现在大多数时候,如果有人提到他们正在使用Sass,他们指的是用.scss编写,而不是传统的.sass方式。
1:
原始的sass
是类似于ruby的语法,类似于ruby、jade等......。
在这些语法中,我们不使用{}
,而是使用空格,也不使用;
...。
在 "scss "中,语法更像 "CSS",但有了更多的选项,如:嵌套、声明等。 嵌套、声明等,类似于 "less "和其他预处理的 "CSS"......。
它们基本上做的是一样的事情,但我把每一个都放了几行来看看语法上的区别,看看{}
,;
,和空格
。
SASS:
$width: 100px
$color: green
div
width: $width
background-color: $color
SCSS:。
$width: 100px;
$color: green;
div {
width: $width;
background-color: $color;
}