sass

# sass

```
author:shangyy
date:2018-02-05
```
[offical website](http://sass-lang.com/)
[cn website](https://www.sass.hk/)

### 一、sass basic
### 1.variables
```css
$blue : #1875e7;
div {
　　　color : $blue;
　　}
```
### 2.nesting

```css
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
}
```

### 3.import

```css
@import 'reset';

```
### 4.mixins

```css
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}

.box { @include border-radius(10px); }
```
### 5.extend

```css
.class1 {
　　　　border: 1px solid #ddd;
　　}
class2要继承class1，就要使用@extend命令：
.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}
```
6.Operators

```css
.container{
width:300px / 960px * 100%;
}
```

 

转载于:https://www.cnblogs.com/shangyueyue/p/11044050.html