简书原文

https://www.jianshu.com/p/e82c27aa05c7

前言

该中文手册是我在Sass中文文档的基础上编辑的,或者也可以理解为就是Sass中文文档的翻版。之所以有这篇文章的原因还是在于Sass中文文档并没有全部翻译成中文,这样每次我查找文档的时候又需要对其再理解一次,与其如此,不如我自己完善这份文档,并且加上一些我自己的理解或者注解,这样以后我查阅的时候可以更好的使用该份文档。同时,我将这篇文章公开出来,当然,如果喜欢看原文的可以去Sass官网看中文文档,这完全没有问题,不可否认,那才是正版,我只是希望我写的东西能帮助到读者,仅此而已。

考虑到写成一篇整体篇幅太大,因此将中文手册分成两篇,这篇只是大概对Sass进行介绍,下篇才是具体的语法。

大纲

1、什么是Sass?
2、为什么使用Sass?
3、Sass和SCSS的区别和联系
4、Sass的安装和使用
5、Sass的输出样式

1、什么是Sass?

Sass (Syntactically Awesome StyleSheets)
CSS(Cascading Style Sheets)(层叠样式表)
Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能, 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好, 同时也让你能够快速开始小型项目, 特别是在搭配 Compass 样式库一同使用时。

个人理解:
SASS的出现其实就是换一种方式写CSS,让CSS的编写过程更倾向于一种工程而不是仅仅是样式表,或者正如其名字一样,很棒的具有语法的样式表。

2、为什么使用Sass?

首先,Sass本质上其实就是CSS,只不过使用的方式不同于普通css罢了;其次,Sass在 CSS 语言基础上添加了扩展功能(比如变量、嵌套 (nesting)、混合 (mixin)等等)。
总而言之,Sass在css的基础上,让css变得可读写性更好,使用更加方便,对项目的工程化更加友好。

3、Sass和SCSS的区别和联系

Sass 有两种语法。
第一种被称为 SCSS (Sassy CSS),是一个 CSS3 语法的扩充版本。
也就是说,所有符合 CSS3 语法的样式表也都是具有相同语法意义的 SCSS 文件。 另外,SCSS 理解大多数 CSS hacks 以及浏览器专属语法,例如IE 古老的 filter 语法。 这种语种语法的样式表文件需要以 .scss 扩展名。

第二种比较老的语法成为缩排语法(或者就称为 "Sass"), 提供了一种更简洁的 CSS 书写方式。
它不使用花括号,而是通过缩排的方式来表达选择符的嵌套层级,I 而且也不使用分号,而是用换行符来分隔属性。 很多人认为这种格式比 SCSS 更容易阅读,书写也更快速。使用此种语法的样式表文件需要以 .sass 作为扩展名。

任一语法都可以导入另一种语法撰写的文件中。 只要使用 sass-convert 命令行工具,就可以将一种语法转换为另一种语法:

# 将 Sass 转换为 SCSS
$ sass-convert style.sass style.scss # 将 SCSS 转换为 Sass
$ sass-convert style.scss style.sass

4、Sass的安装和使用

Sass的安装我这里就不多做介绍了,因为不同的情况不同的项目乃至不同的框架引入的方式各有不同。
当然这里还是要说一个特别好用的网站:Sass的实验室。这是Sass提供的网页,通过这个你就可以不需要项目的前提下实验各种Sass的语法,并且对比Sass以及由Sass编译后的css.

5、Sass的输出样式

虽然Sass输出的默认CSS样式非常好,并且反映了文档的结构,但是品味和需求是不同的,所以Sass支持其他几种样式。
通过设置:style选项或使用—style命令行标志,Sass允许您在四种不同的输出样式之间进行选择。

5.1、嵌套

嵌套样式是默认的Sass样式,因为它反映了CSS样式的结构和样式化的HTML文档。
嵌套样式在查看大型CSS文件时非常有用:它允许您轻松掌握文件的结构,而无需实际读取任何内容。
每个属性都有自己的行,但是缩进不是常量。每个规则都是根据嵌套的深度缩进的。例如:

#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; } .huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline; }

5.2、展开

展开是一种更典型的人工CSS样式,每个属性和规则占用一行。属性在规则中是缩进的,但是规则没有以任何特殊方式缩进。例如:

#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
} .huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline;
}

5.3、紧凑

紧凑样式比嵌套或展开样式占用更少的空间。它还将焦点更多地吸引到选择器,而不是它们的属性。每个CSS规则只占用一行,其中定义了该行上的每个属性。嵌套规则彼此相邻,没有换行符,而单独的规则组之间有换行符。例如:

#main { color: #fff; background-color: #000; }
#main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

5.4、压缩

压缩样式占用尽可能少的空间,除了分隔选择器和文件末尾的换行符所必需的空白之外,没有其他空白。它还包括一些其他的小压缩,例如为颜色选择最小的表示。这并不是为了让人读懂。例如:

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

  

