SASS教程
一、ruby安装
因为sass依赖于ruby环境，所以装sass之前先确认装了ruby。
ruby官网地址：http://rubyinstaller.org/downloads
<code class="hljs bash has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">ruby -v <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">#查看当前系统的ruby版本信息，由此也可以判断当前系统是否安装了ruby环境</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
傻瓜式安装，在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境。
二、sass安装
在Win环境下，可以直接运行 cmd 命令，进入CMD命令行。
然后直接在命令行中输入
<code class="hljs cmake has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">gem <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">install</span> sass</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
按回车键确认，等待一段时间就会提示你sass安装成功。最近因为墙的比较厉害，如果你没有安装成功，那么请参考下面的淘宝的RubyGems镜像安装sass，如果成功则忽略。
三、淘宝RubyGems镜像安装 sass
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">$ gem sources --remove https://rubygems<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.org</span>/ $ gem sources -a https://ruby<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.taobao</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.org</span>/ $ gem sources -l *** CURRENT SOURCES *** <span class="hljs-label" style="box-sizing: border-box;">https:</span>//ruby<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.taobao</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.org</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;"># 请确保只有 ruby.taobao.org</span> </code><h2><code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">$ gem install sass</code></h2><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>
命令行编译
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#单文件转换命令</span> sass style<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.scss</span> style<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.css</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#单文件监听命令</span> sass --watch style<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.scss</span>:style<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.css</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#文件夹监听命令</span> sass --watch sassFileDirectory:cssFileDirectory</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>
Scss 转Sass
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">$ sass-convert main<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.scss</span> main<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.sass</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
宿主文件：
主要文件。
如：
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> screen<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.scss</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#宿主文件</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
局部文件：
对于不须要编译的文件命名时，用_下划线进行命名。
如:
<code class="hljs ruby has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">_variables.scss <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">#变量申明文件</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">#在宿主文件中引入时，可以写成:</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">@import</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"variables"</span>; </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>
@import “text.scss”; 注意，在sass文件中，@import 非css文件中的@import 文件指令，sass已经对@import 进行了重新定义其功能。其意思为：合并并输出到css文件中，可以用在文档的任何地方。
使用css原生的@import 时，须满足以下4个条件，即为原生的@import
1、当@import 后面是跟着.css结尾的时候。
2、当@import 后面跟的是”http://”字符串开头的时候。
3、当@import 后面跟的是一个”url()”函数的时候。
4、当@import 后面跟的是一个media queries 的时候，如: @import “var” projection tv;
SASS规则：
1、当没有文件后缀的时候，sass会添加scss或sass后缀。
2、同一目录下，局部文件和非局部文件不能重名。
SASS引入多个文件(.scss或.sass)
<code class="hljs css has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-at_rule" style="box-sizing: border-box;">@<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"test1"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"test2"</span></span>;</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
SASS注释语法：
块注释： /**/
行注释： //
COMPASS教程
四、安装compass
compass为何物？意为：sass样式框架！
compass官网：
http://www.compass-style.org/
<code class="hljs ruby has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ </span>gem install compass</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
命令说明
<code class="hljs css has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">compass</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">create</span> 创建项目名称 按须编译 <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">compass</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">compile</span> <span class="hljs-attr_selector" style="color: rgb(0, 136, 0); box-sizing: border-box;">[项目路径]</span> 监听编译 <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">compass</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">watch</span> <span class="hljs-attr_selector" style="color: rgb(0, 136, 0); box-sizing: border-box;">[项目路径]</span> 如不写后面的项目路径，则会监听整个项目文件的变化，进行实时编译 停止监听文件变化：<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">Ctrl</span> + <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">C</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul>
目录结构
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">config<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.rg</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#项目配置说明文件</span> sass <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#sass文件存放目录</span> stylesheets <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#css编译存放目录</span> javascripts <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#javascript文件存放目录</span> images <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#images图片存放目录</span> ....</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>
@charset “utf-8” 说明编码格式.默认为utf-8进行编码，可以不用写在文件中。
sass 文件后缀说明：
*.sass 按严格的缩进方式进行编译，不能有花括号{}
*.scss 按花括号{} 方式进行编译
compass 文件说明
@import url(“compass”); 方式引入进来，默认不包含reset浏览器重置模块和layout布局模块，须要单独引入。
<code class="hljs css has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-at_rule" style="box-sizing: border-box;">@<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"compass/reset"</span></span>; <span class="hljs-at_rule" style="box-sizing: border-box;">@<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"compass/layour"</span></span>;</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>
compass 文件模块说明：
核心模块：reset、layour
reset #浏览器重置模块
layour #布局模块
css3 #处理跨浏览器css3能力
helpers #内含一系统的函数，跟sass函数很像，比较少用到
typography #修饰文本样式，垂直语韵
utilties #辅助功能模块
browser #用来配置compass支持哪些浏览器，对特定浏览器支持到哪个版本
注意：browser一但修改将会影响到其它6个模块的编译内容。
necolas.github.io/normalize.css/
在sass 文件中，进行压缩编译，保留注释的方法：
在注释中加!感叹号即可，如：
<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*! * 注释内容 */</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>
如何更新或卸载SASS/Compass？
查找服务器源的更新，你可以在CMD下输入：
<code class="hljs erlang has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">gem <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">query</span> –remote</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
Ruby包貌似允许多个不同版本共存，因此如果你需要更新某个包，直接安装可能不会覆盖旧的版本（SASS与Compass是否会这样未知）。
否则，你需要卸载它：
<code class="hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">gem uninstall sass</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
如果此时你已经安装了多个版本，CMD会提醒你选择卸载：
<code class="hljs oxygene has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">Select</span> gem <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">to</span> uninstall: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>. <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">deprecated</span>-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.0</span>.<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>. <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">deprecated</span>-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3.0</span>.<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>. All versions</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>
如果卸载的gem依赖其他的gem，会有以下提示信息：
<code class="hljs oxygene has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">You have requested <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">to</span> uninstall the gem:
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">deprecated</span>-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3.0</span>.<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>
dbi-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.4</span>.<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span> depends <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">on</span> [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">deprecated</span> (>= <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.0</span>.<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>)]
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">If</span> you <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">remove</span> this gems, one <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">or</span> more dependencies will <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">not</span> be met.
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">Continue</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">with</span> Uninstall? [Yn]</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>
其他：
更新GEM的版本，可以输入命令：
<code class="hljs brainfuck has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">gem</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">update</span> <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">-</span><span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">-</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">system</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
查看已经安装的GEM包，可以输入命令：
<code class="hljs php has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">gem <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">list</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
compass的解决方案
代码若有中文编译Sass 文件出现Syntax error: Invalid GBK character报错
解决方法是：
找到ruby的安装目录，里面也有sass模块，如这个路径：C:\Ruby\lib\ruby\gems\1.9.1\gems\sass-3.3.14\lib\sass
在这个文件里面engine.rb，添加一行代码：
Encoding.default_external = Encoding.find(‘utf-8’)
放在所有的require XXXX 之后即可。
最后在scss文件头部启用编码声明：
@charset “utf-8”;//必须设置了这个才能编译有中文的注释
**
插件篇
用normalize 代替 compass/reset ，推荐使用插件的方式引入。
**
安装 normalize
简介：Normalize.css 是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一。
<code class="hljs ruby has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ </span>gem install compass-normalize</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
normalize 核心模块（共8个模块）
base #用来统一html,body标签的字体，文字大小调整，边距等等。
html5 #统一html5新增的元素
links #统一a标签的样式修饰，去除连线
typography #统一段落文本的修饰
embeds #统一img、svg等标签的修饰
groups #统一
forms #统一form等相关的标签修饰
tables #统一table等相关的标签修饰
config.rg 中配置文件之插件说明：
import-noce/activate #解决@import 时重复引入相同文件时，也只引入一次，解决了引入多次的重复代码。引入并启用。 如须要重复引入时，只须要在引入时，加上 @import (“compass/layour!”); 加个感叹号即可。
626
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
