SASS学习——SASS的基本用法

其实关于SASS用法的教程有很多，下面贴两个自己觉得比较好的：
SASS基础教程

SASS语法

接下来整理一些SASS的常用方法：

1.SASS语言允许使用变量，但所有变量都以“$”开头

$black: #000000;div{    color:$black}

但当变量需要用在字符串中时就需要写在#{}之中

$decration : left;.div {　　border-#{$decration}-radius: 10px;}

2.SASS语言允许在代码中使用算术表达式：

div{    position:absolute;    left: (20px/2);    top: $top * 2;}

3.SASS语言允许选择器嵌套：

.text p{    color:#000;    font-size:15px;}

这段CSS代码用SASS表示就是：

.text{    p{        color:#000;        font-size:15px;    }}

除了选择器允许嵌套之外，属性也可以嵌套，比如background-color属性，可以写成

div{    background:{        color:red;    }}

注意：background属性之后必须加冒号

4.SASS在代码的重用方面做得很好，主要通过以下几个方法来实现代码的可重用性：
A.继承：
SASS允许一个选择器，继承另一个选择器，比如：

.test选择器如下：.test{    color:red;}.test1想继承.test的所有属性，就要用@extend命令：.test1{    @extend .test;    font-size:10px;}

2.Mixin:类似于C语言中的宏，是可以重用的代码块。用法如下：

使用@mixin命令，定义一个代码块@mixin common {　　　width：100px;　　　height: 100px;　　　color:red;}使用@include命令，调用这个mixin。div {　　@include common;}Maxin的一大优点就是，可以指定参数和缺省值：@mixin common($value: 10px) {　　　width：$value;　　　height: 100px;　　　color:red;}调用的时候，可以根据需要加入参数：div {　　@include common（150px）;}

3.插入文件：@import命令，用来插入外部文件，如：

@import "scss/style.scss";//如果插入的是.css文件，则等同于css的import命令@import "style.css";

其他高级用法需要时可以查阅上文给出的sass教程，或者学习阮一峰之SASS用法指南