zoukankan      html  css  js  c++  java
  • 项目中scss提取可复用mixin函数

    提取公共样式base,mixin的使用

    定义minxi.scss文件

    //flex布局复用
    @mixin flex($hov:space-between,$col:center) {
      display: flex;
      justify-content: $hov;
      align-items: $col;
    }
    
    @mixin bgImg($w:0,$h:0,$img:'',$size:contain) {
      display: inline-block;
       $w;
      height: $h;
      background: url($img) no-repeat center;
      background-size: $size;
      // margin-right: 4px;
    }
    

      使用方式:

    @import "./../assets/mixin.scss";
    
     @include flex();
    
     @include bgImg(16px,12px,"/imgs/icon-cart-checked.png");
    

      好处:针对大型项目提取复用性组件可以方便日后开发的维护和迭代。但是也需要有人对文件进行维护。

    集思广益,仅供学习,侵权即删!!
  • 相关阅读:
    js函数调用模式
    js闭包和回调
    js原型
    oracle sql优化笔记
    shell脚本学习
    程序与资源管理
    vi/vim学习
    压缩和解压缩
    用户及用户组
    万用字符和特殊字符
  • 原文地址:https://www.cnblogs.com/hudunyu/p/13747627.html
Copyright © 2011-2022 走看看