Front end advanced course 20

本节课的主要内容为:

• sass 3

引

我们上节课主要介绍了 nesting, partial, import, operators 和 comments 这几个 feature。这节课我们继续介绍其他 feature。

mixin

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

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

.box {
    @include border-radius(10px);
}

@mixin font($size: 14px) {
    font-size: $size;
}

body {
    @include font();
}

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

extend

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}  .success { @extend .message; border-color: green; }  .error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

HOME WORK

内容预告

• sass 3