用js快速生成一个简单的css原子库 例如: .mr-18 .pl-18

第三方css原子库的缺点

比如 tailwindcss,有学习成本最开始写的时候效率可能还没有我们自己手写效率高,需要配置,会有原始样式被覆盖的问题;总之就是一个字

自己搓的优点
  • 学习成本低
  • 灵活
  • 不会有副作用
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let str = "";function createClass(classPrefix,cssAttrs,num=41){for (let i = 0; i < num; i++) {str = str +`.${classPrefix}${i}{ ${cssAttrs}: ${i}px};`;}}// margincreateClass('ml-','margin-left')createClass('mr-','margin-right')createClass('mt-','margin-top')createClass('mb-','margin-bottom')// paddingcreateClass('p-','padding')createClass('pl-','padding-left')createClass('pr-','padding-right')createClass('pt-','padding-top')createClass('pb-','padding-bottom')// font-sizecreateClass('fs-','font-size')// width、heightcreateClass('w-','width')createClass('h-','height')// row-gap、column-gapcreateClass('row-gap-','row-gap')createClass('column-gap-','column-gap')console.log(JSON.stringify(str));</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/34331.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux 终端操作命令(2)内部命令

Linux 终端操作命令 也称Shell命令&#xff0c;是用户与操作系统内核进行交互的命令解释器&#xff0c;它接收用户输入的命令并将其传递给操作系统进行执行&#xff0c;可分为内部命令和外部命令。内部命令是Shell程序的一部分&#xff0c;而外部命令是独立于Shell的可执行程序…

Django笔记之数据库查询优化汇总

1、性能方面 1. connection.queries 前面我们介绍过 connection.queries 的用法&#xff0c;比如我们执行了一条查询之后&#xff0c;可以通过下面的方式查到我们刚刚的语句和耗时 >>> from django.db import connection >>> connection.queries [{sql: S…

蓝桥杯上岸考点清单 (冲刺版)!!!

大家好 我是寸铁&#x1f4aa; 真题千千万万遍&#xff0c;蓝桥省一自然现&#xff01; ✌️ 日更3000里&#xff0c;蓝桥眷顾你 &#x1f31f; 暴力出奇迹&#xff0c;打表过样例 &#x1f44a; 冲刺蓝桥杯省一模板大全来啦 &#x1f525; 蓝桥杯4月8号就要开始了 &#…

Docker安装和维护mantisbt(Ubuntu 18.04)

安装mantisBT 安装docker sudo apt install docker.io -y下载镜像 选择下面的镜像只是因为下载的人多。。。 docker pull xlrl/mantisbt运行镜像 docker run xlrl/mantisbt

Kafka API与SpringBoot调用

文章目录 首先需要命令行创建一个名为cities的主题&#xff0c;并且创建该主题的订阅者。 1、使用Kafka原生API1.1、创建spring工程1.2、创建发布者1.3、对生产者的优化1.4、批量发送消息1.5、创建消费者组1.6 消费者同步手动提交1.7、消费者异步手动提交1.8、消费者同异步手动…

Qt与电脑管家2

1.竖线的添加与样式的修改&#xff1a; color: rgb(238, 238, 238); 2. 通过修改之前的自定义btn类代码&#xff0c;可以比较容易地创造出各种各样的按钮类 头像的样式表代码&#xff1a; QPushButton{ border-image: url(:/images_up/icon.jpg); border-radius:20px; } QPu…

Expo项目 使用Native base UI库

装包&#xff1a; yarn add native-base expo install react-native-svg12.1.1 Index.js: import React from react import { View, Text } from react-native import useList from ./useList import { NativeBaseProvider, Button, Box } from native-base import styles f…

ArcGIS Pro技术应用(暨基础入门、制图、空间分析、影像分析、三维建模、空间统计分析与建模、python融合)

GIS是利用电子计算机及其外部设备&#xff0c;采集、存储、分析和描述整个或部分地球表面与空间信息系统。简单地讲&#xff0c;它是在一定的地域内&#xff0c;将地理空间信息和 一些与该地域地理信息相关的属性信息结合起来&#xff0c;达到对地理和属性信息的综合管理。GIS的…

Spannable配合AnimationDrawable实现TextView中展示Gif图片

辣的原理解释&#xff0c;反正大家也不爱看&#xff0c;所以直接上代码了 长这样&#xff0c;下面两个图是gif&#xff0c;会动的。 package com.example.myapplication;import android.content.Context; import android.graphics.Bitmap; import android.graphics.drawable…

