课程名称:玩转组件库搭建全流程
章节名称:
讲师姓名:郭小新
课程内容(概述)
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
语法可查看对应官网说明