论坛购物网站开发,自助网站建设哪里可以,网站开发维护合同范本,成都网站建设好多科技目录
一、定义
二、原子化工具
2.1、tailwind
2.1.1、以PostCss插件形式安装
2.1.2、不依赖PostCss安装
2.1.3、修改原始配置
2.2、unocss
三、优缺点
3.1、优点
3.2、缺点
一、定义 定义#xff1a;使用一系列的助记词#xff0c;利用类名来代表样式。 二、原子化…目录
一、定义
二、原子化工具
2.1、tailwind
2.1.1、以PostCss插件形式安装
2.1.2、不依赖PostCss安装
2.1.3、修改原始配置
2.2、unocss
三、优缺点
3.1、优点
3.2、缺点
一、定义 定义使用一系列的助记词利用类名来代表样式。 二、原子化工具
2.1、tailwind
翻译过来是“顺风”的意思。 官网Installation - Tailwind CSS 2.1.1、以PostCss插件形式安装
如果是单纯的文件夹
(1)、初始化npm init -y
(2)、安装3个插件npm i tailwindcss postcss-cli autoprefixer -D
(3)、生成相关配置文件npx tailwind init -p
(4)、在文件夹里新建src,在sc下新建style.css
tailwind base;
tailwind components;
tailwind utilities;
(5)、将package.json里scripts的内容改为build: postcss src/style.css -o dist/tailwind.css
(6)、npm run build 成功后就可以看到dist/tailwind.css即编译成功。(注意node版本一定在16不然编译报错。)
(7)、以index.html为例
link relstylesheet hreftailwind.css
div classtext-base p-1 border border-black border-solid/div
//等同于
.text-base {font-size: 16px;
}
.p-1 {padding: 4px;
}
.border {border-width: 1px;
}
.border-black {border-color: black;
}
.border-solid {border-style: solid;
}剩下的官网里都有可以自己去找。
2.1.2、不依赖PostCss安装
几乎和上面一样就是这两个命令行npm i tailwindcss autoprefixer -D和npx tailwind init稍有改变配置文件内容变成了 build: tailwind build src/style.css -o dist/tailwind.css。
2.1.3、修改原始配置
以“text-base”为例
数组里的两个元素分别是 font-size 和 line-height 两个样式。
module.exports {content: [],theme: {extend: {padding: {1: 30px},fontSize: {base: [30px, 2rem]}},},plugins: [],
}
//修改后的p-1和text-base
.p-1 {padding:30px;
}
.text-base {font-size:30px;line-height:2rem;
}
原子类名太多很难记住不能每次都去查看文档可以安装插件Tailwind CSS IntelliSense解决。
2.2、unocss
UNO翻译过来是“联合国组织”的意思。 官网UnoCSS: The instant on-demand Atomic CSS engine 原子类名太多很难记住不能每次都去查看文档可以安装插件UnoCss或者To Unocss解决。
(1)、安装
npm i unocss iconify-json/ep unocss/preset-rem-to-px unocss/transformer-directives -D iconify-json/ep 是Element Plus图标库 Icônes unocss/preset-rem-to-px 将unocss自带的rem转为px unocss/transformer-directives 可以使用apply、screen、theme函数 (2)、vite.config.ts
import UnoCSS from unocss/vite
import { defineConfig } from vite
export default defineConfig({plugins: [UnoCSS(),],
})
(3)、创建一个 uno.config.ts文件
import presetRemToPx from unocss/preset-rem-to-px
import transformerDirectives from unocss/transformer-directives
import { defineConfig, presetAttributify, presetUno, transformerVariantGroup, presetIcons } from unocss
export default defineConfig({presets: [presetAttributify(),presetUno(),presetRemToPx({baseFontSize: 4}),//eg:mt-1或转换为margin-top:1pxpresetIcons({scale: 1.2,warn: true})//自动引入图标配置],transformers: [transformerVariantGroup(), transformerDirectives()],rules: [// m-1可转换为margin:0.25rem// [/^m-(\d)$/, ([, d]) ({ margin: ${d / 4}rem })],],//自定义配置项shortcuts: [{flex-center: flex items-center justify-center,//垂直居中flex-end: flex items-center justify-end,//放在最后flex-middle: flex items-center,//垂直居中flex-between: flex items-center justify-between,//分开两边flex-col-center: flex flex-col justify-center,//竖着居中}]//自定义属性 一个属性可以对应多个unocss类值
})
(4)、main.ts全局配置
import virtual:uno.css
(5)、使用 (6)、图标应用
div i-ep:dish/div
i w110 h100 block i-ep:switch-button/i
三、优缺点
3.1、优点 (1)、随着业务增长css文件大小的增长放缓了 (2)、HTML结构可以随处移动同样样式不变 (3)、样式会随着HTML结构删除的同时一起被删除 (4)、节省了为类名取名字的精力。 3.2、缺点 (1)、定义原子类记住类名耗费精力 (2)、HTML结构变得臃肿 (3)、团队合作时解读其他成员代码耗费时间 原子化工具还有windi...等等这里着重介绍上面两种。
