为CSS加入编程元素，这被叫做“CSS预处理器”。基本思想是，用一种专门的编程语言，进行网页样式设计，然后编译成正常的CSS文件。
一、什么是SASS
SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
Sass是成熟、稳定、强大的CSS预处理器。而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。
特性概览
CSS书写代码规模较大的WEB应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过SASS预处理器进行CSS的开发，SASS提供的变了、嵌套、混合、继承等特性，让CSS的书写更加有趣与程式化。
二、安装和使用
2.1安装
SASS是Ruby语言写的，但两者的语法没有关系。不懂Ruby,照样使用。只是必须选安装Ruby，然后再安装SASS。
2.2使用
SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS
下面命令，可在屏幕上显示.scss文件转化的css代码
sass test.scss
如果想要显示结果保存成文件，后面跟一个.css文件名
sass test.scss test.css
SASS提供四个编译风格的选项：
1.nested:嵌套缩进的css代码，它是默认值
2.expanded: 没有缩进的、扩展的css代码
3.compact：简洁格式的css代码。
4.compressed：压缩后的css代码。
生产环境中，一般使用最后一个选项
sass -style compressed test.scss test.css
你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
三、基本用法
3.1变量
变量以$开头
$baseColor: #000000;
div {
color: $baseColor;
}
如果变量需要镶嵌在字符串中，就必须刺蛾在#{}之中。
$side: left;
.round {
border-#{$side}-radius: 5px;
}
3.2计算功能
SASS允许在代码中使用算式：
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
3.3嵌套
div h1 {
color: red;
}
// 可以写成
div {
h {
color: red;
}
}
属性也可以嵌套，如border-color属性可以写成：
p{ border-color: red; }
p {
border: { //注意border后面必须加冒号
color: red;
}
}
在嵌套的代码块内，可以使用&引用父元素。如a:hover伪类，可以写成：
a {
&:hover { color: #ffffff;}
}
3.4注释
SASS共有两种注释风格。
标准的css注释 /comment/，会保留到编译后的文件。
单行注释//comment，只保留在SASS源文件中，编译后会被省略。
在/*后面加一个感叹号，表示这是“重要注释”。即使是压缩模式编译，也会保留这行注释，通常用于声明版权信息。
四、代码的重用
4.1继承
一个选择器可以继承另一个选择器。如，现有clss1:
.class1 {
border: 1px solid #ddd;
}
// class2想要继承class1，就要使用@extend命令：
.class2 {
@extend .class1;
font-size: 120%;
}
4.2 Mixin
Mixin是可以重用的代码块。
使用@mixin命令，定义一个代码块。使用@include命令，调用这个mixin。
@mixin left {
float: left;
margin-left: 10px;
}
div {
@include left;
}
mixin的强大之处，在于可以指定参数和缺省值。
@mixin left ($val: 10px) {
float: left;
margin-right: $val;
}
//使用时，根据需要加参数：
div {
@include left(20px)
}
下面是一个mixin的实例，用来生成浏览器前缀。
@mixin round ($vert, $horz, $radius: 5px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
//使用的时候
#footer {
@include round(top, left, 4px);
}
4.3颜色函数
提供了一些内置的颜色函数，以便生成系列颜色。
lighten(#cc3, 10%) //#d6d65c
darken(#cc3, 10%) //#a3a329
grayscale(#cc3) //808080
complement(#cc3) //332
4.4插入文件
@import命令，用来插入外部文件，如果插入的是.css文件，则等同于css的import命令。
@import 'path/test.scss'
五、高级用法
5.1条件语句
@if可用来判断，配套还有@else命令
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
5.2循环语句
支持for循环，也支持while循环,each命令
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue
}
}
$i: 6;
@while $i > 0 {
.item-#{$i} {
width: 2em * $i;
}
$i: $i - 2;
//each,作用与for类似
@each $member in a,b,c,d {
.#{$member} {
background-image: url("/image/#{$member}.jpg")
}
}
5.3自定义函数
可编写自己的函数
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px)
}
网友评论