css预处理-sass

CSS预处理

为什么要用css预处理呢？

• 为了更高效的管理较为繁多的css样式
• 为了减轻css代码编写过程中的繁多与冗杂
• 为了在主题定制以及修改过程中高效地对样式切换
• 丰富css的语法功能

---

常见的预处理工具：

• sass less stylus

常用的预处理功能：

• 嵌套
• 变量
• mixin
• 循环

Sass常见的语法:

.box{
    font-size:12px;
    .box-title{
        background:red;
    }
}

$blue:#188eee;
.tt{
    color:$blue;
}
.link{
    color:$blue;
}

#mixin将常用的代码封装成一段代码段
@mixin box-shadow($shadow...){
    -moz-box-shadow:$shadow;
    -webkit-box-shadow:$shadow;
    -box-shadow:$shadow;
}
.box{
    @include box-shadow(2px,4px,#ccc);
}
.header{
    @include box-shadow(3px 4px #ccc);
}

#循环
@for $i from 1 to 3{
    .item-#{$i}{
        background-image:url(xxx/#{$i}.png);
    }
}

参考文档

Sass官方文档