一、ruby安装
sass基于Ruby语言开发而成，因此安装sass前需要安Ruby。
ruby的下载地址：[https://rubyinstaller.org/downloads/]
第一步：同意协议：
第二步：添加环境变量
第三步：安装完成之后跳出界面点击finish
第四步：在弹出的命令行回车
第五步：检测ruby是否安装成功
在cmd输入：
ruby -v
输出ruby的版本表示安装成功
1．修改ruby的源
第一步：删除原有的源
gem sources --remove https://rubygems.org
第二步：添加国内的源（淘宝的源已经不再维护）
gem sources -a https://gems.ruby-china.com
第三部：检测是否换源成功
gem sources -l
输出地址一致表示换源成功。
2．安装sass
gem install sass
3．检测sass安装是否成功
sass -v
4．安装compass
gem install compass
5．检测compass是否安装成功
compass -v
6．其他命令
更新sass
gem update sass
查看sass帮助
sass -h
7．sass的编译
/单文件转换命令
sass input.scss output.css
//单文件监听命令
sass --watch input.scss:output.css
//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch app/sass:public/stylesheets
8．sass的编译参数
命令行编译sass有配置选项，如编译过后css排版、生成调试map、开启debug信息等，可通过使用命令sass -v查看详细。我们一般常用两种--style``--sourcemap。
//编译格式
sass --watch input.scss:output.css --style compact
//编译添加调试map
sass --watch input.scss:output.css --sourcemap
//选择编译格式并添加调试map
sass --watch input.scss:output.css --style expanded --sourcemap
//开启debug信息
sass --watch input.scss:output.css --debug-info
--style表示解析后的css是什么排版格式;
sass内置有四种编译格式:nested、expanded、compact、compressed。
--sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。
四种编译排版演示：
未编译样式
.box {
width: 300px;
height: 400px;
&-title {
height: 30px;
line-height: 30px;
}
}
nested 编译排版格式
命令行内容
sass style.scss:style.css --style nested
编译过后样式
.box {
width: 300px;
height: 400px; }
.box-title {
height: 30px;
line-height: 30px; }
expanded 编译排版格式
命令行内容
sass style.scss:style.css --style expanded
编译过后样式
.box {
width: 300px;
height: 400px;
}
.box-title {
height: 30px;
line-height: 30px;
}
compact 编译排版格式
命令行内容
sass style.scss:style.css --style compact
编译过后样式
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }
compressed 编译排版格式
命令行内容
sass style.scss:style.css --style compressed
编译过后样式
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}
9．编译sass的软件
koala&codekit
10．在线编译sass
https://www.w3cschool.cn/tryrun/sass2css
11．sublime text3安装sass插件
首先你要看的是在preference选项下有没有package control这个选项，如果没有的话，就表示你没有Package Control 插件（一个方便 Sublime text 管理插件的插件），这时，你就要从菜单 View - Show Console 或者 ctrl + ~ 快捷键，调出 console。将以下 Python 代码粘贴进去并 enter 执行，不出意外即完成安装。
import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60';
pf = 'Package Control.sublime-package';
ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) );
by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read();
dh = hashlib.sha256(by).hexdigest();
print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
如果出现以下情况，则需要手动下载安装。
出现以下选项表示安装成功：
接下来安装sass：
重新打开sublime,Tools(工具) –>Command Palette(命令面板) 快捷键ctrl+shift+p，并输入install，选择第一个Install Pacage，在命令栏中输入”Sass”然后回车，然后在弹出的列表中选择Sass插件，通过鼠标单击或者回车进行安装，可通过左下角状态栏查看安装结果
同样的方法，在命令栏中输入”SassBuild”然后回车，然后在弹出的列表中选择SassBuild插件，通过鼠标单击或者回车进行安装，可通过左下角状态栏查看安装结果
查看安装的插件，按ctrl+shift+p，输入package，选择list packages，就看到了我们安装的插件列表。如果你看到了sass和sass bulid就说明插件安装成功了。安装成功后一定要重启sublime，不要在这里被坑。
有可能出现的情况：解决办法：
使用sass编译。
创建编译规则：
里面写入以下内容：
{
"cmd": ["sass", "--watch", "${file_path}/${file_base_name}.scss:${file_path}/css/${file_base_name}.css","--style","expanded","--sourcemap=none","--no-cache"],
"selector": "source.sass, source.scss",
"line_regex": "Line ([0-9]+):",
"osx":
{
"path": "/usr/local/bin:$PATH"
},
"windows":
{
"shell": "true"
}
}
//${file_base_name} 是否生成scss后缀名（1.scss.css）
//--sourcemap=none 不生成.map文件（1.map）
//--no-cache 不生成文件夹（.sass-cache）
//想要.scss和.sass文件都能执行就修改下面的代码
"cmd": ["sass", "--watch", "${file_path}/${file_name}:${file_path}/css/${file_base_name}.css","--style","expanded","--sourcemap=none","--no-cache"]
书写scss文件：
.box {
width: 300px;
height: 400px;
&-title {
height: 30px;
line-height: 30px;
}
}
进行编译：Ctrl+B进行编译。
生成的css：
.box {
width: 300px;
height: 400px;
}
.box-title {
height: 30px;
line-height: 30px;
}
/*# sourceMappingURL=t.css.map */
12．sass编码中文乱码
CSS很好用…但是有一点不是很人性化的是,除了默认英文注释.其他注释需要设置相应的字符编码才能正确解释,否则报错
1.在原生ruby配置的scss, 文件是支持@charset 'utf-8'的
@charset “utf-8”;
2.配置整个环境
找到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 之后即可。
二、SASS语法
1．sass的格式
sass有两种后缀名文件：一种后缀名为sass，语法要求不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的CSS文件格式差不多，使用大括号和分号。
文件后缀名为sass的语法
body
background: #eee
font-size:12px
p
background: #0982c1
文件后缀名为scss的语法
body {
background: #eee;
font-size:12px;
}
p{
background: #0982c1;
}
建议大家使用scss文件后缀。
2．sass的注释
sass的注释有两种。
//单行注释
/*-------*/ 多行注释
3．sass变量
1)变量的定义与使用
Sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样）。任何可以用作css属性值的赋值都可以用作sass的变量值，甚至是以空格分割的多个属性值，或者以逗号分割的多个属性值。
$a-color: blue; // 定义变量。
.box {
color: $a-color; // => blue 使用变量
}
2)局部变量与全局变量
变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明。
/sass style
//-------------------------------
$a-color: blue; // 全局变量
.box {
$a-color: red; // 局部变量，box内部不使用。
color: $a-color; // => red 局部变量
}
.child {
color: $a-color; // => blue 全局变量
$main-width: 16em !global; // 在局部定义全局的变量。
}
.main {
width: $main-width; // 使用在内部定义的全局变量。
}
/*===============生成的CSS代码===================*/
.box {
color: red;
}
.child {
color: blue;
}
.main {
width: 16em;
}
3)特殊变量
如果变量作为CSS属性或在某些特殊情况下等则必须要以 #{$variables}形式使用。
//sass style
//-------------------------------
$side: top;
.box {
border-#{$side}: 1px solid #09c;
}
//css style
//-------------------------------
.box {
border-top: 1px solid #0098cc;
}
4)中划线与下划线
在sass的大多数地方，中划线命名的内容和下划线命名的内容是互通的，除了变量，也包括对混合器和Sass函数的命名。但是在sass中纯css部分不互通，比如类名、ID或属性名。
$link-color: blue;
a {
color: $link_color;
}
//编译后
a {
color: blue;
}
4．嵌套
1)嵌套规则
Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。
//sass style
//-------------------------------
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
//css style
//-------------------------------
#main p {
color: #00ff00;
width: 97%;
}
#main p .redbox {
background-color: #ff0000;
color: #000000;
}
2)父选择器（&）
在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，可以用 & 代表嵌套规则外层的父选择器。
//sass style
//-------------------------------
.box {
border-#{$side}: 1px solid #09c;
&::before {
content: '';
display: block;
position: absolute;
left: 100px;
top: 5px;
}
}
//css style
//-------------------------------
.box {
border-top: 1px solid #09c;
}
.box::before {
content: '';
display: block;
position: absolute;
left: 100px;
top: 5px;
}
& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器。
/sass style
//-------------------------------
#main {
color: black;
&-sidebar { border: 1px solid; }
}
//css style
//-------------------------------
#main {
color: black;
}
#main-sidebar {
border: 1px solid;
}
父选择器标识符还有另外一种用法，你可以在父选择器之前添加选择器。
#content aside {
color: red;
body.ie & { color: green }
}
/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }
3)@at-root
@at-root用来跳出当前选择器嵌套。
//sass style
//-------------------------------
.demo {
...
animation: motion 3s infinite;
@at-root {
@keyframes motion {
...
}
}
}
//css style
//-------------------------------
.demo {
...
animation: motion 3s infinite;
}
@keyframes motion {
...
}
4)子组合选择器
article section { margin: 5px }
5)同层组合选择器：>、+和~
上边这三个组合选择器必须和其他选择器配合使用，以指定浏览器仅选择某种特定上下文中的元素。
可以用子组合选择器>选择一个元素的直接子元素。
可以用同层相邻组合选择器+选择一个元素后紧跟的某一类元素
以用同层全体组合选择器~，选择所有跟在指定元素后的同层某类元素，不管它们之间隔了多少其他元素:
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}
//sass编译后
rticle ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }
5．运算
Sass支持多种数据类型的变量，比如：
数字，1, 2, 13, 10px
字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
颜色，blue, #04a3f9, rgba(255,0,0,0.5)
布尔型，true, false
空值，null
所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。
1)数值运算
Sass支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。
//sass style
//-------------------------------
.box {
height: 17px + 20px; // => 37px 数字加法运算
width: (75rem/16); // => 4.6875rem 除法运算
color: #303030*2; // => #606060; 乘法运算（颜色运算）
padding: 20px - 3; // => 17pex 数字减法
font-family: sans- + "serif"; // => sans-serif 字符串加法
width: 1em + (2em * 3); // 带括号的运算
}
//css style
//-------------------------------
.box {
height: 37px;
width: 4.6875rem;
color: #606060;
padding: 17px;
font-family: sans-serif;
width: 7em;
}
6．条件语句
sass具有条件语句，当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码。
//sass style
//-------------------------------
$w: 960px;
$type: monster;
.box {
@if 2*3 > 5 { // 简单if判断语句
color: red;
}
@if $w > 900px {
width: $w;
} @else { // if else 语句
width: 900px;
}
@if $type == ocean { // 多个if和else语句
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
//css style
//-------------------------------
.box {
color: red;
width: 960px;
color: green;
}
说明：@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。
如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明
7．循环语句
@for 指令可以在限制的范围内重复输出格式。类似for循环。
两种格式：
@for $var from
/scss style
//------------for througth循环-------------------
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
//css style
//-------------------------------
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }
@for $var from
//scss style
//------------for to 循环-------------------
@for $i from 1 to 3 {
.item-#{$i} { width: 2em * $i; }
}
//css style
//-------------------------------
.item-1 { width: 2em; }
.item-2 { width: 4em; }
8．遍历
@each 指令的格式是 $var in ,
$var 可以是任何变量名，比如 $length 或者 $name，
而 是一连串的值，也就是值列表。
//sass style
//-------------------------------
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
//css style
//-------------------------------
.puma-icon {
background-image: url("/images/puma.png");
}
.sea-slug-icon {
background-image: url("/images/sea-slug.png");
}
.egret-icon {
background-image: url("/images/egret.png");
}
.salamander-icon {
background-image: url("/images/salamander.png");
}
复杂对应each
//sass style
//-------------------------------
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
#{$header} {
font-size: $size;
}
}
//css style
//-------------------------------
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
9．混合指令
利用混合器，可以很容易地在样式表的不同地方共享样式。如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成优良的混合器，尤其是这段样式本身就是一个逻辑单元，比如说是一组放在一起有意义的属性。判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。
1)不带参数的简单Mixin
混合指令（Mixin）用于定义可重复使用的样式，可以直接把一整段Sass代码替换到某个地方去。
//sass style
//-------------------------------
// 定义mixin reset, 用@mixin开头，后面跟空格和混合块的名字。然后是语句块
@mixin reset {
padding: 0;
margin: 0;
}
html, body, div , input {
@include reset(); // 引用 reset 混合块。用@include指令引用混合块。
}
//css style
//-------------------------------
html, body, div, input {
padding: 0;
margin: 0;
}
2)带参数的mixin
Mixin还可也添加参数，跟函数一样使用。
//sass style
//-------------------------------
@mixin sexy-border($color, $width) {
border: $width solid $color;
}
p { @include sexy-border(blue, 1px); }
//css style
//-------------------------------
p {
border: 1px solid blue;
}
3)默认参数的mixin
@mixin link-colors(
$normal,
$hover: $normal,
$visited: $normal
)
{
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
4)函数指令
虽然Mixin功能强大，但是某些场景下还是函数应用更方便，Sass也提供了自定义函数的用法
//sass style
//-------------------------------
$grid-width: 40px;
$gutter-width: 10px;
// 定义自定义函数 grid-width
@function grid-width($n) { // 接受一个参数$n
@return $n * $grid-width + ($n - 1) * $gutter-width; // 返回值。
}
#sidebar { width: grid-width(5); } // 在属性中调用函数
//css style
//-------------------------------
#sidebar {
width: 240px;
}
10．继承（扩展）
1)基本继承
sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词 @extend，后面紧跟需要继承的选择器。
//sass style
//-------------------------------
h1{
border: 4px solid #ff9aa9;
}
.speaker{
@extend h1;
border-width: 2px;
}
//css style
//-------------------------------
h1, .speaker{
border: 4px solid #ff9aa9;
}
.speaker{
border-width: 2px;
}
2)%占位符
以定义占位选择器 %。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了 @extend去继承相应的样式，都会解析出来所有的样式。占位选择器以 %标识定义，通过 @extend调用。
//sass style
//-------------------------------
%ir { // 定义占位符。没有选择器名字的一段代码而已。
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
#header{
h1{
@extend %ir;
width:300px;
}
}
.ir{
@extend %ir;
}
//css style
//-------------------------------
#header h1, .ir {
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
#header h1 {
width: 300px;
}
11．文件导入
Sass的导入( @import)Sass文件规则和CSS的有所不同，编译时会将 @import的scss文件合并进来只生成一个CSS文件。
但是如果你在Sass文件中导入css文件如 @import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以 @import方式存在。
所有的Sass导入文件都可以忽略后缀名 .scss。一般来说基础的文件命名方法以_开头，如 _mixin.scss。这种文件在导入的时候可以不写下划线，可写成 @import "mixin"。
//sass style
//-------------------------------
@import "reset.css"; // 导入css文件，不会进行编译。
@import "a"; // 导入a.scss 文件，后缀省略
p{
background: #0982c1;
}
//css style
//-------------------------------
@import "reset.css";
body {
background: #eee;
}
p{
background: #0982c1;
}