day09

作者: 相信自己_胡 | 来源:发表于2017-11-16 23:47 被阅读0次

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

    相关文章

      网友评论

          本文标题:day09

          本文链接:https://www.haomeiwen.com/subject/gxqdvxtx.html