scss在项目中使用方便，简洁~

1.定义变量

$color:red;.box{ background-color:$color; }

2.嵌套css

#content{ div{ aside{ background-color: red; } h1{ color: green; } }}

3.父选择器标识符

#content{ div{ aside{ background-color: red; } a{ color: red; &:hover{ color: blue; } } }}

4.嵌套属性

nav{ border{ width:1px; style:solid; color:red; }}

5.混合

   先定义要混合的样式：@mixin

@mixin corners{ -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px;}

  使用：@include

div{ width: 200px; height: 100px; @include corners;}

6.继承

.error { border: 1px solid red; background-color: #fdd;}.seriousError { @extend .error; border-width: 3px;}

7.函数的使用

$fontSize:37.5;@function px3rem($px){ @return ($px/$fontSize) +rem ;}

8.控制指令

if

p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } @if null { border: 3px double; }}

for

@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; }}

9.导入文件

@import ‘reset‘;

10.注释

body { color: #333; // 这种注释内容不会出现在生成的css文件中 padding: 0; /* 这种注释内容会出现在生成的css文件中 */}

　以上为sass的基础语法，详细内容请参考https://www.sass.hk/网站。