Sass学习笔记（二） @rules，判断与遍历，@each, @mixin

紧接上篇，高阶一点的东西来了
here is the sass-lang.com
@import “foo.scss”==@inport “foo”
当如下情况时，import的遵守CSS 规则

• 后缀名是.css
• begin with http://
• url()

• include media queries

  @mixin、@charset不可与@import嵌套在一起。
  @import can only at the base level of a document
  但可以在某个selector内部写
  if example.scss contains

.example {
  color: red;
}

then

#main {
  @import "example";
}

would compile to

#main .example {
  color: red;
}

media queries本身也可以作为 变量
如

$media:screen;
$feature:-webkit-min-device-pixel-ratio;
$value:1.5;

sidebar{
    font-size: $value * 3px;
    @media #{$media} and ($feature:$value){
        font-size:20px;
    }
}
//and it would be compiled as:

sidebar {
  font-size: 4.5px; }
  @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
    sidebar {
      font-size: 20px; } }

@extend可以扩展类，在新类中的首行使用@extend .error；
包括复杂的伪类，类的组合等，等于替换了@extend 的元素
支持链式和一对多的继承。

.comment a.user:hover{
    font-weight: 300;
}
.hoverlink{
    @extend a:hover;
}
//and it will be compiled as:
.comment a.user:hover, .comment .user.hoverlink {
  font-weight: 300; }

选择器组合也可以继承，而且是完全继承，比如@extend的原始类中有：hover，那么选择器中也会用hover。
sass会智能缩减选择器的长度
placeholder选择器，本身是简单的文本替换。
有点类似c中的#define

#context a%extreme{
    color:blue;
    font-size: 2em;
}
.notice{
    @extend %extreme;
}
// and it would be compiled to:
#context a.notice {
  color: blue;
  font-size: 2em; }

!optional可以加在@extend后面，如果找不到原型也不会报错
@media是个block，@extend不能穿越这个block引用。

@at-root 可以回到上级进行选择
还可以穿越@media

@media print {
  .error{ 
    border: 1px #f00;
    background-color: #fdd;
  @at-root (without:media){
    color:yellow;
    // @at-root (with:media)就是在里面了
   }
 }
}
// and it will be compiled to :
@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd; } }
.error {
    color: yellow; }

@at-root后面一定要跟东西，一定要跟东西，一定要跟东西，不能是空的。它不能直接代替body或者html，而必须是outside的某一个class or other selector

@warn 和 @error 可以用来debug, 打印到底是啥不对，尤其和@if，@else 连用。

.error {
  @if null {border:1px solid;}
  @if true {border-radius: 4px;}  
 }

也可以连着写@if ,@else if …..

遍历，遍历才是硬道理啊！
@for @each

@for
终于到for了，这个用于遍历的利器啊！！！
两种格式：
@for $var from < start> through < end>
@for $var from < start> to < end>
to 不包含end中的元素
当start大于end的时候会递减而不是递增。

@each $var in < list or map>

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

@each $animal in puma, sea-slug, egret, salamander{
    .#{$animal}-icon{
        background: url("/images/#{$animal}.png");
    }
}

each还可以形成多对多的映射关系

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

@each $header,$size in (h1:2em, h2:1.5em, h3:1.2em){
    #{$header}{
        font-size: $size;
    }
}

@while可以更精细的控制，但不常用。

$i:6;
@while $i > 0 {
    .item-#{$i} {width: 2em * $i;}
    $i:$i - 2;
}
//
.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

mixin 的用法
@mixin xxx {}，在selector后用 @include xxx引用

@mixin clearfix{
    display: inline-block;
    &:after{
        conent:".";
        height: 0;
        visibility: hidden;
    }

}

.clearfix{
    @include clearfix;
}

global里也可直接引用display，但不能直接定义属性，或者引用父选择器。就是说，要这么使

@mixin links{
    a{
    color:blue;
    }
}

@include links

mixin可以链式，引用其他的mixin
但要注意顺序，就像必须先有mixin再有include一样
还可以像函数那样加形参和实参，还可以指定default值

@mixin sexy-border($color,$width：2px){
    border: {
        color: $color;
        width: $width;
    }
}
p{
    @include sexy-border(yellow);
}
// and it would be compiled as:
p {
  border-color: yellow;
  border-width: 2px; }

…的用法

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

.shadows{
 @include box-shadow(0px 4px 5px #666);
}

@content可以接受新语句。
同时要注意作用域

@mixin smartphone{
    height: 10px;
    @content;
}
#sidebar {
  $sidebar-width: 300px;
  width: $sidebar-width;
  @include smartphone {
    width: $sidebar-width / 3;
  }
}

基本上这就是全部内容了，最后还有四种输出形式，嵌套式，平铺式，压缩式，和紧密压缩式。可以在command line中控制。默认是nested output style