day10

1.我今天学了什么

1.1配置webstoem的安装环境

http://www.jianshu.com/p/c482c6ea0a4b

1.2sass

http://www.jianshu.com/p/0f96f42b6924

2.1变量

$bg:pink;
.header{background:$bg};
$place:top;
如果变量需要镶嵌在字符串之中,就必须需要写在#{}
之中.
.header{
  margin-#{$place}:20px;
}

2.2计算功能

body{
            margin:(14px/2);
            top:50px+100px;
            roght:$var*10%;
      }

2.3嵌套

div h{
  color:red;
}
可以改写为
    div{
            hi{
                  color:red
             }
       }

2.4代码重写

2.41继承

//SASS允许一个选择器,继承另一个选择器.比如,现有class1:
.class1{
            border:1px solid #ddd;
      }
.class2{
            @extend.class1;
            font-size:120%;
      }

2.42Mixin

//是可以重用的代码块
   @mixin left{
              float:left;
              margin-left:10px;
      }
div{
              @include left;
      }

//mixin的强大之处,在于可以指定参数和缺省值.
@mixin left($value:10px){
               float:left;
               margin-right:$value;
}
div{
               @include left(20px)
     }

//可以传递多个参数
@mixin wh($w:100px;$h:100px0{
              width:$w;
              height:$h;
}
div{
              @include wh(200px,200px);
    }

2.5插入文件

@import命令,用来插入外部文件.
@import"path/filename.scss"
如果插入的是.css文件,则等同于css的import的命令.
@import"foo.css"

2我掌握了的
2.1变量

$bg:pink;
.header{background:$bg};
$place:top;
如果变量需要镶嵌在字符串之中,就必须需要写在#{}
之中.
.header{
  margin-#{$place}:20px;
}

2.2计算功能

body{
            margin:(14px/2);
            top:50px+100px;
            roght:$var*10%;
      }

2.3嵌套

div h{
  color:red;
}
可以改写为
    div{
            hi{
                  color:red
             }
       }

2.4代码重写

2.41继承

//SASS允许一个选择器,继承另一个选择器.比如,现有class1:
.class1{
            border:1px solid #ddd;
      }
.class2{
            @extend.class1;
            font-size:120%;
      }

2.42Mixin

//是可以重用的代码块
   @mixin left{
              float:left;
              margin-left:10px;
      }
div{
              @include left;
      }

//mixin的强大之处,在于可以指定参数和缺省值.
@mixin left($value:10px){
               float:left;
               margin-right:$value;
}
div{
               @include left(20px)
     }

//可以传递多个参数
@mixin wh($w:100px;$h:100px0{
              width:$w;
              height:$h;
}
div{
              @include wh(200px,200px);
    }

2.5插入文件

@import命令,用来插入外部文件.
@import"path/filename.scss"
如果插入的是.css文件,则等同于css的import的命令.
@import"foo.css"

3我没掌握的
1.1配置webstoem的安装环境

http://www.jianshu.com/p/c482c6ea0a4b

1.2sass

http://www.jianshu.com/p/0f96f42b6924