一文讲述SASS简介和使用方法

一、什么是Sass

Sass (Syntactically Awesome StyleSheets)是css的一个扩展开发工具，它允许你使用变量、条件语句等，使开发更简单可维护。这里是官方文档。

二、基本语法

1）变量

sass的变量名必须是一个$符号开头，后面紧跟变量名。

//sass 样式
$red: #f00;
div {color: $red;   
}
// 编译为css后
div {color:#f00;   
}

特殊变量：如果变量嵌套在字符串中，则需要写在 #{} 符号里面，如：

$top: top;
div {margin-#{$top}: 10px;       /* margin-top: 10px; */
}

默认变量：仅需在值后面加入 !default即可，默认变量一般用来设置默认值，当该变量出现另外一个值时，无论定义先后，都会使用另外一个值，覆盖默认值

$color: red;
$color: blue !default;
div {color: $color;    /* color:red; */
}

多值变量：多值变量分为list类型和map类型，list有点像js对象中的数组，map类型像js中的对象

list : 可通过空格，逗号或小括号分割多个值，使用 nth($变量名, $索引)取值

//一维数据

$px: 5px 10px 20px 30px;

//二维数据，相当于js中的二维数组

$px: 5px 10px, 20px 30px;

$px: (5px 10px) (20px 30px);

// 例子

$px: 10px 20px;

div {

margin:nth($px, 1) 0 0 nth($px, 2); /* margin:10px 0 0 20px; */

}

map: 数据以key和value组成，格式：$map: (key1: value1, key2: value2); 通过map-get($map, $key);

$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {#{$header} {font-size: $size;}
}

2）计算功能

sass允许使用算式。

div {

padding: 2px * 4px;

margin: (10px / 2);

font-size: 12px + 4px;

}

3）嵌套

标签嵌套

// sass 样式

div {

color: #333;

a {

font-size:14px;

&:hover {

text-decoration:underline;

}

// 编译后css

div {

color: #333;

}

div a {

font-size:14px;

}

div a:hover {

text-decoration:underline;

}

　　属性嵌套：

//sass 样式

.fakeshadow {

border: {

style: solid;

left: {

width: 4px;

color: #888;

}

right: {

width: 2px;

color: #ccc;

}

//css 编译后样式

.fakeshadow {

border-style: solid;

border-left-width: 4px;

border-left-color: #888;

border-right-width: 2px;

border-right-color: #ccc;

}

4）注释

sass有两种注释风格

标准css注释： /* 注释 */，会保留到编译后的文件中，压缩则删除

单行注释： // 注释

1	`/! 重要注释 /`

5）继承

sass 中，选择器继承可以让选择器继承另一个选择器的所有样式

// sass样式

h1 {

font-size:20px;

}

div {

@extend h1;

color:red;

}

// css编译后样式

h1 {

font-size:20px;

}

div {

font-size:20px;

color:red;

}

使用占位符选择器 %

从sass3.2.0后，就可以定义占位选择器%，这个的优势在于，不调用不会有多余的css文件

// sass样式

%h1 {

font-size:20px;

}

div {

@extend %h1;

color:red;

}

// css编译后样式

div {

font-size:20px;

color:red;

}

6）混合(mixin)

sass中使用@mixin声明混合，可以传递参数，参数名义$符号开始，多个参数以逗号分开，如果参数有多组值，那么在变量后面加三个点表示，如： $var...

//sass 样式

@mixin opacity($opacity:50) {

opacity: $opacity / 100;

filter: alpha(opacity=$opacity);

}

.opacity{

@include opacity; //参数使用默认值 50/100 = 0.5

}

.opacity-80{

@include opacity(80); //传递参数 80/100 = 0.8

}

// css编译后样式

.opacity{

opacity: 0.5;

filter: alpha(opacity=50);

}

// ---------------------

// 多参数

@mixin center($width, $height) {

position: absolute;

left:50%;

top:50%;

width:$width;

height:$height;

margin:(-$height / 2) 0 0 (-$width / 2);

}

div {

@include center(200px, 100px);

}

// css编译后样式

div {

position: absolute;

left:50%;

top:50%;

width:200px;

height:100px;

margin:-50px 0 0 -100px;

}

// -------------------

//多组值

@mixin box-shadow($shadow...) {

-webkit-box-shadow: $shadow;

box-shadow: $shadow;

}

div {

@include box-shadow(0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4));

}

// css编译后样式

div {

-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4);

box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4);

}

@content：在sass3.2.0中引入，可以用来解决css3中 @meidia 或者 @keyframes 带来的问题。它可以使@mixin接受一整块样式，接收的样式从@content开始

//sass 样式

@mixin max-screen($res){

@media only screen and ( max-width: $res )

{

@content;

}

@include max-screen(480px) {

body { color: red }

}

//css 编译后样式

@media only screen and (max-width: 480px) {

body { color: red }

}

　　使用@content解决@keyframes关键帧的浏览器前缀问题

// 初始化变量

$browser: null;

// 设置关键帧

@mixin keyframes($name) {

@-webkit-keyframes #{$name} {

$browser: '-webkit-'; @content;

}

@-moz-keyframes #{$name} {

$browser: '-moz-'; @content;

}

@-o-keyframes #{$name} {

$browser: '-o-'; @content;

}

@keyframes #{$name} {

$browser: ''; @content;

}

// 引入

@include keyframes(scale) {

100% {

#{$browser}transform: scale(0.8);

}

// css编译后

@-webkit-keyframes scale {

-webkit-transform: scale(0.8);

}

@-moz-keyframes scale {

-moz-transform: scale(0.8);

}

@-o-keyframes scale {

-o-transform: scale(0.8);

}

@keyframes scale {

transform: scale(0.8);

}

7）颜色函数

sass提供了一些内置的颜色函数

lighten(#cc3, 10%)　　 // #d6d65c

darken(#cc3, 10%) 　　　// #a3a329

grayscale(#cc3) 　　　　// #808080

complement(#cc3) 　　　// #33c

8）引入外部文件

使用 @import 命令引入外部文件，引入后，可使用外部文件中的变量等。

1	`@import` `"_base.scss";`

三、高级用法

1）函数 function

sass允许用户编写自己的函数，以@function开始

$fontSize: 10px;

@function pxTorem($px) {

@return $px / $fontSize * 1rem;

}

div {

font-size: pxTorem(16px);

}

// css编译后样式

div {

font-size: 1.6rem;

}

2）if条件语句

@if语句可以用来判断

// sass样式

$type: monster;

div {

@if $type == ocean {

color: blue;

} @else if $type == matador {

color: red;

} @else if $type == monster {

color: green;

} @else {

color: black;

}

// css编译后样式

div {

color: green;

}

　　三目判断：语法为 if($condition, $if_true, $if_false)。三个参数分别表示：条件，条件为真的值，条件为假的值

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

3）循环语句

for循环有两种形式，分别为：@for $var from <start> through <end> 和 @for $var from <start> to <end>。 $var 表示变量，start表示开始值，end表示结束值，两种形式的区别在于 through 包括 end 的值，to 不包括 end 值。