安装：
第一步：安装Ruby
Sass是用Ruby语言写的，但是两者的语法没有关系，所以学 Sass 不用学 Ruby，只是必须先安装Ruby，然后再安装Sass
Linux和Mac已自带Ruby，不用再安装。(根据自己电脑系统自行下载Ruby，提供windows64)
验证Ruby是否安装成功
ruby -v
或者
ruby --version
如果输出Ruby版本号，则表示安装成功
第二步：安装Sass
在命令行输入下面的命令
gem install sass
这样Sass就安装成功了。检测是否安装成功
sass -v
或者
sass --version
如果输出Sass版本号，则表示安装成功
可以使用以下命令更新Sass版本
gem update sass
编译:
新建test.scss，并输入如下代码：
$blue : #1875e7;
div {
color : $blue;
}
直接编译：使用如下命令
sass test.scss
结果如下图（图中出现乱码，需要在scss文件顶部加上@charset "UTF-8";）：
image.png
2.生成css文件：使用如下命令
sass test.scss ../css/test1.css
则在css目录下生成了一个test1.css，如下图：
image.png
（ps：另外提供一个sublime书写scss高亮插件。点击下载 。下载完成后，解压。将解压的文件夹放到sublime下面 Preferences->Browse Packages... 打开的文件夹里面）
3.自动监听某个scss文件
执行如下命令：
sass --watch test.scss:../css/test1.css
image.png
4.自动监听某个文件夹
执行如下命令：
sass --watch scss:css//(要返回上一级，也是文件夹所在的目录)
image.png
5.四种执行风格：
nested：嵌套缩进的css代码，它是默认值。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的css代码。
compressed：压缩后的css代码(线上一般用这个)。
sass test1.scss:../css/test0.css
sass --style nested test1.scss:../css/test1.css
sass --style expanded test1.scss:../css/test2.css
sass --style compact test1.scss:../css/test3.css
sass --style compressed test1.scss:../css/test4.css
效果如下：
image.png
使用语法：
【参考地址】
变量
SASS允许使用变量，所有变量以$开头
$blue : #1875e7;
div {
color : $blue;
}
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
算式
SASS允许在代码中使用算式：
$var : 100px;
body {
margin: (14px/2);
top: 50px + 100px;
right : $var;
// bottom : $var * 10%; (亲测这样写不行)
}
嵌套
SASS允许选择器嵌套。比如，下面的CSS代码：
div {
h1{
color:red;
}
}
属性也可以嵌套，比如border-color属性，可以写成：(注意，border后面必须加上冒号。)
p {
border: {
color: red;
}
}
在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：
a {
&:hover { color: #ffb3ff; }
}
注释
标准的CSS注释 /* comment */ 会保留到编译后的文件。
单行注释 // comment ，只保留在SASS源文件中，编译后被省略。
在/* 后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
// comment
/* comment */
/*!
重要注释
*/
继承
SASS允许一个选择器，继承另一个选择器。比如，现有class1：
.class1 {
border: 1px solid #ddd;
}
class2要继承class1，就要使用@extend命令：
.class2 {
@extend .class1;
font-size:120%;
}
Mixin-可以重用的代码块。
使用@mixin命令，定义一个代码块。
@mixin left1 {
float: left;
margin-left: 10px;
}
使用@include命令，调用这个mixin。
div {
@include left1;
}
mixin的强大之处，在于可以指定参数和缺省值。
@mixin left2($value: 10px) {
float: left;
margin-right: $value;
}
使用的时候，根据需要加入参数：
div {
@include left2(20px);
}
下面是一个mixin的实例，用来生成浏览器前缀。
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
使用的时候，可以像下面这样调用：
#navbar li {
@include rounded(top, left);
}
#footer {
@include rounded(top, left, 5px);
}
image.png
颜色函数
SASS提供了一些内置的颜色函数，以便生成系列颜色。
插入外部文件
@import命令，用来插入外部文件。
@import "path/filename.scss";
@import "foo.css";
if语句
@if可以用来判断：
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
配套的还有@else命令：
p{
@if 5 > 3 {
background-color: #000;
} @else {
background-color: #fff;
}
}
image.png
for语句
SASS支持for循环：
@for $i from 1 to 4 { // 不包含4
.border-#{$i} {
border: #{$i}px solid blue;
}
}
image.png
while语句
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
image.png
each语句
@each $member in zhangsan, lisi, wangwu{
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
image.png
自定义函数
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(20%);
height: double(2rem);
border-width: double(3px);
}
image.png
网友评论