CSS和SCSS有什么区别？

我非常了解CSS，但是对Sass感到困惑。SCSS与CSS有什么不同？如果我使用SCSS而不是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
  

CSS是任何浏览器都可以用来设置网页样式的样式语言。

SCSS是的一种特殊类型的文件SASS，它是用Ruby编写的程序，CSS用于为浏览器组装样式表，并且为了提供信息，SASS还为CSS变量，嵌套等添加了许多其他功能，这些功能可以使编写CSS更加容易和快捷。
SCSS文件由运行Web应用程序的服务器处理，以输出CSS浏览器可以理解的传统格式。

css也有变量。您可以像这样使用它们：

--primaryColor: #ffffff;
--width: 800px;

body {
    width: var(--width);
    color: var(--primaryColor);
}
.content{
    width: var(--width);
    background: var(--primaryColor);
}

而且这更少

@primarycolor: #ffffff;
@width: 800px;

body{
 width: @width;
 color: @primarycolor;
 .content{
  width: @width;
  background:@primarycolor;
 }
}

正确的变量定义：

$      => SCSS, SASS
--     => CSS
@      => LESS

所有答案都不错，但问题与答案略有不同

“关于 Sass。SCSS 与CSS有何不同”：scss是格式良好的CSS3语法。使用sass预处理程序来创建它。

如果我使用SCSS而不是CSS，是否可以一样工作？是。如果您的ide支持sass预处理程序。比它会工作相同。

Sass有两种语法。最常用的语法称为“ SCSS”（对于“ Sassy CSS”），是CSS3语法的超集。这意味着每个有效的CSS3样式表也都是有效的SCSS。SCSS文件使用扩展名.scss。

第二种较旧的语法称为缩进语法（或简称为“ .sass”）。受Haml简洁的启发，它是为那些喜欢简洁而不是CSS相似性的人们设计的。代替括号和分号，它使用行的缩进来指定块。缩进语法的文件使用扩展名.sass。

• 关于以下内容的进一步信息：

什么是CSS预处理程序？

CSS本身没有编写可重用和组织的代码所需的复杂逻辑和功能。结果，开发人员受到限制，并且在代码维护和可伸缩性方面将面临极大的困难，特别是在处理涉及大量代码和多个CSS样式表的大型项目时。这是CSS预处理程序可以提供帮助的地方。

CSS预处理器是用于通过其自身的脚本语言扩展默认普通CSS的基本功能的工具。它可以帮助我们使用复杂的逻辑语法，例如–变量，函数，mixin，代码嵌套和继承，仅举几例，为您的原始CSS增添了力量。通过使用CSS预处理程序，您可以无缝地自动执行繁琐的任务，构建可重用的代码段，避免代码重复和膨胀以及编写组织良好且易于阅读的嵌套代码块。但是，浏览器只能理解本机的原始CSS代码，并且无法解释CSS预处理程序语法。因此，需要先将复杂且高级的预处理器语法编译为本机CSS语法，然后浏览器才能对其进行解释，以避免跨浏览器兼容性问题。

在本文的前进部分，我们将看一下目前全球开发人员正在使用的3种最受欢迎​​的CSS预处理器，即Sass，LESS和Stylus。在您决定Sass，LESS和Stylus之间的赢家之前，让我们首先详细了解他们。

Sass –语法很棒的样式表

Sass是“语法很棒的样式表”的缩写。Sass不仅是世界上最流行的CSS预处理器，而且是最古老的CSS预处理器之一，它由Hampton Catlin于2006年推出，后来由Natalie Weizenbaum开发。尽管Sass是用Ruby语言编写的，但是预编译器LibSass允许将Sass解析为其他语言并将其与Ruby分离。Sass拥有一个庞大的活跃社区，并为初学者提供了广泛的学习资源。凭借其成熟，稳定和强大的逻辑能力，Sass已在CSS预处理器领域确立了自己的领先地位，领先于其竞争对手。

可以使用Sass或SCSS用2种语法编写Sass。两者有什么区别？让我们找出答案。

语法声明：Sass与SCSS

