1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

什么是 Sass 其与SCSS区别是什么?

作者:用户 来源:互联网 时间:2016-08-03 19:50:50

css语言sass预处理语法扩展名

什么是 Sass 其与SCSS区别是什么? - 摘要: 本文讲的是什么是 Sass 其与SCSS区别是什么?, Sass 官网上是这样描述 Sass 的: Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的


Sass 官网上是这样描述 Sass 的:

Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。
Sass 能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。

Sass 前世今生

Sass 是最早的 CSS 预处理语言,有比 LESS 更为强大的功能,不过其一开始的缩进式语法(Sass 老版本语法,后面课程会详细介绍 )并不能被大众接受,不过由于其强大的功能和 Ruby on Rails 的大力推动,还是有很多开发者选择了 Sass。

Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,它诞生于2007年,是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML(一种缩进式 HTML 预编译器)而设计的,因此有着和 HTML 一样的缩进式风格。

为什么早期不如 LESS 普及?

虽然缩进式风格可以有效缩减代码量,强制规范编码风格,但它一方面并不为大多数程序接受,另一方面无法兼容已有的 CSS 代码。这也是 Sass 虽然出现得最早,但远不如 LESS 普及的原因。

Sass 和 SCSS 有什么区别?

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-stack: Helvetica, sans-serif;
$primary-color: #333;

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

编译出来的 CSS

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



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索css , 语言 , sass , 预处理 , 语法 扩展名 sass scss的区别、scss和sass区别、sass和scss的区别、scss sass区别、sass与scss的区别,以便于您获取更多的相关知识。

javascript-css预处理工具,哪个比较新?

...处理工具,哪个比较新? sass stylus scss 那个是最先进的? 这类产品更新太快了,我不知道应该学哪个 解决方案 sass吧,不过在windows环境下支持不好 解决方案二: ...

解读Bootstrap v4 sass设计_javascript技巧

首先关于bootstrap从v3的less转到v4的sass的十万个为什么,这里暂且不表(计划会另起一篇文章对比less,sass,postcss)。 一起走进bootstrap v4 sass 1、bootstrap的sass文件都放在scss目录,为什么名字是scss而不是sass呢?主要涉及到sass与scss...

从Sass过渡到PostCSS

...。 第一步先了解我使用Sass写的东西,需要知道我用了些什么功能,以确保找到一个替代的工具(PostCSS插件)。下面这个列表是我项目中用到的一些功能: 引入部分(partial imports) 变量(variables) 嵌套(nesting) 混合宏...

win10下配置webstorm自动编译SASS

...在当前a1.scss下生产a1.css文件 大功告成。4、Sass 和 SCSS 有什么区别。 Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss...

SASS学习记录

...凑或者说是读书笔记。但是今天还是拾起笔来了,虽然没什么干货,但是对自己而言,总结的过程可以加深对零碎知识的了解,将来自己如果忘记某些知识,可以迅速查找并捡起来;如果以后忘了自己的当初的目标,也能回头看...

前三篇
后三篇