zoukankan      html  css  js  c++  java
  • 用预处理语言sass中的 @for @if 整活

    /**文字 & 背景 & 边框颜色*/
    $color-list:#F04055 #989898;
    $color-name-list : red gray lightgray;
    @each $name in $color-name-list {
      $i: index($color-name-list, $name);

      .text-#{$name} {
        color: nth($color-list, $i);
      }

      .bg-#{$name} {    
       background-color:nth($color-list, $i);
      }
    }
     

    先使用each循环$color-name-list数组;

    使用index函数获取$name的下标;

    nth 函数可以直接访问数组中的某一项;

    然而使用bg-lightgray就会出问题。

    解决方式:

    1.可以在$color-list中添加对应的颜色值

    2.可以使用@if 

    使用@if解决

    /**文字 & 背景 & 边框颜色*/
    $color-list:#F04055 #989898 #ededed #80848f #FFFFFF #f90 #5cadff #19be6b #1ab394 #000000;
    $color-name-list : red gray default deepGray white orange blue success primary black lightgray;
    
    @each $name in $color-name-list {
      @if #{$name}==lightgray {
        .bg-#{$name} {
          background: rgba(253, 253, 253, .95);
        }
      } @else {
        $i: index($color-name-list, $name);
    
        .text-#{$name} {
          color: nth( $color-list, $i);
        }
        .bg-#{$name} {
          background-color: nth($color-list, $i);
        }
        .border-#{$name} {
          border-color: nth($color-list, $i);
        }
      }
    }
  • 相关阅读:
    Bootstrap学习笔记
    鼠标画矩形openCV
    开关openCV
    openCV图像形态学
    Android自定义ListView的Item无法响应OnItemClick的解决办法
    0-1背包问题
    java实现矩阵连乘的动态规划
    java 实现排序
    微信小程序--箭头表达式
    微信小程序--navigator url 跳转失效
  • 原文地址:https://www.cnblogs.com/manhuai/p/14550663.html
Copyright © 2011-2022 走看看