用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>Documenttitle>
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};`;
            }
        }
        // margin
        createClass('ml-','margin-left')
        createClass('mr-','margin-right')
        createClass('mt-','margin-top')
        createClass('mb-','margin-bottom')
        // padding
        createClass('p-','padding')
        createClass('pl-','padding-left')
        createClass('pr-','padding-right')
        createClass('pt-','padding-top')
        createClass('pb-','padding-bottom')
        // font-size
        createClass('fs-','font-size')
        // width、height
        createClass('w-','width')
        createClass('h-','height')
        // row-gap、column-gap
        createClass('row-gap-','row-gap')
        createClass('column-gap-','column-gap')


        console.log(JSON.stringify(str));

    script>
body>
html>

你可能感兴趣的:(javascript,css,mr)