CSS和SCS之间有什么区别？

我非常了解CSS，但对Sass感到困惑。SCS与CSS有什么不同？如果我使用SCS而不是CSS，它的工作原理是否相同？

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 在SCS中，我们可以使用

@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
  

而这一点

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

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

---

css

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

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

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

---

变量定义权限：

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

所有答案都很好，但问题和答案有点不同
“关于Sass。SCSS与CSS有何不同”：SCSS是格式良好的语法。使用sass预处理器来创建它
如果我使用SCSS而不是CSS，它的工作原理是否相同？是。如果您的ide支持sass预处理器。比它同样有效
Sass有两个语法。最常用的语法称为“SCSS”（代表“Sassy CSS”），是CSS3语法的超集。这意味着每个有效的CSS3样式表也是有效的SCS。SCSS文件使用扩展名.SCSS
第二种较旧的语法称为缩进语法（或“.sass”）。灵感来源于Haml的简洁，它是为那些喜欢简洁而不是类似CSS的人设计的。它使用行的缩进来指定块，而不是括号和分号。缩进语法中的文件使用扩展名.sass

---

• 进一步了解：

---

什么是CSS预处理器？
CSS本身没有复杂的逻辑和功能，这是编写可重用和有组织的代码所必需的。因此，开发人员受到限制，在代码维护和可伸缩性方面会面临极大的困难，尤其是在处理涉及大量代码和多个CSS样式表的大型项目时。这就是CSS预处理器的作用所在
CSS预处理器是一种工具，用于通过自己的脚本语言扩展默认香草CSS的基本功能。它可以帮助我们使用复杂的逻辑语法，比如变量、函数、混合、代码嵌套和继承等等，使普通的CSS更加强大。通过使用CSS预处理器，您可以无缝地自动化日常任务，构建可重用的代码段，避免代码重复和膨胀，并编写组织良好且易于阅读的嵌套代码块。 但是，浏览器只能理解原生的香草CSS代码，无法解释CSS预处理器语法。因此，需要首先将复杂且高级的预处理器语法编译为原生CSS语法，然后浏览器可以对其进行解释，以避免跨浏览器兼容性问题。虽然不同的预处理器有自己独特的语法，但最终所有预处理器都被编译成相同的本机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;
    }

在本文中，我们将进一步了解目前世界各地开发人员使用的3种最流行的CSS预处理器，即Sass、LESS和Stylus。 在您决定Sass vs LESS vs Stylus的赢家之前，让我们先详细了解他们
Sass–语法上非常棒的样式表
Sass是“语法上令人敬畏的样式表”的首字母缩写。Sass不仅是世界上最流行的CSS预处理器，也是最古老的CSS预处理器之一，由汉普顿·卡特林（Hampton Catlin）于2006年推出，后来由娜塔莉·魏森鲍姆（Natalie Weizenbaum）开发。 尽管Sass是用Ruby语言编写的，但预编译器LibSass允许用其他语言解析Sass，并将其与Ruby解耦。Sass有一个庞大的活跃社区和广泛的网络学习资源，可供初学者使用。由于其成熟性、稳定性和强大的逻辑能力，Sass已经在CSS预处理器领域领先于其竞争对手
Sass可以使用Sass或SCSS以2种语法编写。这两者的区别是什么？让我们看看
语法声明：Sass vs SCSS
• SCSS代表时髦的CSS。与Sass不同，SCSS不是基于 缩进
• .sass扩展名用作sass的原始语法，而SCSS 提供具有.scss扩展名的较新语法
• 与Sass不同，SCSS有大括号和分号，就像CSS一样
• 与SCS相反，Sass很难理解，因为它非常离经叛道 来自CSS。这就是为什么SCSS会像它一样使用更推荐的Sass语法 更易于阅读，与本机CSS非常相似，同时 时间享受与权力的萨斯
考虑下面的示例，其中包含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;

Sass的使用
可以说，最流行的前端框架引导是用Sass编写的。在版本3之前，Bootstrap的编写语言较少，但Bootstrap4采用了Sass和boos

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