首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Sass和SCSS之间的不同之处是什么?

Sass和SCSS之间的不同之处是什么?

作者头像
疯狂的技术宅
发布2019-03-27 17:22:50
8780
发布2019-03-27 17:22:50
举报
文章被收录于专栏:京程一灯京程一灯

Sass和SCSS之间的不同之处

这是2014年4月28日发布的文章的更新版本

我已经在(http://www.sitepoint.com/author/hgiraudel/) 里写了很多关于Sass,但有一些意见明确表示,并不是每个人都知道Sass所指的是什么。这里有一点清晰:

当我们在讨论Sass时,我们通常将预处理器和语言作为一个整体。我们常说,例如,“我们正在使用Sass”,或者“这是Sass mixin”。同时,Sass(预处理器)允许两种不同的语法:

  • Sass, also known as the indented syntax
  • SCSS, a CSS-like syntax

Sass的历史

最初,Sass是由Ruby开发人员设计和编写的另一个名为[Haml](http://haml.info/)的预处理程序的一部分。因此,Sass样式表使用的是不带括号、不含分号和严格缩进的Ruby类语法,像这样:

// Variable
!primary-color= hotpink

// Mixin
=border-radius(!radius)
  -webkit-border-radius= !radius
  -moz-border-radius= !radius
  border-radius= !radius

.my-element
  color= !primary-color
  width= 100%
  overflow= hidden

.my-other-element
  +border-radius(5px)

正如你所看到的,这与普通的CSS相比有很大的变化。即使你是一个Sass(预处理器)的用户,你可以看到这与我们通常的习惯是非常不同的。可变符号是“!”而不是“$”,分配符号是“=”而不是“:”。很奇怪。

但是,Sass看起来就像这样,直到3.0的版本在2010年5月问世,为Sassy CSS引入了一种名为SCSS的全新语法。

// Variable
$primary-color: hotpink;

// Mixin
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.my-element {
  color: $primary-color;
  width: 100%;
  overflow: hidden;
}

.my-other-element {
  @include border-radius(5px);
}

SCSS绝对比Sass更接近于CSS.话虽如此,Sass维护者也努力通过缩减语法将“!”(可变符号)和“=”(赋值符号)从SCSS移到“$”和“:”使两种语法更接近。 Now, when starting a new project, you may wonder which syntax you should use. Let me enlighten the path and explain the pros and cons of each syntax.

Sass缩进语法的优点

虽然这种语法可能看起来很奇怪,它有一些有趣的观点。首先,它是更短,更容易打字。没有大括号和分号,你不再需要所有的东西。更好。当单个字符“=”和“+”足够时不需要“@mixin”或者 “@include”。

另外Sass语法通过依靠缩减来执行清洁编码标准。因为一个错误的缩减可能会破坏整个“.sass”样式表,所以它确保编码始终保持干净且格式良好。有一种编写Sass代码的方法:好方法。

但要小心!在Sass中缩进means something。当缩进一个选择器时,这意味着它嵌套在上一个选择器中。例如:

.element-a
  color: hotpink

    .element-b
      float: left

… will output the following CSS:(将输出以下CSS)

.element-a {
  color: hotpink;
}

.element-a .element-b {
  float: left;
}

简单的事实推理将“.element-b”放在同一级的右边,意味着它是“.element-a”的孩子,改变了所得到的CSS。请小心你的缩进。

此外,我觉得基于语法的缩进将可能适合一个Ruby/Python团队而不是PHP/Java团队(虽然这是有争议的,但我乐意听到相反的意见。)

SCSS语法的优点

(对于启动器,它是完全兼容CSS。它意味着,你可以重命名一个“.scss”中的CSS文件并且它将just work。自SCSS发布以来,使SCSS与CSS完全兼容,一直是Sass的维护者的首要任务,这是在我看来很大的一件事。此外,他们试图坚持更接近于那些在将来可能成为一个有效的CSS语法(故@ directives)。

因为SCSS与CSS兼容,这意味着很少没有学习曲线。语法是已知的:毕竟,它只是有一些额外的CSS。当与没有经验的开发者合作时,这很重要:他们可能在一开始不了解什么是Sass的时候就能够快速开始编写。

此外,它更容易阅读,因为它实际上是有意义的。当你读“@mixin”时,你知道这是一个混合声明;当你看到“@include”时,你正在调用mixin。它没有任何快捷方式,一旦读出来,一切都是有意义的。

此外,Sass的大多数现有工具,插件和演示都是用SCSS语法开发的。随着时间的推移,这种语法主要是出于上述原因变得越来越突出并且被默认选择。

最后的想法

这个选择取决于你,但除非你有很好的理由使用缩减语法进行编码,否则我强烈建议使用SCSS胜过Sass.不仅仅在于它更简单,而且它更方便。

我曾尝试过缩减的语法,并且喜欢它。我喜欢它是因为短而且容易。在最后一刻我改变主意之前我实际上正将整个代码库移到Sass。我感谢我过去的自我,以阻止这一举动,因为我们一旦使用缩进语法,它将很难与我们的几个工具一起使用。

此外,请注意Sass永远不是大写字母,无论你是在谈论语言还是语法。同时,SCSS始终是大写字母。需要提醒?SassnotSASS.com可以挽救。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2017-08-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 京程一灯 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Sass的历史
  • Sass缩进语法的优点
  • SCSS语法的优点
  • 最后的想法
相关产品与服务
流计算 Oceanus
流计算 Oceanus 是大数据产品生态体系的实时化分析利器,是基于 Apache Flink 构建的企业级实时大数据分析平台,具备一站开发、无缝连接、亚秒延时、低廉成本、安全稳定等特点。流计算 Oceanus 以实现企业数据价值最大化为目标,加速企业实时化数字化的建设进程。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档