• SCSS代表Sassy CSS。与Sass不同，SCSS并非基于缩进。
• .sass扩展名用作Sass的原始语法，而SCSS通过.scss扩展名提供更新的语法。
• 与Sass不同，SCSS与CSS一样具有花括号和分号。
• 与SCSS相反，Sass很难阅读，因为它与CSS截然不同。这就是为什么SCSS成为更推荐的Sass语法的原因，因为它更易于阅读，并且与Native CSS非常相似，同时又享受了Sass的强大功能。

考虑下面的示例，该示例具有Sass vs SCSS语法以及已编译的CSS代码。

Sass SYNTAX
    $font-color: #fff
    $bg-color: #00f

    #box
      color: $font-color
      background: $bg-color

SCSS SYNTAX
    $font-color: #fff;
    $bg-color: #00f;

    #box{
      color: $font-color;
      background: $bg-color;
    }

在这两种情况下，无论是Sass还是SCSS，编译后的CSS代码都是相同的–

#box {
      color: #fff;
      background: #00f;

萨斯的用法

可以说，最受欢迎的前端框架Bootstrap是用Sass编写的。直到第3版，Bootstrap都是用LESS编写的，而Bootstrap 4采用了Sass并提高了其流行度。使用Sass的一些大公司是Zapier，Uber，Airbnb和Kickstarter。

LESS –精益样式表

LESS是“ Leaner Stylesheets”的缩写。它是由Alexis Sellier于2009年发布的，距2006年Sass的首次发布已经三年了。尽管Sass是用Ruby编写的，而LESS是用JavaScript编写的。实际上，LESS是一个JavaScript库，它通过mixin，变量，嵌套和规则集循环扩展了原生CSS的功能。Sass vs LESS引起了激烈的争论。不足为奇的是，LESS是Sass的最强竞争对手，并且拥有第二大用户群。但是，随着Bootstrap 4的发布，bootstrap放弃了LESS的支持而放弃了Sass，LESS的流行度有所下降。LESS优于Sass的几个缺点之一是它不支持功能。与Sass不同，LESS使用@声明可能导致与@media和@keyframes混淆的变量。然而，与Sass和Stylus或任何其他预处理器相比，LESS的一个关键优势是易于在项目中添加它。您可以通过使用NPM或合并Less.js文件来实现。 语法声明：LESS 使用.less扩展名。LESS的语法与SCSS十分相似，不同之处在于LESS使用@来声明变量，而不是$符号。

@font-color: #fff;
    @bg-color: #00f

    #box{
      color: @font-color;
      background: @bg-color;
    }

COMPILED CSS
    #box {
        color: #fff;
        background: #00f;
      }

LESS 的用法用LESS编写流行的Bootstrap框架，直到发布第4版。但是，另一个流行的框架SEMANTIC UI仍用LESS编写。使用Sass的大公司包括-Indiegogo，Patreon和微信

触控笔

该笔是由前Node JS开发人员TJ Holowaychuk于2010年推出的，距Sass发行将近4年，而LESS发行则仅1年。手写笔是用Node JS编写的，非常适合JS堆栈。Sass的逻辑能力和LESS的简单性极大地影响了触控笔。尽管Stylus在Node JS开发人员中仍然很受欢迎，但是它并没有自己争取到可观的份额。与Sass或LESS相比，Stylus的优点之一是它具有极为强大的内置功能，并且能够处理大量计算。

语法声明：Stylus使用.styl扩展名。手写笔在编写语法时提供了很大的灵活性，支持本机CSS并允许省略括号，冒号和分号。另外，请注意，手写笔不使用@或$符号定义变量。相反，Stylus使用赋值运算符来指示变量声明。

STYLUS SYNTAX书面原生CSS

font-color = #fff;
bg-color = #00f;

#box {
    color: font-color;
    background: bg-color;
}

要么

不带花括号的手写笔语法

font-color = #fff;
bg-color = #00f;

#box 
    color: font-color;
    background: bg-color;

要么

手写笔语法不带分号和半截号

font-color = #fff
bg-color = #00f

#box 
    color font-color
    background bg-color