zoukankan      html  css  js  c++  java
  • Sass--传多个参数

    Sass 混合宏除了能传一个参数之外,还可以传多个参数,如:

    @mixin center($width, $height) {
        width: $width;
        height: $height;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -($height) / 2;
        margin-left: -($width) / 2;
    }

    在混合宏“center” 就传了多个参数。在实际调用和其调用其他混合宏是一样的:

    .box {
       @include center(500px, 300px);
    }

    编译出来css:

    .box-center {
        width: 500px;
        height: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -150px;
        margin-left: -250px;
    }

    有一个特别的参数“...”。当混合宏的参数过多之时,可以使用的参数来替代如:

    @mixin box-shadow($shadows...){
      @if length($shadows) >= 2 {
        -webkit-box-shadow: $shadows;
        box-shadow: $shadows;
      } @else {
        $shadows: 0 0 2px rgba(#000,.25);
        -webkit-box-shadow: $shadows;
        box-shadow: $shadows;
      }
    }

    在实际调用中:

    .box {
       @include box-shadow(0 0 1px rgba(#000, .5), 0 0 2px rgba(#000, .2));
    }

    编译出来的css:

    .box {
       -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
       box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
    }
  • 相关阅读:
    20200721_34代码如何优化以及框架的运用和构建设计
    20200719_33appium应用及H5页面元素定位下
    20200709_29多线程与分布式
    day4_day4_python
    python_day3
    python第二天
    pytihon初学第一天
    移动平均线系列
    网页爬取
    十种经典排序算法
  • 原文地址:https://www.cnblogs.com/qjuly/p/9076722.html
Copyright © 2011-2022 走看看