Sass 和 SCSS 有什么区别?

SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:

  1. 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
  2. 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

先来看一个示例:

Sass 语法:

$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量

body
  font: 100% $font-stack
  color: $primary-color

SCSS 语法:

$font-stark Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

编译出来的 CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

由于 SCSS 是 CSS 的扩展,因此,所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作。也就是说,对于一个 Sass 用户,只需要理解 Sass 扩展部分如何工作的,就能完全理解 SCSS。大部分扩展,例如变量、parent references 和 指令都是一致的;唯一不同的是,SCSS 需要使用分号和花括号而不是换行和缩进。 例如,以下这段简单的 Sass 代码:

#sidebar
  width: 30%
  background-color: #faa

只需添加花括号和分号就能转换为 SCSS 语法:

#sidebar {
  width: 30%;
  background-color: #faa;
}

另外,SCSS 对空白符号不敏感。上面的代码也可以书写成下面的样子:

#sidebar {width: 30%; background-color: #faa}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏跟着阿笨一起玩NET

C#后台调用前台javascript的五种方法

281
来自专栏bluesummer

StackExchange.Redis学习笔记(二) Redis查询 五种数据类型的应用

ConnectionMultiplexer ConnectionMultiplexer 是StackExchange.Redis的核心对象,用这个类的实例来进行...

3139
来自专栏技术博客

ExtJs四(ExtJs MVC登录窗口的调试)

继上一节中实现了验证码http://www.cnblogs.com/aehyok/archive/2013/04/19/3030212.html,现在我们可以进...

752
来自专栏GreenLeaves

Web API系列之三 基本功能实现

Web API系列之二讲解了如何搭建一个WebApi的基架,本文主要在其基础之上实现基本的功能.下面开始逐步操作: 一、配置WebApi的路由-用于配置外部如何...

1965
来自专栏张高兴的博客

张高兴的 Windows 10 IoT 开发笔记:无线收发芯片 nRF24L01

1022
来自专栏大内老A

ASP.NET Core的配置(1):读取配置信息

提到“配置”二字,我想绝大部分.NET开发人员脑海中会立马浮现出两个特殊文件的身影,那就是我们再熟悉不过的app.config和web.config,多年以来我...

1998
来自专栏大内老A

ASP.NET Process Model之二:ASP.NET Http Runtime Pipeline - Part II

二、ASP.NET Runtime Pipeline(续ASP.NET Http Runtime Pipeline - Part I) 现在我们真正进入ASP....

1868
来自专栏林德熙的博客

WPF 如何在绑定失败异常

在开发 WPF 程序,虽然 xaml 很好用,但是经常会出现小伙伴把绑定写错了。因为默认的 VisualStudio 是没有自动提示,这时很容易复制粘贴写出一个...

1391
来自专栏码农阿宇

在.Net Core中使用MongoDB的入门教程(二)

在上一篇文章中,讲到了MongoDB在导入驱动、MongoDB的连接,数据的插入等。 在.Net Core中使用MongoDB的入门教程(一) 本篇文章将接...

2829
来自专栏菩提树下的杨过

Asp.Net4.0/VS2010新变化(4):SEO的改进

asp.net4.0的webform中,对于Page对象新增加了二个属性:MetaKeywords,MetaDescription  ? 后端代码上,写法也更简...

1745

扫码关注云+社区