A今天学了什么
1.配置webstorm的安装环境
2.sass的语法
a.变量
$bg:pink;
.header{background:$bg};
$place:top;
如果变量需要镶嵌在字符串之中，就必须写在#{ }之中。
.header{
margin-#{$place}:20px;
}
3.计算功能
body{
margin:(14px/2);
top:50px+100px;
right:$var*10%;
}
4.嵌套
div h{
color:red;
}
可以改写为
div{
hi{
color:red;
}
}
5.代码重用
继承@extend
//SASS允许一个选择器，继承另一个选择器。比如
class1:
.class1{
border:1px solid #ddd;
}
.class2{
@extend .class1;
font-sizi:120%;
}
6.Mixin 是可以重用的代码块
比如：
@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:100px){
width:$w;
height:$h;
}
div{
@include wh(200px,200px);
}
7.插入文件
@import命令，用来插入外部文件
@import"path/filename.scss";
如果插入的是.css文件，则等同于css的import命令。
@import"foo.css";
B我掌握好的地方
4.嵌套
div h{
color:red;
}
可以改写为
div{
hi{
color:red;
}
}
5.代码重用
继承@extend
//SASS允许一个选择器，继承另一个选择器。比如
class1:
.class1{
border:1px solid #ddd;
}
.class2{
@extend .class1;
font-sizi:120%;
}
C我掌握不好的地方
1.配置webstorm的安装环境
2.sass的语法
a.变量
$bg:pink;
.header{background:$bg};
$place:top;
如果变量需要镶嵌在字符串之中，就必须写在#{ }之中。
.header{
margin-#{$place}:20px;
}
3.计算功能
body{
margin:(14px/2);
top:50px+100px;
right:$var*10%;
}
6.Mixin 是可以重用的代码块
比如：
@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:100px){
width:$w;
height:$h;
}
div{
@include wh(200px,200px);
}
7.插入文件
@import命令，用来插入外部文件
@import"path/filename.scss";
如果插入的是.css文件，则等同于css的import命令。
@import"foo.css";
