首页 > 其他分享 >关于scss手动遍历生成类名

关于scss手动遍历生成类名

时间:2024-03-18 14:34:54浏览次数:21  
标签:scss 遍历 name val px .# value margin 类名

1、自动生成宽度类名

$width-name:300,100;
@each $name in $width-name {
  .w#{$name}{
    width:$name + px;
  }
};
//以上代码将会生成
.w300{
    width:300px;  
};
.w100{
    width:100px;  
}

2、自动生成间距类名

$margin-name:(
  mt:(16,24,10),
  mb:(16),
  ml:(16,18),
  mr:24
);
@each $name,$value in $margin-name{
  @if type-of($value) == list{
    @each $val in $value{
      @if $name == 'mt'{
        .#{$name}#{$val}{
          margin-top:$val + px;
        }
      }@else if $name == 'mb' {
        .#{$name}#{$val}{
          margin-bottom:$val + px;
        }
      }@else if $name == 'ml' {
        .#{$name}#{$val}{
          margin-left:$val + px;
        }
      }@else{
        .#{$name}#{$val}{
          margin-right:$val + px;
        }
      }
    }
  }@else{
    @if $name == 'mt'{
      .#{$name}#{$value}{
        margin-top:$value + px;
      }
    }@else if $name == 'mb' {
      .#{$name}#{$value}{
        margin-bottom:$value + px;
      }
    }@else if $name == 'ml' {
      .#{$name}#{$value}{
        margin-left:$value + px;
      }
    }@else{
      .#{$name}#{$value}{
        margin-right:$value + px;
      }
    }
  }
}
//太多了,截图了一部分效果图

 

标签:scss,遍历,name,val,px,.#,value,margin,类名
From: https://www.cnblogs.com/jzm2842688813/p/18080324

相关文章

  • 你还在用for循环遍历list吗?
    简介Java8API添加了一个新的抽象称为流Stream,可以让你以一种声明的方式处理数据。Stream使用一种类似用SQL语句从数据库查询数据的直观方式来提供一种对Java 集合运算​和表达的高阶抽象。这种风格将要处理的元素集合看作一种流,流在管道中传输,并且可以在管道的节......
  • 二叉树的广度优先遍历(力扣102)
    文章目录题目前知BFS是什么?队列的基本操作有什么?题解一、思路二、解题方法三、Code总结题目Problem:102.二叉树的层序遍历给你二叉树的根节点root,返回其节点值的层序遍历。(即逐层地,从左到右访问所有节点)。前知BFS是什么?树的广度优先遍历(BFS)是一种遍......
  • Leecode 二叉树的前序遍历
    Day2刷题我的思路:用数组list存储遍历结果,利用ArrayList的方法实现嵌套!importjava.util.*;classSolution{//defininganarraylistpublicList<Integer>preorderTraversal(TreeNoderoot){List<Integer>Traversal=newArrayList<>();......
  • 搜索与图论(一)树的遍历/深度/广度/拓扑排序
    文章目录搜索与图论树与图的深度优先遍历举个栗子树的重心思路结论代码如下树与图的广度优先遍历举个例子图中点的层次样例展示代码拓扑排序啥是拓扑排序?解题思路举个栗子题目代码如下搜索与图论树与图的深度优先遍历举个栗子树的重心思路邻接表存储......
  • 数据结构笔记(十四)二叉树的遍历(递归)
    四种访问方式:前序遍历,中序遍历,后序遍历,层序遍历这篇文章主要为前序,中序,后序遍历的递归形式,递归形式较为简单,后面更新遍历的循环形式较为复杂,建议使用递归形式#include<stdio.h>#include<stdlib.h>typedefcharE;typedefstructTreeNode*Node;structTreeNod......
  • 二叉树的迭代遍历
    二叉树前后序遍历(迭代)#include<bits/stdc++.h>usingnamespacestd;structNode{intdata;Node*left;Node*right;Node(intvalue=0):data(value),left(nullptr),right(nullptr){}};Node*insertEle();voidpreorder(Node*pNode);voidmid......
  • 【leetcode】二叉树的前序遍历➕中序遍历➕后序遍历
    大家好,我是苏貝,本篇博客带大家刷题,如果你觉得我写的还不错的话,可以给我一个赞......
  • 二叉树的垂序遍历
    说在前面......
  • vue中sass与SCSS的区别
    在Vue中,通常使用SCSS(SassyCSS)而不是Sass来编写样式。SCSS是Sass的一种语法扩展,提供了更多的功能和灵活性,因此在Vue项目中更常见。下面是Sass和SCSS之间的主要区别:1.**语法**:-Sass使用严格的缩进来表示层级关系,不使用花括号和分号。-SCSS类似于普通的CSS语法,使用花括号......
  • SCSS与CSS的区别
    SCSS(SassyCSS)是一种CSS预处理器,它扩展了CSS的功能,并为样式表的编写提供了额外的便利性。以下是两者之间的主要区别:1.语法扩展:     CSS标准层叠样式表语言,采用简单、扁平化的键值对形式书写。     SCSS基于CSS语法之上增加了嵌套规则、变量、混入(mixins)......