Question

我非常了解CSS，但对Sass很困惑。 SCSS与CSS有何不同，如果我使用SCSS代替CSS，它的工作方式是否相同？

Answer 1

除了 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

然而，在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预处理器是用于通过其自己的脚本语言扩展默认普通CSS的基本功能的工具。它可以帮助我们使用复杂的逻辑语法，例如–变量，函数，mixin，代码嵌套和继承等，从而为您的原始CSS增添了力量。通过使用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;

Sass的使用

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

少-精简样式表

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的使用 直到第4版发布时，流行的Bootstrap框架都是用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的优点之一是它具有极为强大的内置功能，并且能够处理大量计算。

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

手写笔语法类似于原生CSS

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

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

OR

不带花括号的STYLUS语法

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

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

OR

手写笔语法，没有冒号和中子

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;
 }
}

Answer 6

Sass是一种语言，与编辑原始.css相比，它提供的功能使其更易于处理复杂的样式。此类功能的一个示例是允许定义可以以不同样式重复使用的变量。

该语言有两种替代语法：

类似于JSON的语法，该语法保留在以.scss结尾的文件中
类似于YAML的语法，该语法保留在以.sass结尾的文件中

这两个文件都必须编译为浏览器可以识别的.css文件。

有关更多信息，请参见https://sass-lang.com/。

CSS和SCSS有什么区别？

6 个答案:

CSS

SCSS

SASS