【金秋打卡】第5天-玩转组件库搭建全流程
2022/10/31 4:24:57
本文主要是介绍【金秋打卡】第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
语法可查看对应官网说明
第四模块
这篇关于【金秋打卡】第5天-玩转组件库搭建全流程的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?
- 2024-05-09企业src漏洞挖掘-有意思的命令执行
- 2024-05-08阿里云域名注册流程,分享给第一次购买域名的新手站长!
- 2024-05-082024年,行业变动下的程序员应该首先学习哪种编程语言?