SCSS循环遍历数组

作者:神秘网友 发布时间:2021-03-10 19:50:04

SCSS循环遍历数组

1.问题背景

  在项目中需要实现下面这样的tab列表效果。每一项都有不同的颜色样式,用css写七个样式的话非常的麻烦~

2.解决方法

  用SCSS的变量和循环方法可以非常简单的实现效果,非常的方便~,

  代码:

//结构
div class="bottomNav"
  div class="item" v-for="(item,i) in bottomNav" :key="i" :class="['item_'+(i+1),item.isActive'active':'']"
    i class="iconfont" :class="item.icont"/i{{item.name}}
  /div
/div

//SCSS
$icon-color: #00fdfb, #ffd200, #fb5911, #2cf698, #5da6fb, #d75efb, #9fff10;  //定义数组变量,数组元素用逗号隔开
@for $i from 1 through length($icon-color) {  //@for $i from 开始值 through 结束值包含结束值  (SCSS 循环是从1开始的~)
  $item: nth($icon-color, $i); //获取数组$i对应的下标值 即颜色值
  .item_#{$i} {
    background: rgba($color: $item, $alpha: 0.15);
    border: 1px solid $item;
    color: $item;
  }
  .active {
    border-width: 2px;
    font-weight: bold;
  }
}

3.SCSS循环语法

  SCSS中循环方法有for循环和each循环,记录下语法~

1.for循环:语法

方式1:@for $i from 开始值 through 结束值包含结束值
方式2:@for $i from 开始值 to 结束值不包含结束值

@for $i from 1 through 3{
  .padding-left#{2 * $i + 8}{
    padding-left: 2 * $i + 8 + px;
  }
}

@for $i from 1 to 3{
  .margin-left#{2 * $i + 8}{
    margin-left: 2 * $i + 8 + px;
  }
}

/**最终编译结果*/
.padding-left10 { padding-left: 10px; }
.padding-left12 { padding-left: 12px; }
.padding-left14 { padding-left: 14px; }

.margin-left10 { margin-left: 10px; }
.margin-left12 { margin-left: 12px; }

2.each循环数组:语法

定义数组: $arrayName: a,b,c...;

循环数组:@each $item in$arrayName

在循环里边得到数组索引: index($arrayName,$item)

$pixelArr: 5, 15;
$position: top, right, bottom, left;
@each $item in $pixelArr {
  $index: index($pixelArr, $item); /**可得到循环的索引*/
  .margin-#{$item} {
    margin: $item + px;
    border-width: $index + px;
  }
  @each $p in $position{
    .margin-#{$p}-#{$item}{
      margin-#{$p}: $item + px;
    }
  }
}

/**最终编译结果*/
.margin-5 {
  margin: 5px;
  border-width: 1px; }

.margin-top-5 {
  margin-top: 5px; }

.margin-right-5 {
  margin-right: 5px; }

.margin-bottom-5 {
  margin-bottom: 5px; }

.margin-left-5 {
  margin-left: 5px; }

.margin-15 {
  margin: 15px;
  border-width: 2px; }

.margin-top-15 {
  margin-top: 15px; }

.margin-right-15 {
  margin-right: 15px; }

.margin-bottom-15 {
  margin-bottom: 15px; }

.margin-left-15 {
  margin-left: 15px; }

本文章教程介绍完毕,更多请访问跳墙网其他文章教程!

SCSS循环遍历数组 相关文章

  1. 数据结构的操作

    1、对数据结构的认识 对于任何数据结构,其基本操作??遍历 + 访问,再具体?点就是:增删查改。数据结构种类很多,但它们存在的?的都是在不同的应?场景,尽可能?效地增删查改。2、如何遍历 + 访问我们仍然从最?层来看,各种数据结构的遍历 + 访问??:两种形式

  2. 疫情加速双循环科技企业如何迈好十四五开年第一步

    科技兴则民族兴,科技强则国家强。 近代以来,每次重大的科技创新,都会引发产业的变革,从而导致大国的兴衰和全球格局的调整。 科技的创新和自立对一个国家的未来至关重要。坚持创新在我国社会主义现代化建设全局中的处于非常重要的位置,必须要把科技自立

  3. JSP第二次

    利用Java程序片,用for二重循环输出一个3行5列的table 1 %@ page language="java" import="java.util.*" pageEncoding="UTF-8"% 2 % 3 String path = request.getContextPath(); 4 String basePath = request.getScheme() + "://" 5 + request.getServerName

  4. Java(七)

    数组操作 遍历数组 1.数组的遍历可以使用for循环来实现; 使用for循环遍历时,定义int i=0,因为索引是从0 开始的,继续循环的条件是 iarray.length,因为当i=array.length时,i的索引超出了范围。 2.数组的循环还可以使用for each 直接迭代数组的每个元素;

  5. 你真的了解for循环遍历么(Java集合容器)

    你真的了解for循环遍历么 今天讲的for循环主要是针对Java语言的JDK1.8,在编程过程中或多或少的遇到过for循环遍历,比如:List、Set、Map等等集合容器,有时候碰到需要对集合容器数据进行相应的增删改操作的时候,都会纠结一番到底会不会出现修改问题呢,如

  6. if,switch选择结构,while,do......while循环结构

    顺序语句 案例 package com.bk201.struct;public class ShunXuDemo { public static void main(String[] args) { System.out.println("H"); System.out.println("e"); System.out.println("l"); System.out.println("l"); System.out.println("o"); }} 从上

  7. 优雅的遍历JavaScript中的对象

    参考文章:https://dmitripavlutin.com/how-to-iterate-easily-over-object-properties-in-javascript/ 遍历js中的对象,包括了遍历对象的key和value,以及还会遍历到继承的对象上的属性(原型上的属性),当有些属性是不可枚举的,是不能遍历到的。下面我们

  8. 1064 Complete Binary Search Tree (30 分)(dfs+层序遍历)

    题目描述: 1064 Complete Binary Search Tree (30 分) A Binary Search Tree (BST) is recursively defined as a binary tree which has the following properties: The left subtree of a node contains only nodes with keys less than the node's key. Th

  9. 字节-LeetCode【重建二叉树】

    //输入某二叉树的前序遍历和中序遍历的结果,请重建该二叉树。假设输入的前序遍历和中序遍历的结果中都不含重复的数字。 // // // // 例如,给出 // // 前序遍历 preorder =[3,9,20,15,7] //中序遍历 inorder = [9,3,15,20,7] // // 返回如下的二叉树: // /

  10. 递归生成树形分级菜单或列表

    三级分类for循环(只能三级分类,逻辑看的有点晕) //查询所有分类 ListSugClassificationParam queryAllList = counterQueryAllclsMapper.queryAllList(); // 组装分类 ListSugClassificationParam returnList = new ArrayList(); // 2.2 提供Map进行缓存,

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2020, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词