【金秋打卡】第5天-玩转组件库搭建全流程

第一模块

​ 课程名称：玩转组件库搭建全流程

​ 章节名称：

• 3-2 编写html结构的样式代码

​ 讲师姓名：郭小新

第二模块

​ 课程内容(概述)

​ 1、Sass的优点

兼容Css、特性丰富、成熟、行业认可、社区庞大、众多框架使用Sass构建

​ 2、如何基于html和Sass样式编写组件

第三模块

用rollup打包组件库(三) - 用Css原子化思想实现UI样式

基于上一篇文章，这次用Css原子化思想实现UI样式。

什么是原子化：原子化 Css 是一种 Css 的架构方式，它倾向于小巧且用途单一的class，并且会以视觉效果进行命名。是一类基础 Css 的统称。

Sass：Sass是Css3语言的扩展，能帮助我们省事地写出更好的样式表，编译出标准的Css代码用于各种生产环境。本项目采用Sass来编写样式。

安装编译Sass插件

npm install rollup-plugin-postcss autoprefixer --save-dev

rollup.config.js增加编译Sass配置

// 在rollup.config.js plugins增加以下配置亦可
...
module.exports = {
    plugins: [
        ...
        postcss({
            // 使用autoprefixer插件来给Css样式加前缀
            plugins: [autoprefixer()],
            // 是否提取到文件 这里亦可填写文件路径path.resolve('dist/my-custom-file-name.css')
            extract: true,
            // 开启压缩
            minimize: true,
            // 处理的文件后缀
            extensions: ['css', 'Sass']
        })
        ...
    ]
}

部分语法示例

// 生成字体大小样式 从10开始递增2
@mixin GentFontSize($start, $end, $step) {
    .max-font-0 {
        font-size: 0;
    }
    .max-font-100pct {
        font-size: 100%;
    }
    $m: $start;
    @while $m <=$end {
        .max-font-#{$m} {
            font-size: #{$m}px;
        }
        $m: $m + $step;
    }
}
@include GentFontSize(10, 60, 2);

编译后生成的代码如下

.max-font-10{font-size:10px}
.max-font-12{font-size:12px}
...
.max-font-60{font-size:60px}

使用

<ExtButton clzss="max-h-50 max-p-10 max-font-20" text="这是button" />

Sass语法可查看对应官网说明

第四模块