sass 学习总结1

上周参加了sass学习的培训，现在来总结下自己所学到的知识，记录下来，以便之后查询。

1.sass编写环境的准备

1.1  安装ruby环境

安装方法可以参考：http://blog.csdn.net/sinat_34254650/article/details/50896199

1.2 sublime Text编辑器

安装sublime Text编辑后，需要安装Package Control 插件，安装插件的方法，可以在百度上找相关的文章，有很多方法，这里不细说了。

安装好Package Control 插件后，快捷键ctrl+shift+P，调出"命令面板"，查找install package（如下图），回车

进入后，查找sass 和sass build插件。

1.3 设置：在tools下的Build System里，将sass勾上，这样我们在编写sass文件时，按快捷键ctrl+B，就可以将style.scss编译成style.css。（我们的html文件里，只能调用.css样式表，而.scss文件是我们编写样式的工具）

2 开始编写

用sublime Text来练习，选择练习的页面模版是：http://bootstrap.evget.com/examples/offcanvas/index.html

2.1 html文件，在编辑器里编写html结构。

2.2 开始准备写sass

为了方便样式维护，我将reset部分和variables（变量）分开，分别命名为_reset.scss 和 _Variables.scss。

然后在style.scss里引入这两个文件

引入代码：

@import:"reset";
@import:"Variables";

在Variables.scss里把变量定义好后，就可以在style.scss里进行编写了。