zoukankan      html  css  js  c++  java
  • sass—使用自定义function和@each实现栅格布局

    /*使用自定义function和@each实现栅格布局*/

    @function buildLayout($num: 5){
    $map: (defaultValue: 0); //不能直接生成col,需要设置一个默认值
    $rate: percentage(1 / $num); //均分并取百分数
    @for $i from 1 through $num{ //1为起始值,5为终止值遍历生成
    $tmpMap: (col#{$i}  $rate * $i); //定义好key和value
    $map: map-merge($map,$tmpMap); //写入新的map
    }
    $map:map-remove($map,defaultValue); //删除默认值
    @return $map; //返回新的map
    }
    @mixin buildLayout($num: 5){
    $map:buildLayout($num);
    @each $key,$value in $map{
    .#{$key}{
    $value;
    }
    }
    }

    @debug buildLayout(); //因为有默认值所以可不传递参数,否则必须传
    /*控制台输出结果: col1:20%,col2:40%,col3:60%,col4:80%,col5:100% */
    @include buildLayout(10);//根据传递的参数来均分栅格,10就是10份

    没有人能一路单纯到底,但是要记住,别忘了最初的自己!
  • 相关阅读:
    学习进度笔记
    学习进度笔记
    学习进度笔记
    《一级架构师》阅读笔记
    学习进度笔记
    学习进度笔记
    学习进度笔记
    mysql
    error: 'wblog/' does not have a commit checked out
    有用的网页
  • 原文地址:https://www.cnblogs.com/LindaBlog/p/10396646.html
Copyright © 2011-2022 走看看