我非常了解CSS,但是对Sass感到困惑。SCSS与CSS有什么不同?如果我使用SCSS而不是CSS,它会起作用吗?
CSS和SCSS有什么区别?
css
也有变量。您可以像这样使用它们:
--primaryColor: #ffffff;
--width: 800px;
body {
width: var(--width);
color: var(--primaryColor);
}
.content{
width: var(--width);
background: var(--primaryColor);
}
CSS是任何浏览器都可以用来设置网页样式的样式语言。
SCSS是SASS的一种特殊类型的文件,该文件是用Ruby编写的程序,用于为浏览器组装CSS样式表,并且为了提供信息,SASS为CSS添加了很多附加功能,例如变量,嵌套等,这些功能可以使编写CSS更加容易和快捷。SCSS文件由运行Web应用程序的服务器处理,以输出浏览器可以理解的传统CSS。
除了Idriss答案:
的CSS
在CSS中,我们编写了如下所示的完整代码。
body{
width: 800px;
color: #ffffff;
}
body content{
width:750px;
background:#ffffff;
}
SCSS
在SCSS中,我们可以使用来缩短此代码,@mixin
因此我们不必一次又一次地编写color
和width
属性。我们可以通过类似于PHP或其他语言的函数来定义它。
$color: #ffffff;
$width: 800px;
@mixin body{
width: $width;
color: $color;
content{
width: $width;
background:$color;
}
}
萨斯
但是,在SASS中,整个结构在视觉上比SCSS更快,更干净。
- 使用复制和粘贴时,它对空格敏感,
看来目前不支持内联CSS。
$color: #ffffff $width: 800px $stack: Helvetica, sans-serif body width: $width color: $color font: 100% $stack content width: $width background:$color
而且这更少