css和scss有什么区别？

Question

我已经阅读了很多关于此的内容,但我仍然感到困惑.

我非常了解CSS,但我只有一个问题:scss与CSS有什么不同,如果我使用scss而不是CSS,它的工作方式是否相同？

Answer 1

除了伊德里斯的回答:

CSS

在CSS中,我们编写如下所示的代码,全长.

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

SCSS

在SCSS中,我们可以使用a缩短此代码,@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
  

Answer 2

CSS是任何浏览器都能理解网页样式的样式语言.

SCSS是SASS的一种特殊类型的文件,一个用Ruby编写的程序,用于为浏览器组装CSS样式表.对于信息,SASS为CSS添加了许多额外的功能,如变量,嵌套等,这些都可以使CSS编写更容易,更快.SCSS文件由运行Web应用程序的服务器处理,以输出您的浏览器可以理解的传统CSS.

Answer 3

变量定义正确：

$      => 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 预处理器是一种工具，用于通过其自己的脚本语言扩展默认 vanilla CSS 的基本功能。它可以帮助我们使用复杂的逻辑语法，例如变量、函数、mixin、代码嵌套和继承等等，从而增强您的普通 CSS。通过使用 CSS 预处理器，您可以无缝地自动执行琐碎的任务，构建可重用的代码片段，避免代码重复和膨胀，并编写组织良好且易于阅读的嵌套代码块。但是，浏览器只能理解原生的 vanilla CSS 代码，无法解释 CSS Preprocessor 语法。因此，需要先将复杂高级的 Preprocessor 语法编译成原生 CSS 语法，然后由浏览器解释，以避免跨浏览器兼容性问题。

在文章的后面，我们将看看目前全球开发人员使用的 3 种最流行的 CSS 预处理器，即 Sass、LESS 和 Stylus。在您决定 Sass 与 LESS 与 Stylus 之间的胜负之前，让我们先详细了解它们。

Sass – 语法上很棒的样式表

Sass 是“Syntactically Awesome Style Sheets”的首字母缩写。Sass 不仅是世界上最受欢迎的 CSS 预处理器，也是最古老的之一，由 Hampton Catlin 于 2006 年推出，后来由 Natalie Weizenbaum 开发。尽管 Sass 是用 Ruby 语言编写的，但预编译器 LibSass 允许用其他语言解析 Sass 并将其与 Ruby 解耦。Sass 拥有庞大的活跃社区和广泛的网络学习资源，可供初学者使用。凭借其成熟、稳定和强大的逻辑能力，Sass 已经领先于竞争对手，跻身 CSS Preprocessor 的前列。

Sass 可以使用 Sass 或 SCSS 以两种语法编写。两者有什么区别？让我们来了解一下。

语法声明：Sass 与 SCSS

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

考虑下面的示例，其中包含 Sass 与 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的使用

可以说最流行的前端框架 Bootstrap 是用 Sass 编写的。在版本 3 之前，Bootstrap 是用 LESS 编写的，但 Bootstrap 4 采用了 Sass 并提高了它的流行度。一些使用 Sass 的大公司是 – Zapier、Uber、Airbnb 和 Kickstarter。

LESS - 更精简的样式表

LESS 是“Leaner Stylesheets”的首字母缩写。它于 2009 年由 Alexis Sellier 发布，距 2006 年 Sass 首次推出三年后。虽然 Sass 是用 Ruby 编写的，但 LESS 是用 JavaScript 编写的。事实上，LESS 是一个 JavaScript 库，它通过混合、变量、嵌套和规则集循环扩展了原生 CSS 的功能。Sass 与 LESS 一直是一场激烈的辩论。毫不奇怪，LESS 是 Sass 最强大的竞争对手，拥有第二大用户群。然而，随着 Bootstrap 4 的推出，当 bootstrap 抛弃 LESS 而支持 Sass 时，LESS 的受欢迎程度已经减弱。LESS 相对于 Sass 的少数缺点之一是它不支持函数。与 Sass 不同，LESS 使用 @ 来声明变量，这可能会导致与 @media 和 @keyframes 混淆。然而，LESS 相对于 Sass 和 Stylus 或任何其他预处理器的一个主要优势是可以轻松地将其添加到您的项目中。您可以通过使用 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 的 使用 流行的 Bootstrap 框架直到第 4 版发布之前都是用 LESS 编写的。然而，另一个名为 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 扩展名。Stylus 在编写语法方面提供了很大的灵活性，支持原生 CSS 并允许省略括号冒号和分号。另请注意，Stylus 不使用 @ 或 $ 符号来定义变量。相反，Stylus 使用赋值运算符来指示变量声明。

像原生 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

Answer 4

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

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

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

Answer 5

而且这更少

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

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