sass初学练习一

       看了几天sass相关文档教程，也安装好了,准备练练手啦。大家有没有想想为什么要用sass来写css呢？因为css的代码重复利用少，管理起来不方便，而用sass来写css可以代码重用，方便快捷修改。比如要改整站的某种颜色，只需要改一个变量值即可。至少sass还有什么优点，我们一起练习写写就知道了。刚开始练习，就找个简单的页面来一起写写了。光看没用的，大家也要动手写起来。就以bootstrap最简单的gulpjs页面为例来写好了，先不管响应式效果，就做写个常规页面。

1.  选择支持高亮的sass编辑工具。目前我电脑上装了两种，一种是WebStorm，一种是Sublime Text 3。其它的工具应该也可以支持，我没有多研究，平时项目中用这两种工具比较多。大家要是还有什么好用的工具，可以提出来。WebStorm 没装什么插件也支持，只是比较占电脑内存;Sublime Text 小巧轻量，安装后，装上sass和 sass build插件绰绰有余。
2. 建立项目。我的项目结构路径如下图：css下面就是test.scss文件.sass文件的后缀名就.scss哦。
   
   
3. 动手写html结构。不按他网站的结构代码，我们自己写即可。以下是我写的html结构，没有任何样式的:
4. 开始定义sass的变量。打开sass文件,动手写起来.先写好全局的css reset。不知道css reset的同学，自行百度，这里不再赘述 。
   然后再来写全局的字体，字体大小，颜色等等。sass是以$开头的，如下:
5. 调用定义好的变量。比如body要定义全局的字体大小，颜色等等。
   
   
6. 编译sass文件。当然直接调用test.scss浏览器是没法解析的。所以我们还是要先编译一下。打开电脑的开始--运行--cmd，进入到项目的路径，找到sass文件。不喜欢用命令的话，可以用网上的编译工具。这里推荐koala&codekit。我个人比较喜欢用命令，感觉挺方便的。忘记了，不会了，就用sass -h 帮助一下，就可以出来一大堆。
   .
   编译我们只需要 --style就行了。有四个参数：nested (default)默认;compact; compressed; expanded 。其中compressed是压缩，compact是紧凑的，其它两个参数试了下，一样的效果，css代码编译出来都是一个属性占一行。
   
   sass命令写法如下：sass -t 参数(nested)   源sass文件名  编译生成的css文件名
   

   sass -t  nested  test.scss  test.css

   一编译CSS下面就多了几个文件，只需要看test.css文件就行。.map的是调试的，cache那个当然是缓存。
   
   编译代码效果如下，一个属性一行显示的。
   
   
   压缩版。
   

   sass -t  compressed  test.scss  test.css
   

   再来个普通紧凑型，平时项目中也是这样写的，不过编译出来不知道为什么都空一行。求解！！
   其它效果大家自己试吧，在这里就不一一练习了。
   装了sublime Text并装了sass bulid插件，只需要选好编译类型，按ctrl+b就可以编译了。前提是一定要有ruby的环境，编码务必是UTF-8;
   
   
   
7. Sass 监视文件的改动并更新 CSS .watch ，语法如下： sass --watch 源scss文件:编译生成的css文件 ，在scss文件里做然后修改，保存后，css文件里就可以立马看到效果。按ctrl+c 終止。
   

   sass --watch test.scss:test.css

   
   
   
   
   
8. HTML文件里调用css。link调用就行了。预览下，样式是解析出来了的。
   
   就像平时写css一样，我们接着往下写。
9. 浏览页面，大功告成。所有的sass代码在这里了。是不是少了很多啦。
   
   
   
   

我所参考学习的sass文章为：w3cpuls sass语法、sass入门。
PS:个人笔记原创，请务转载，转载请表明出处，只供学习，有什么不足之处，欢迎大家指正，谢谢！