[静态时序分析简明教程(九)]多周期路径set_multicycle_path

静态时序分析简明教程-多周期路径 一、写在前面1.1 快速导航链接 二、多周期路径2.1 多周期路径的SDC命令2.2 路径常规约束2.3 建立/保持规格2.4 位移量2.5 多时钟周期案例 三、总结 一、写在前面 一个数字芯片工程师的核心竞争力是什么&#xff1f;不同的工程师可能给出不同的…

Java设计模式-抽象工厂(Abstract Factory)模式

说明 抽象工厂&#xff08;Abstract Factory&#xff09;模式是一种工厂模式。用一个接口类中的不同方法创建不同的产品。 为了便于理解&#xff0c;先打个比方&#xff1a; 将老虎、狮子、猴子比作三个抽象产品的接口类&#xff0c;也就是有3个产品等级。 老虎又分动物园的…

EPICS libCom库(2) -- epicsRingBytes

epicsRingBytes.h包含以下函数&#xff1a; epicsRingBytesId epicsRingBytesCreate(int nbytes); void epicsRingBytesDelete(epicsRingBytesId id); int epicsRingBytesGet(epicsRingBytesId id, char *value,int nbytes); int epicsRingBytesPut(epicsRingBytesId id, char…

山景DSP芯片可烧录AP8224C2音频处理器方案

AP8224C2高性能32位音频应用处理器AP82系列音频处理器是面向音频应用领域设计的新一代SoC平台产品&#xff0c;适用于传统音响系统、新兴的蓝牙或Wifi 无线音频产品、Sound Bar 和调音台等市场。该处理器在总体架构和系统组成上&#xff0c;充分考虑了音频领域的特点&#xff0…

MYSQL幻读问题

幻读是什么&#xff1f; “Phantom Problem是指在同一事务下&#xff0c;连续执行两次同样的SQL语句可能导致不同的结果&#xff0c;第二次的SQL语句可能会返回之前不存在的行。”摘录来自 MySQL技术内幕&#xff1a;InnoDB存储引擎(第2版) (数据库技术丛书) ​ 通俗来说就是&a…

【积水成渊】9 个CSS 伪元素

大家好&#xff0c;我是csdn的博主&#xff1a;lqj_本人 这是我的个人博客主页&#xff1a; lqj_本人_python人工智能视觉&#xff08;opencv&#xff09;从入门到实战,前端,微信小程序-CSDN博客 最新的uniapp毕业设计专栏也放在下方了&#xff1a; https://blog.csdn.net/lbcy…

java spring websocket

1.简介&#xff1a;WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器实现持久连接的全双工双向通信&#xff0c;客户端可以主动的向服务器发起请求以获取数据&#xff0c;服务器也可以主动向客户端返回响应以传输数据。 在JS中创建WebSocket后&#xff0c;会…

Jupyter Notebook 500 : Internal Server Error

1. 这个问题的根本原因在于&#xff1a; pygments 包 版本过高。 安装pygments 2.6.1 2.jupyter版本如下 如果某个版本有冲突&#xff0c;卸载了重新安装一下就行。 安装命令&#xff1a; pip install pygments 2.6.1 -i https://pypi.tuna.tsinghua.edu.cn/simple 另外…

vue项目中el-tree :横向和纵向滚动条设置

一、方法1&#xff1a; ①纵向滚动条容易设置&#xff0c;只需要在el-tree组件中设置height即可 ②横向滚动条稍微复杂&#xff0c;如下代码&#xff08;或者通过js计算&#xff09; <template><div class"tree-scroll"><el-input style"width…

界面控件DevExpress WPF Chart组件——拥有超快的数据可视化库!

DevExpress WPF Chart组件拥有超大的可视化数据集&#xff0c;并提供交互式仪表板与高性能WPF图表库。DevExpress Charts提供了全面的2D / 3D图形集合&#xff0c;包括数十个UI定制和数据分析/数据挖掘选项。 PS&#xff1a;DevExpress WPF拥有120个控件和库&#xff0c;将帮助…

Mysql中插入数据,并返回自增主键的值

创建数据库和表使用 insert into 进行插入数据使用 RETURN_GENERATED_KEYS 进行返回插入的这条数据 具体方法如下&#xff1a; Testvoid addGetPk(){try{Statement stmt conn.createStatement();String sql String.format("insert into t_students values(null,%s,%s,%d…