sass使用

1.嵌套伪类嵌套

.clearfix{

&:before,&:after{

content:" ",

display:table}

&:after{

  clear:both,

 overflow:hidden,

}

}

编译出来的css

.clearfix:before ,  .clearfix:after{

    content:"";

    display:table;

     }

.clearfix:after{

   clear:both;

    overflow:hidden;

}

2.声明混合宏

   在sass中使用@mixin来声明一个混合宏  类似 CSS 中的 @media@font-face 一样

    @mixin  border-radius{ -webkit-border-radius: 5px; border-radius: 5px;}

混合宏的参数传多个参数可以把公共的用混合宏写，其余的css需要的时候直接调用就可以,可以复用重复代码块。但其最大的不足之处是会生成冗余的代码块

@mixin size($width,$height){

    width:$width;

    height:$height;

}

.box-size{

@include size(300px,500px)

}

3.sass继承,@extend”来继承已存在的类样式块，从而实现代码的继承

.btn {

  border: 1px solid #ccc;

  padding: 6px 10px;

  font-size: 14px;

}

.btn-primary { background-color: #f36; color: #fff;@extend.btn;}

4.sass可以进行加减乘除,前提是必须是相同类型的单位

加减:

$full-width:960px

$sidebar-width:200px

.content {

width: $full-width - $sidebar-width

}

乘除

.box{

width:10px*2

}

6.sass可以进行颜色运算

p {

  color: #010203 + #040506;

}

编译出来的css为

p {

  color: #050709;

}

5.sass也可以进行字符运算

$content :'hello'+' '+'sass'

.box:before{

   content : "#{$content}"

}

编译出来的css

.box:before{

content:  "hello sass"

}