sass

sass笔记

1.对于sass中的&符号，指的就是解开sass嵌套规则，使&代替父元素

例如

.name a{
            color: blue;
            :hover { color: red }
        }

//会被编译为
.name a :hover{
  color:red
}
//显然这样是不生效的（因为hover要紧邻着元素，这个根据sass嵌套规则出现了空格）

//所以这样才是对的
.name a{
            color: blue;
            &:hover { color: red }
        }
//最后编译为
.name a:hover{
  color:red
}

2.混合器;

混合器使用@mixin标识符定义。看上去很像其他的CSS @标识符，比如说@media或者@font-face。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。下边的这段sass代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框。

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

然后就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写：

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;//注意@include后面没有分号
}

//sass最终生成：

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

3.给混合器传参;

混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。如果你写过JavaScript，这种方式跟JavaScript的function很像：
下边的这段sass代码，定义了一个非常简单的混合器，目的是添加自定义参数的圆角边框

@mixin rounded-corners($radius) {
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

使用时

.con{
        width: 30px;
        height:30px;
        border:1px solid red;
        margin-top:20px;
        @include rounded-corners(5px);
    }