Sass(SCSS)中文手册——入门的更多相关文章

  1. pgpool-II 4.3 中文手册 - 入门教程

    本章解释了如何开始使用 Pgpool-II. 安装 在本节中,我们假设您已经安装了 Pgpool-II 与 PostgreSQL 集群. 你的第一个复制(Replication) 在本节中,我们将解释 ...

  2. wxPython中文教程入门实例

    这篇文章主要为大家分享下python编程中有关wxPython的中文教程,分享一些wxPython入门实例,有需要的朋友参考下     wxPython中文教程入门实例 wx.Window 是一个基类 ...

  3. 前端利器:SASS基础与Compass入门

    SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让css看起来更像是一门语言,这种特性也被称为“cs ...

  4. [转]前端利器:SASS基础与Compass入门

    [转]前端利器:SASS基础与Compass入门 SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让 ...

  5. CSS预处理器 Less Sass,Scss 编译 Sourcemap调试

    sass.less和stylus的安装使用和入门实践     SASS用法指南    Sass Basics CSS预处理器 css preprocessor 预处理器即preprocessor,预处 ...

  6. PHP HTML DOM 解析器 中文手册

    简单的PHP HTML DOM 解析器 中文手册 | PHP Simple HTML DOM Parser中文手册 目录 快速入门 如何创建HTML DOM 对象? 如何查找HTML元素? 如何访问H ...

  7. Flask 中文手册 0.10 文档

    Flask 中文手册 0.10 文档 欢迎使用 Flask 欢迎阅读 Flask 文档. 本文档分为几个部分.我推荐您先从 安装 开始,之后再浏览 快速入门 章节. 教程 比快速入门更详细地介绍了如何 ...

  8. TensorFlow开发者证书 中文手册

    经过一个月的准备,终于通过了TensorFlow的开发者认证,由于官方的中文文档较少,为了方便大家了解这个考试,同时分享自己的备考经验,让大家少踩坑,我整理并制作了这个中文手册,请大家多多指正,有任何 ...

  9. sass/scss 和 less的区别

    一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...

随机推荐

  1. spring set注入

    上篇文章说到了构造器注入.可是有时候构造器注入并非非常好用,如今来看下set注入. 构造器注入博客地址:http://blog.csdn.net/luckey_zh/article/details/4 ...

  2. Json技术

    JSON语法是一种用于传输和生成数据的协定,很类似于C家族的语言,所以很容易被C家族的语言所解析.对象:对象包含再{}之间属性:采用Key-Value对来表示.属性之间使用逗号分开.  string ...

  3. jquery20--animate() : 运动的方法

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 洛谷P1722 矩阵 II

    题目背景 usqwedf 改编系列题. 题目描述 如果你在百忙之中抽空看题,请自动跳到第六行. 众所周知,在中国古代算筹中,红为正,黑为负…… 给定一个1*(2n)的矩阵(usqwedf:这不是一个2 ...

  5. 搜寻Linux软件实用指南

    搜寻Linux软件实用指南  对于初学者来说,仅仅安装好Linux系统还是不够的,还需要安装大量的应用软件.许多下载网站都提供了诸如装机必备软件的下载,分门别类提供经典的工具软件下载.本文主要针对初学 ...

  6. 2018 java实训总结(时间戳&&主键)

    java实训题目:源管理系统. 答辩的时候被老师怼了以下几个的地方: 1.主键改变了 2.没时间戳却说自己的程序里有先后(这就是老师迂腐了,主键自增可以间接反馈出他加入的早晚,即使主键做出了改变但只是 ...

  7. GetInvocationList 委托链表

    最近发现C#程序初始化时在构造函数中,偶尔出现事件注册不成功.后查资料发现有GetInvocationList 这么一个获取类中的委托链表的函数, 使用方法如下: 1.在需委托的类(Class1)中增 ...

  8. ReactNavtive框架教程(4)

    开头的响应码, 这些代码都很实用. 比如202 和 200表示返回一个推荐位置的列表.当完毕这个实例后.你能够尝试处理这些返回码.并将列表提供给用户选择. 保存,返回模拟器,按下Cmd+R ,然后搜索 ...

  9. C# 解决ListView控件显示数据出现闪屏的问题

    一.发现问题 如果发送数据过快的情况下,ListVies滚屏显示数据时会显示闪屏,如下所示现象: 二.解决问题 根据出现闪屏的情况,在网上查了资料要使用双缓存的办法来处理.其原理是数据在缓存区中进行处 ...

  10. 洛谷 P2504 [HAOI2006]聪明的猴子

    洛谷 P2504 [HAOI2006]聪明的猴子 题目描述 在一个热带雨林中生存着一群猴子,它们以树上的果子为生.昨天下了一场大雨,现在雨过天晴,但整个雨林的地表还是被大水淹没着,部分植物的树冠露在水 ...