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%;
}
```

 

posted @ 2019-06-18 10:54  shangyueyue  阅读(143)  评论(0编辑  收藏  举报