include调用 html Sass和Compass学习笔记系列之Sass

最近在慕课网学习Sass和Compass，学习链接地址：https://www.imooc.com/learn/364，现在整理笔记如下：

一、使用Sass和Compass的优点：

a.使用Sass和Compass可以写出更优秀的CSS。

b.解决CSS编程过程中的痛点问题，例如精灵图合图等。

c.有效地组织样式，图片，字体等项目元素。

二、Sass简介

1.Sass是为了让我们写出更高效的可维护性的CSS代码。

2.Sass的语法：

使用缩进式语法：.sass作为文件的扩展名，这种语法是：对空格敏感，所以选择器下面的属性有缩进，并且不适用花括号，每个属性之间通过换行分隔，而不是分号，这是一种类Ruby的语法。include调用 html

Sass在3.0版本引入了.scss的语法，使用.scss作为文件的扩展名，和css语法一样。

注：不能在一个文件中使用两种语法，可以在一个项目下用两种不同的语法的文件。

三、Sass安装

因为Sass引擎使用Ruby写的，所以我们需要安装Ruby的运行环境。Ruby的官网地址是：，rvm (Ruby Version Manager)安装管理协同多个Ruby环境变得简单的命令行工具。

mac电脑自带ruby环境，但是版本比较老，建议升级一下，推荐安装ruby的管理工具rvm，管理各个版本的ruby（官网：rvm.io）。但是安装rvm需要安装gpg，这个我目前还没有找到正确的安装gpg的方法（在win10环境下），所以这部分暂时搁置，以后补充。

下面我先介绍关于rvm的一些命令行的指令含义。

下面介绍怎样在windows环境下安装ruby环境。

1.首先进入Ruby官网，点击Download，选择RubyInstaller（Windows），点击进去，根据自己的电脑，选择合适的版本（32位还是64位），下载合适的程序包。

2.下载好了之后直接点击安装，点击下一步，选择“I accept the license”，点击下一步。

3.选择一个安装目录，因为我们要在命令行里面使用ruby，所以把ruby可运行文件加载到我们的system path里，也就是勾选“Add ruby executables to your PATH”，然后点击install安装。点击finish。

4.进入控制台，输入ruby -v打印出ruby的版本，说明安装成功。

下面介绍gem。

gem是ruby的包管理工具，类似于npm。安装好了ruby，也就安装好了gem，相当于安装好了node，npm也就安装好了一样。

正式使用之前，需要先修改一下ruby软件包的sources。由于国内网络的原因，导致rubygems.org放在亚马逊的资源文件经常间歇性的连接失败，所有我们更换成国内淘宝镜像提供的ruby sources。命令如下：

安装Sass和Compass都是根据gem进行安装。以下就是gem的一些常用指令：

我们使用命令gem install sass安装Sass，安装好了之后，使用命令sass -v查看Sass是否安装完毕。

新建一个目录，命名为“learn-sass-cli”，在这个目录下，新建一个文件main.scss。在这个文件里随便写一个常用的代码。例如：*{margin:0;padding:0}

然后我们根据命令切入到目录为learn-sass-cli的下面，在控制台输入以下命令。include调用 html

执行完上面的命令，在当前文件夹多出main.css文件，main.css.map文件以及.sass-cache。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/tongxinshuyu/article-55067-1.html