SASS简介
1.安装
sass是预编译的CSS文件,需要一个编译器来进行编译。这一编译器依赖于Ruby,所以需要先安装Ruby环境,然后安装sass的GEM包。
gem install sass
当然也有其他的现成的工具可以完成编译,如Koala和Scout
2.SCSS vs SASS
简单的说,SASS是sass语言一开始所使用的语法,继承自HAML模板语言。在sass的后来版本中,引入了SCSS的语法结构。SASS和SCSS各有各自的优劣,使用哪一种语法主要看个人的喜好。
因为SCSS的风格更接近CSS,所以以下示例使用SCSS语法结构。
3.变量
sass中以$开头的字符串表示变量名:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
4.嵌套
可以像HTML一样嵌套CSS,简化了选择器的使用
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
上面的代码生成的CSS如下,其中的选择器按嵌套的规则排列好:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
5.引入和分块
在scss文件名前面加上下划线,表示这只是一部分的sass代码,编译器不会把这个文件直接转换为css文件,如_btn.scss。 如果想使用这部分sass代码,需要在另一个sass代码中使用@import方法来将这个文件引入进去。
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
在引入的时候,无需加前面的下划线和后缀名,sass编译器会自动判断。
/* base.scss */
@import 'reset';
body {
font-size: 100% Helvetica, sans-serif;
background-color: #efefef;
}
6.Mixins
Mixins类似于函数,可以命名它,调用它并向其传递参数
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
7.扩展/继承
扩展顾名思义,就是在原有的CSS之外,扩展出其他的CSS代码,原有的代码可以直接引用原来的CSS,而无须重复书写 这种方式类似于子类对父类的继承
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.warning {
@extend .message;
border-color: yellow;
}
生成的代码也会保证DRY(Don't Repeat Youself)的原则,保持代码量的最少化:
.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
8.操作符
常见的计算类操作符:
+, -, *, /, %
.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complimentary"] {
float: right;
width: 300px / 960px * 100%;
}
9.COMPASS
COMPASS属于一个sass的库,封装了很多便捷的功能。
封装CSS3的vender-prefix
使用@include方法调用,其实质是调用封装好的Mixins,简化vender-prefix的重复书写
@import "compass/css3";
@import "compass/utilities";
#demo {
@include clearfix;
}
.border-radius-example {
width: 125px;
height: 125px;
background: red;
margin: 20px;
float: left;
padding: 5px;
}
#border-radius {
@include border-radius(25px);
}