CSS和SCSS的区别是什么？

我非常了解CSS，但对Sass感到困惑。SCSS与CSS有何不同？如果我使用SCSS而不是CSS，效果会一样吗？

214065 次浏览
小开

__，ABC0是任何浏览器都能理解的样式语言，用于设置网页样式。

SCSS是用于SASS的特殊类型的文件，该程序是用Ruby编写的，它为浏览器汇编CSS样式表，并且对于信息，SASS向CSS添加了许多附加功能，如变量、嵌套等，这可以使编写CSS更容易和更快。
SCSS文件由运行Web应用程序的服务器处理，以输出您的浏览器可以理解的传统CSS。

小开
最佳答案

除伊德里斯外，回答：

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
小开

而这个更少。

@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

所有的答案都很好，但问题与答案略有不同。

关于萨斯。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的基本功能。它帮助我们使用复杂的逻辑语法，如变量、函数、混合、代码嵌套和继承等等，增强您的普通CSS.通过使用CSS预处理器，您可以无缝地自动执行琐碎的任务，构建可重用的代码片段，避免代码重复和膨胀，并编写组织良好且易于阅读的嵌套代码块。 但是，浏览器只能理解原生的普通CSS代码，无法解释CSS预处理器语法。因此，需要首先将复杂且高级的预处理器语法编译为原生CSS语法，然后由浏览器进行解释，以避免跨浏览器兼容性问题。虽然不同的预处理器有自己独特的语法，但最终它们都会被编译成相同的原生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预处理器的佼佼者。

Sass可以使用Sass或SCSS以两种语法编写。这两者之间有什么区别？让我们一探究竟。

语法声明：Sass与SCSS

  • SCSS代表Sassy CSS.与SASS不同，SCSS不基于 缩进.
  • .Sass扩展名用作Sass的原始语法，而SCSS 提供带有.scss扩展名的较新语法。
  • 与Sass不同，SCSS有花括号和分号，就像CSS一样。
    • 与SCSS
  • 相反，SASS很难读懂，因为它相当离经叛道 来自CSS.这就是为什么SCSS更推荐使用Sass语法 更容易阅读，同时与原生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的用法

可以说，最流行的前端框架引导程序是用Sass编写的。直到版本3，Bootstrap都是用较少的代码编写的，但Bootstrap 4采用了Sass，并提高了其受欢迎程度。使用Sass的大公司有Zapier、Uber、Airbnb和Kickstarter.

更精简的样式表

LESS是“更精简的样式表”的首字母缩写。它于2009年由Alexis Sellier发布，距离2006年首次推出Sass已有3年。Sass是用Ruby编写的，而Less是用JavaScript编写的。事实上，LESS是一个JavaScript库，它通过混合、变量、嵌套和规则集循环扩展了原生普通CSS的功能。Sass vs Less一直是一场激烈的争论。毫不奇怪，Less是Sass最强大的竞争对手，拥有第二大用户群。然而，随着Bootstrap 4的推出，Bootstrap不再支持Sass，Less的受欢迎程度也有所下降。Less Over Sass的几个缺点之一是它不支持函数。与Sass不同，Less使用@来声明变量，这可能会导致与@media和@keyframes混淆。但是，与Sass和Stylus或任何其他预处理器相比，LESS的一个关键优势是易于将其添加到项目中。您可以通过使用NPM或合并less.JS文件来实现这一点。 语法声明：less 使用.less扩展名。LESS的语法与SCSS非常相似，除了在声明变量时，LESS使用@而不是$sign. 

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


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


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

更少的使用 在版本4发布之前，流行的引导程序框架是用LESS编写的。然而，另一个称为语义UI的流行框架仍然是用LESS编写的。使用Sass的大公司包括Indiegogo、Patreon和微信

手写笔

手写笔于2010年由前Node JS开发人员TJ Holowaychuk推出，距离Sass发布近4年，距离Less发布近1年。手写笔是由节点JS编写的，非常适合JS堆栈。手写笔深受Sass的逻辑能力和Less的简单性的影响。尽管Stylus在Node JS开发人员中仍然很受欢迎，但它并没有为自己赢得相当大的份额。手写笔相对于Sass或更小的手写笔的一个优势是，它配备了极其强大的内置功能，能够处理繁重的计算。

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

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

Sass是一种语言，与编辑原始.css相比，它提供的功能可以更轻松地处理复杂的样式。这种特性的一个例子是允许定义可以在不同样式中重用的变量。

该语言有两种可供选择的语法：

  • 类似JSON的语法，保存在以.scss结尾的文件中
  • 类似YAML的语法，保存在以.sass结尾的文件中

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

有关详细信息，请参阅https：//sass-lang.com/。


提交答案