css可能不知道的事?

盘点css中常见的用法：Styled-components (css in js )、csshoudini (js in css）、cssnano（

css-minimizer-webpack-plugin 打包优化，压缩
mini-css-extract-plugin 提取css

）、cssdoodle (组件化)

1.Styled-components 

css in js ,首先是一个js组件，css样式写在js里面，一般格式：

 

 2. js in css 在css里面写js  代表csshoudini

 注册background-canvas绘制方法。绘制一个圆形

 3. css-doodle 

css-doodle最大的特点在于可以创建一个css组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        :root {
            --rule-emoji :(
                :doodle {
                    @grid: 20 / 100vmax;
                    grid-gap: 1px;
                    background: #f9d654;
                    overflow: hidden;
                }
                transition: @r(1s) ease;
                transform: scale(@rand(.1, 1)) rotate(@rand(0, 360)deg);
                :after {
                    content: \@hex(@rand(0x1F600, 0x1F636));  /*将十六进制转换成unicode编码*/
                    opacity: @r(.1,1);
                    font-size: 3vmax;
                }
            )
        }
    </style>
</head>
<body>
    <css-doodle>
        @use: var(--rule-emoji);
    </css-doodle>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.6.1/css-doodle.min.js"></script>
<script>
    const doodle = document.querySelector('css-doodle');
    // 每次点击刷新css-doodle
    doodle.onclick = function () {
        doodle.update();
    };
</script>
</html>
<css-doodle>
        @use: var(--rule-emoji);
</css-doodle>

组件的使用方式

 

posted @ 2022-01-13 16:27  国服第一李师师  阅读(64)  评论(0)    收藏  举报