sass基础使用

1.sass安装

1.1使用npm安装

npm install -g sass

2基本语法

2.1

例如：

$color:red;div{color: $color;}

运行结果如下：

div {color: red;}/*# sourceMappingURL=01-%E5%8F%98%E9%87%8F.css.map */

2.2作用域

例如：

$mycolor:red;div{$mycolor:black;color: $mycolor;}

运行结果如下：

div {color: black;}

例如：

#geader{    font-size: 12px;    ul{        li{            a{&:hover{    color: red;}            }        }    }}

运行结果如下：

#geader {  font-size: 12px;}#geader ul li a:hover {  color: red;}

2.4 import

例如：

@import "./reset.scss";div{    color: red;    }

*{    margin: 0;    padding: 0;}

运行结果如下：

* {  margin: 0;  padding: 0;}div {  color: red;}

2.5  混入

例如：

@mixin important-text {    color: red;    font-size: 12px;    }div{    border: 1px solid #999999;    @include important-text;}

运行结果如下：

div {  border: 1px solid #999999;  color: red;  font-size: 12px;}

2.6   混入带参数

例如：

@mixin  border($radius) {    border-radius:$radius;}div{    @include border(10px);}

运行结果如下：

div {  border-radius: 10px;}

2.7  继承

.button-basic{    background-color: red;    border: 1px solid #999999;}.button-succee{    @extend .button-basic;    color: #ffffff;}.button-error{    @extend .button-basic;    color: #333333;}

运行结果如下：

.button-basic, .button-error, .button-succee {  background-color: red;  border: 1px solid #999999;}.button-succee {  color: #ffffff;}.button-error {  color: #333333;}