A我今天学了什么
1.配置webstorm的安装环境
http://www.jianshu.com/p/c482c6ea0a4b
2.sass的语法
http://www.jianshu.com/p/0f96f42b6924
3.4.1继承
//SASS允许一个选择器,继承另一个选择器。比如,现有class1:
.class1 {
border: 1px solid #ddd;
}
.class2 {
@extend .class1;
font-size:120%;
}
4.Mixin
@mixin left {
float: left;
margin-left: 10px;
}
div {
@include left;
}
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
div {
@include left(20px);
}
5.插入文件
@import "path/filename.scss";
如果插入的是.css文件,则等同于css的import命令。
@import "foo.css";
6.动画
动画animation
1.定义@keyframes
A.@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
B.@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
div{
animation:myfirst 2s;
}
div{
animation:myfirst 2s infinite; //无限循环
}
B我今天掌握了什么
1.配置webstorm的安装环境
http://www.jianshu.com/p/c482c6ea0a4b
2.sass的语法
http://www.jianshu.com/p/0f96f42b6924
3.4.1继承
//SASS允许一个选择器,继承另一个选择器。比如,现有class1:
.class1 {
border: 1px solid #ddd;
}
.class2 {
@extend .class1;
font-size:120%;
}
4.Mixin
@mixin left {
float: left;
margin-left: 10px;
}
div {
@include left;
}
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
div {
@include left(20px);
}
5.插入文件
@import "path/filename.scss";
如果插入的是.css文件,则等同于css的import命令。
@import "foo.css";
C我今天没掌握什么
6.动画
动画animation
1.定义@keyframes
A.@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
B.@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
div{
animation:myfirst 2s;
}
div{
animation:myfirst 2s infinite; //无限循环
}
网友评论