css预处理器sass使用教程(多图预警)

       css预处理器赋予了css动态语言的特性，如变量、函数、运算、继承、嵌套等，有助于更好地组织管理样式文件，以及更高效地开发项目。css预处理器可以更方便的维护和管理css代码，让整个网页变得更加灵活可变。对于预处理器，广泛使用的有less和sass。在这不做对比，2者大同小异，sass基于Ruby语言编写，所以编译sass文件需要Ruby环境。我们使用sass并不需要过多了解Ruby语言，只需要安装Ruby环境即可，而less则主要是运行在node环境下，功能语法有类似之处。本文主要介绍Ruby下sass的使用。

Ruby下载与安装：

1、登录http://rubyinstaller.org/

2、点击download后到这个页面，64位windows电脑下载箭头所指的版本即可

3、完了直接安装

点击finish后，就算安装完了，我们还需要去命令行下检测是否安装成功，注意的是ruby的命令行而不是cmd下的命令行。

 打开后进入命令行：

紧接着在ruby下安装sass：输入指令gem install sass

输入sass -v，后出现版本号，就算安装成功了。

好了，下载安装完成，环境算是搭建好了，关于语法跟相关指令下面介绍。

 sass的使用。

为了让更多人能够真正学会使用sass，我从新建文件开始，一步一步演示。

1、我在桌面建了一个名叫sasstest的文件夹，里面新建了一个sass.scss后缀的文件。（新建文本文档后，把名字后缀改成sass.scss）

这里说明一下，为什么sass的后缀是scss？其实，sass有两种语法形式。

首先是scss，也就是我们这个后缀形式的语法。这种格式在 CSS3 语法的基础上进行扩展，这意味着每个CSS样式表是一个同等的SCSS文件。此外，SCSS 也支持大多数 CSS hacks 写法 以及浏览器专属前缀语法，这种语法的样式表文件需要以 .scss 作为拓展名。

另一种，也是最早的语法，被称为缩进语法。它提供了一种更加简介的方式来书写CSS。它使用缩进而不是花括号来表示选择器的嵌套，用换行而不是分号来分隔属性，一些人认为这样做比 SCSS 更容易阅读，书写也更快速。缩排语法具有 Sass 的所有特色功能， 虽然有些语法上稍有差异。 使用此种语法的样式表文件需要以 .sass 作为扩展名。

其实不管哪种语法，任何一种语法的文件可以直接导入 到另一种语法的文件中使用，同时还可以通过sass-convert 命令行工具，进行互相转换。

我感觉不用纠结这些差异，使用一种即可，我习惯第一种，所以本文一直使用scss的语法形式。

2、第二步当然就是打开sass.scss啦。用什么编辑器都行，本文使用sublime text。

要想运行sass，就要使用到指令了，好了，先别管语法，在sass.scss中敲上几行，看能不能编译成css，提前了解下指令。

敲上去之后呢，查看新建的文件夹，你会发现什么都没有，还是老样

当然啦，你还没监测运行你的sass代码怎么会有变化呢？还记得ruby的命令行窗口吗？是的，需要在那里敲上运行的指令，sass才能生成css代码。

运行sass文件：sass input.scss output.css (左边代表sass输入文件，右边是css输出文件)

sass监视sass文件的指令有：

所谓监视，就是每当sass文件发生改变时，css文件随之生成。这点与运行不同，运行时一次性的，监视是持续性的。

监视某一个sass文件：sass --watch input.scss:output.css(左边代表sass输入文件，右边是css输出文件)

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：css预处理器sass使用教程(多图预警)

关键词：CSS