day10

作者: Rosemarry丶 | 来源:发表于2017-11-09 21:24 被阅读0次

    A我今天学了什么

    1.配置webstorm的安装环境

    http://www.jianshu.com/p/c482c6ea0a4b   //简书里有详细步骤
    

    2.sass的语法

    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;
        right: $var * 10%;
      }
    
    

    2.3嵌套

    div h{
      color:red;
    }
    可以改写为
     div {
        hi{
          color:red;
        }
      }
    
    

    2.4代码重用

    2.4.1继承
    //SASS允许一个选择器,继承另一个选择器。比如,现有class1:
    .class1 {
        border: 1px solid #ddd;
      }
    
    .class2 {
        @extend .class1;
        font-size:120%;
      }
    
    

    2.4.2Mixin

    //是可以重用的代码块
     @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);
      }
    
    

    2.5插入文件

    @import命令,用来插入外部文件。
    
     @import "path/filename.scss";
    如果插入的是.css文件,则等同于css的import命令。
    
    @import "foo.css";
    
    

    我掌握了什么

    1.配置webstorm的安装环境

    http://www.jianshu.com/p/c482c6ea0a4b   //简书里有详细步骤
    

    2.sass的语法

    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;
        right: $var * 10%;
      }
    
    

    2.3嵌套

    div h{
      color:red;
    }
    可以改写为
     div {
        hi{
          color:red;
        }
      }
    
    

    2.4代码重用

    2.4.1继承
    //SASS允许一个选择器,继承另一个选择器。比如,现有class1:
    .class1 {
        border: 1px solid #ddd;
      }
    
    .class2 {
        @extend .class1;
        font-size:120%;
      }
    
    

    2.4.2Mixin

    //是可以重用的代码块
     @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);
      }
    
    

    2.5插入文件

    @import命令,用来插入外部文件。
    
     @import "path/filename.scss";
    如果插入的是.css文件,则等同于css的import命令。
    
    @import "foo.css";
    
    

    c我没有掌握什么

    全部掌握

    相关文章

      网友评论

          本文标题:day10

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