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
