Sass 可以通过以下三种方式使用:作为命令行工具;作为独立的 Ruby 模块 (Ruby module);或者作为 Rack-enabled 框架的插件(例如 Ruby on Rails 与 Merb)。
1.安装
ruby安装
由于SASS是在Ruby环境下运行,所以首先需要在自己的电脑上安装Ruby。
1.在Mac系统下,Ruby一般已内置在其中,查看是否安装:ruby -v
2.在windows系统下,先到官网下载个ruby
在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境
sass安装
1.标准稳定版安装(推荐!!!)
gem install sass
有的时候在Linux和OS X系统下,可能需要超级管理员权限才能安装:
sudo gem install sass
2.Beat版本安装 ( 若想要获取SASS的一些最新变化和最新功能,安装一个Beat版本的SASS,会自动创建每次更改的主分支 )
gem install sass --pre
3.从Git库中安装
git clone git://github.com/nex3/sass.git
cd sass
rake install
Windows系统下安装SASS,可以点击这里。
查看你安装的sass:sass -v
安装sass库
1.安装Compass库
Compass是一个非常成熟的SASS库,可是一个很强大的框架,使用的频率也相当的高。如果您了解了Compass,那么他将会让你受益无穷。同样的,在你的项目中使用Compass,需要先安装Compass。
gem install compass
2.安装Bourbon库
gem install bourbon
2.创建第一个sass项目
mySass
sass ==> 新建
style.scss
/style.sass
css <== 编译后的
style.css
文件
sass有两种后缀名文件:一种后缀名为.sass
,不使用大括号和分号;另一种就是.scss
文件,这种和我们平时写的css文件格式差不多,使用大括号和分号。
注:建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错。任何一种格式都可以直接导入(@import)到另一种格式之中使用,或者通过sass-convert
命令工具转换格式:
//sass To scss
sass-convert style.sass style.scss;
//scss To sass
sass-convert style.scss style.sass;
Sass 还会自动缓存编译后的模板,这样做能够显著提升重新编译的速度,尤其在处理由 @import 导入多个子文件的大型项目时。单独使用 Sass,缓存内容保存在 .sass-cache 文件夹中。
3.sass语法
1.变量:sass允许使用变量,所有变量以$开头
$blue : #1875e7;
div {
color : $blue;
}
一个变量含有多个值,如$i : 12px 15px 16px 14px
取第index个值时nth($i,index)
如果变量需要镶嵌在字符串之中,就必须写在#{}之中。
$side : left;
.rounded{
border-#{
$side}-radius : 5px;
}
普通(局部)变量:用
$base:1.6 !global
可以将局部变量转为全局变量默认(全局)变量:用
$base:1.6 !default
声明为全局变量
注意:
- 变量声明顺序问题:必须在调用变量语句的上面,这样才能正确的调用变量。
- 变量有作用域的问题(全局变量、局部变量):代码段a内不可引用代码段b内定义的局部变量。
- 变量重名问题:3.4版本中无重名问题,但是早期的版本中如果我们在本地重新定义了一个全局变量,这将是新的全局变量。所以,在我们的示例中编译样式时取决于我们声明的变量的顺序和mixin的顺序。
2.*计算功能:***sass允许在代码中使用算式(运算的时候,会以空格作为分割,会操作相邻的两个数值)
$a : 100px;
body{
padding-top : (14px / 2); //7px
margin : 3px + 4px auto; //7px auto
top : 50px + 100px; //150px
right : $a * 10%; //10px
}
a).sass中的加法
加法运算还可以做字符串拼接功能,如:
p {
cursor: e + -resize;
}
输出为:p { cursor: e-resize; }
加法连接字符串时,对于引号的合并也有一定规则,如果前面字符串带有引号,后面字符串会自动包含在引号中,如果前面没有,后面带有引号的字符串也会去掉引号:
p:before {
content: "Foo " + Bar;
font-family: sans- + "serif";
}
输出为:
p:before {
content: "Foo Bar";
font-family: sans-serif;
}
如果在字符串中计算并输出,需要用到#{}
,例如:
$w : 10;
p:before{
content : "I ate #{5 + $w} pies!";
}
输出为:
p:before{
content : "I ate 15 pies!";
}
b).sass中的除法
p {
font: 10px/8px; // 纯 CSS 不会运算
$width: 1000px;
width: $width/2; // 使用变量,执行运算
width: round(1.5)/2; // 使用函数返回值,执行运算
height: (500px/2); // 使用括号包裹,执行运算
margin-left: 5px + 8px/2px; // 用了加法,作为表达式的一部分,执行运算
}
编译后输出为:
p {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px;
}
注意事项:
*建议运算符之间空开一个空格。
*注意运算单位。单位也会参与运算。
>
* 加法: