说是教程还真是有点不敢当,只是将自己今天上手sass的流程给记录下来,给一些和我一样的小白菜一点参考而已,照着走一遍应该就会对sass有基本的认识了,也请大神们不吝赐教。
很久之前同事做了一个关于sass的分享,由于一直有项目在手,没有时间去了解,以至于拖到了现在,写完移动端的总结之后就没有什么事干了,今天无聊了一上午,决定花4天时间,也就是过年前还没放假的这几天来研究sass(小白菜说研究好害羞呀~~),毕竟,我还是个从石器时代来的人,是该进化一点点了。
今天在网上查了一下关于sass的资料,发现大多数教程直接就开始写sass的语法了,语法都快看烂了,可能当时脑子进水了,一直在纠结怎么建sass文件,或者说是,建好的sass文件应该放在哪里比较合适。只有我这种白菜才到处百度如何新建一个sass文件,不过我还是相信,只要有一个我,就会有千千万万个我,不知道的人应该还是有的,那么,就开始吧。
1、sass是什么
Sass 是Syntactically Awesome Stylesheete Sass的缩写,它是一种CSS预处理器(CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题),它允许我们使用变量、简单的逻辑程序、函数等在编程语言中的一些基本特性,可以让我们的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护。
Sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号;另一种就是我们这里使用的scss 文件,这种和我们平时写的 css 文件格式差不多,使用大括号和分号,官方建议使用后缀名为 scss 的文件,以避免 sass 后缀名的严格格式要求报错。
2、sass安装
很久以前我准备过要开始玩sass,所以环境很早就搭好了的,只是刚搭完就一直没空了,所以现在我就不按流程一步一步的贴出来了,只是提醒一下大家,sass是ruby语言写的,所以在安装sass之前需要先安装ruby,但是二者的语法没有任何关系,不懂ruby也可以的,我也不懂。附上sass安装链接:http://www.w3cplus.com/sassguide/install.html
3、sass使用
sass文件就是普通的文本文件,里面可以直接使用CSS语法和一些简单的编程,文件后缀名是.scss。
1)新建文件。我这里html里面引用的是scss,在浏览器中打开也可以看到.scss文件,使用方式和CSS一样。
<link rel="stylesheet" type="text/css" href="style.scss">
2)配置。
在命令行输入:sass --help,我们就能够查询到sass命令的常用配置选项。这里我们只介绍两种:
--style NAME:Output style. Can be nested (default), compact, compressed, or expanded.表示解析后的CSS是什么格式,有4种取值。
--watch Watch files or directories for changes.The location of the generated CSS can be set using a colon:
sass --watch input.sass:output.css
sass --watch input-dir:output-dir 监听命令,可以监听文件或者是文件夹,一旦源文件有变动,就会自动生成编译后的版本。按Ctrl + C可以停止监听。
3)编译。
将.scss文件编译成css文件用在项目中,.scss文件编译的时候使用的是ruby的环境,容易出现问题,在命令行输入sass命令:sass style.scss style.css,不出意外的话会报错:
此处附上解决办法:http://www.vcerror.com/?p=1835 找到ruby的安装目录,找到里面的sass模块:D:\soft\Ruby\install\Ruby23-x64\lib\ruby\gems\2.3.0\gems\sass-3.4.22\lib\sass,打开文件engine.rb,在所有的require模块后面加上一句Encoding.default_external = Encoding.find('utf-8')代码,重新编译.scss文件就不会报错了,重新编译后文件夹中多了以下文件:
编译生成的CSS文件如下:
@charset "UTF-8";
/*
*用CSS的标准注释
*开启sass之旅
*这是一段会被转译出来的注释
*/
body {
padding: 5px;
} div {
margin-top: 10px;
} /*# sourceMappingURL=style.css.map */
编译选项有四种:
nested:嵌套缩进的css代码,它是默认值。(我们上面生成的CSS文件就是这种嵌套缩进的代码)
expanded:没有缩进的、扩展的css代码。(这一种编译生成的代码风格是我最能够接受的,所以后面我会把它变成这种风格)
compact:简洁格式的css代码。
compressed:压缩后的css代码。(一般用于生产环境)
准备工作就算是完了,假装算是入了个门吧