1、Sass安装
(1)到 Ruby 的官网(http://rubyinstaller.org/downloads)下载对应需要的 Ruby 版本。
(2)Ruby 安装文件下载好后,可以按应用软件安装步骤进行安装 Ruby。在安装过程中,选择Add executables to your PATH(不选中,就会出现编译时找不到Ruby环境的情况)
(3)Cmd打开命令行输入以下命令
①gem sources --remove https://rubygems.org/
②gem sources -a https://gems.ruby-china.com
③gem sources -l
④gem install sass
⑤sass -v
⑥gem list
2、Compass安装
(1)Cmd打开命令行输入以下命令
①gem install compass
②compass-v
3、Sass命令行
(1)compass create text (创建一个sass文件)
(2)cd text (切换到文件所在位置)
(3)compass watch (监听scss的变化,动态改变css的样式)
(4)Ctrl + C (停止监听)
(5)compass compile (在修改了输出方式后直接编译)
4、Sass语法
(1)@import
①@import 根据文件名引入。 默认情况下,它会寻找Sass 文件并直接引入, 但是,在少数几种情况下,它会被编译成 CSS 的 @import 规则:
Ⅰ如果文件的扩展名是 .css。
Ⅱ如果文件名以 http:// 开头。
Ⅲ如果文件名是 url()。
Ⅳ如果 @import 包含了任何媒体查询(media queries)。
②如果上述情况都没有出现,并且扩展名是 .scss 或 .sass, 该名称的 Sass 或 SCSS 文件就会被引入。
③如果没有扩展名, Sass 将试着找出具有 .scss 或 .sass 扩展名的同名文件并将其引入。
例如:
@import “foo.scss”;
或
@import “foo”;
两者都将引入 foo.scss 文件, 而
@import “foo.css”;
@import “foo” screen;
@import “http://foo.com/bar”;
@import url(foo);
将被编译为:
@import “foo.css”;
@import “foo” screen;
@import “http://foo.com/bar”;
@import url(foo);
④也可以通过一个 @import 引入多个文件。文件之间用逗号隔开
例如:
@import “rounded-corners”, “text-shadow”;
将引入 rounded-corners 和 text-shadow 两个文件。
⑤如果你有一个 SCSS 或 Sass 文件需要引入, 但是你又不希望它被编译为一个 CSS 文件, 这时,你就可以在文件名前面加一个下划线,就能避免被编译。 这将告诉 Sass 不要把它编译成 CSS 文件。 然后,你就可以像往常一样引入这个文件了,而且还可以省略掉文件名前面的下划线。
例如,你有一个文件叫做 _colors.scss。 这样就不会生成 _colors.css 文件了, 而且你还可以这样做:
@import “colors”;//不用加下划线
来引入 _colors.scss 文件。
⑥注意,在同一个目录不能同时存在带下划线和不带下划线的同名文件。
例如, _colors.scss 不能与 colors.scss 并存。
(2)@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
@mixin col-6{
width:50%;
float: left;
}
(3)@include 指令可以将混入(mixin)引入到文档中。
.webdemo-sec{
@include col-sm(50%);
}
(4)@extend选择器样式的继承
①extend继承多个选择器
②连续继承
③extend不可以继承选择器序列
④使用%,用来构建只用来继承的选择器
(%声明的代码,如果不被 @extend 调用的话,不会产生任何代码。)
(5)@media 指令
①可以嵌套在 CSS 规则中
②如果在样式中使用 @media 指令,它将冒泡到外面。
③在 Sass 的混合宏中,还可以给混合宏的参数传一个默认值,使用方式($width:50%)
④unitless(判断一个值是否带有单位,如果不带单位返回的值为 true,带单位返回的值为 false)
(6)@debug 在 Sass 中是用来调试的,@error 和 @warn、@debug 功能是如出一辙。
(7)@if 指令
①如果条件为 true 返回一个样式块,反之 false 返回另一个样式块。在 Sass 中除了 @if 之,还可以配合 @else if 和 @else 一起使用。
(8)@for 指令:@for 循环中有两种方式:
①@for $i from <start> through <end>
②@for $i from <start> to <end>
$i 表示变量
start 表示起始值
end 表示结束值
through 表示包括 end 这个数,而 to 则不包括 end 这个数。
如下代码,先来个使用 through 关键字的例子:
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
编译出来的 CSS:
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
再来个 to 关键字的例子:
@for $i from 1 to 3 {
.item-#{$i} { width: 2em * $i; }
}
编译出来的 CSS:
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
(9)@while指令:和 @for 指令很相似,只要 @while 后面的条件为 true 就会执行。
这里有一个 @while 指令的简单用例:
//SCSS
$types: 4;
$type-width: 20px;
@while $types > 0 {
.while-#{$types} {
width: $type-width + $types;
}
$types: $types - 1;
}
编译出来的 CSS
.while-4 {
width: 24px;
}
.while-3 {
width: 23px;
}
.while-2 {
width: 22px;
}
.while-1 {
width: 21px;
}
(10)@each 指令:@each 循环就是去遍历一个列表,然后从列表中取出对应的值。
①@each 循环指令的形式:@each $var in
②$var 就是一个变量名, 是一个 SassScript 表达式,他将返回一个列表值。变量 $var 会在列表中做遍历,并且遍历出与 $var 对应的样式块。
这有一个 @each 指令的简单示例:
$list: adam john wynn mason kuroir;//$list 就是一个列表
@mixin author-images {
@each $author in $list {
.photo-#{$author} {
background: url("/images/avatars/#{$author}.png") no-repeat;
}
}
}
.author-bio {
@include author-images;
}
编译出 CSS:
.author-bio .photo-adam {
background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john {
background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn {
background: url("/images/avatars/wynn.png") no-repeat; }
.author-bio .photo-mason {
background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir {
background: url("/images/avatars/kuroir.png") no-repeat; }
(11)@at-root 指令:从字面上解释就是跳出根元素。当你选择器嵌套多层之后,想让某个选择器跳出,此时就可以使用 @at-root。
5、Sass四种输出方式
(1)expanded
(2)nested
(3)compact
(4)compressed