CSS和SCSS有什么区别? [英] What is the difference between CSS and SCSS?

问题描述

我非常了解CSS，但是对Sass感到困惑. SCSS与CSS有什么不同?如果我使用SCSS而不是CSS，它将起作用吗?

I know CSS very well, but am confused about Sass. How is SCSS different from CSS, and if I use SCSS instead of CSS will it work the same?

推荐答案

除了 Idriss 答案:

在CSS中，我们按如下所示编写了完整的代码.

In CSS we write code as depicted bellow, in full length.

body{
 width: 800px;
 color: #ffffff;
}
body content{
 width:750px;
 background:#ffffff;
}

SCSS

在SCSS中，我们可以使用@mixin缩短此代码，因此我们不必一次又一次地编写color和width属性.我们可以通过类似于PHP或其他语言的函数来定义它.

SCSS

In SCSS we can shorten this code using a @mixin so we don’t have to write color and width properties again and again. We can define this through a function, similarly to PHP or other languages.

$color: #ffffff;
$width: 800px;

@mixin body{
 width: $width;
 color: $color;

 content{
  width: $width;
  background:$color;
 }
}

SASS

但是，在SASS中，整个结构在视觉上比SCSS更快，更干净.

SASS

In SASS however, the whole structure is visually quicker and cleaner than SCSS.

• 使用复制和粘贴时，它对空白敏感

• 似乎当前不支持嵌入式CSS.

• It is sensitive to white space when you are using copy and paste,

• It seems that it doesn't support inline CSS currently.

$color: #ffffff
$width: 800px
$stack: Helvetica, sans-serif

body
  width: $width
  color: $color
  font: 100% $stack

  content
    width: $width
    background:$color

这篇关于CSS和SCSS有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！