day09

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;  //无限循环
}