Directorio de artículos
-
- Qué es unocss?
- Ventajas de unocss
- Instalar sin problemas
- Configure el complemento en el archivo de configuración de la herramienta de empaquetado
- Cree un archivo de configuración `uno.config.ts
- Utilizado en main.ts
- Instalar el complemento vscode unocss
- Consultar documentos interactivos.
- Uso básico (los siguientes son algunos ejemplos comunes, pero no significan que sean los únicos)
- Uso relacionado con el relleno
- uso relacionado con magin
- Uso relacionado con Flex
- Uso relacionado con el texto
- Uso de configuración
- Un atajo
- Atajos dinámicos
- Resumir
Qué es unocss?
uncss es un motor CSS atómico en tiempo real que le permite controlar el estilo de elementos con nombres de clases cortos sin escribir código CSS complejo.
Ventajas de unocss
- Le permite desarrollar y crear prototipos rápidamente sin tener que pensar en los detalles de CSS.
- Puede hacer que tus archivos CSS sean más pequeños porque solo genera las clases de utilidad que usas.
- Hace que su CSS sea más consistente porque sigue un conjunto preestablecido de reglas y variables.
- Hace que su CSS sea más flexible ya que admite clases de herramientas, variantes, directivas e íconos personalizados.
- Hace que su CSS sea más fácil de mantener porque evita conflictos de estilo y duplicación de código.
Instalar sin problemas
pnpm add -D unocss
// or
yarn add -D unocss
// or
npm install -D unocss
Configure el complemento en el archivo de configuración de la herramienta de empaquetado
configuración de invitaciones
// vite.config.ts
import UnoCSS from 'unocss/vite'
import {
defineConfig } from 'vite'
export default defineConfig({
plugins: [
UnoCSS(),
],
})
Configurar en webpack5
npm install @unocss/webpack
// webpack.config.js
const UnoCSS = require('@unocss/webpack').default
module.exports = {
plugins: [
UnoCSS(),
],
optimization: {
realContentHash: true,
},
}
Configurar en webopack4
npm install @unocss/webpack
// webpack.config.js
const UnoCSS = require('@unocss/webpack').default
module.exports = {
plugins: [
UnoCSS(),
],
css: {
extract: {
filename: '[name].[hash:9].css',
},
},
}
Utilizado en andamios vue (webpack5)
//vue.config
const {
defineConfig } = require("@vue/cli-service");
const UnoCSS = require("@unocss/webpack").default;
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
plugins: [UnoCSS()],
optimization: {
realContentHash: true,
},
},
});
Cree un archivo de configuración `uno.config.ts
// uno.config.ts
import {
defineConfig, presetAttributify, presetUno } from 'unocss'
export default defineConfig({
presets: [
presetAttributify({
/* preset options */ }),
presetUno(),
],
})
Utilizado en main.ts
// main.ts
// vite如下配置
import 'virtual:uno.css'
// webpack如下配置
import 'uno.css'
Instalar el complemento vscode unocss
como muestra la imagen
Configure en settings.json, la función aquí es proporcionar indicaciones inteligentes al escribir CSS.
"editor.quickSuggestions": {
"strings": true,
"other": true,
"comments": true,
},
Después de la configuración, como se muestra a continuación
Consultar documentos interactivos.
¿Qué debo hacer si soy nuevo en esto? Solo soy una gallina. Entonces consulta la documentación interactiva de unocss.
Ingrese el atributo en él para obtener el nombre de la clase. como muestra la imagen
Uso básico (los siguientes son algunos ejemplos comunes, pero no significan que sean los únicos)
unocss admite unidades preestablecidas y también puede personalizar unidades, por ejemplo
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.px-10rpx {
padding-left: 10rpx;
padding-right: 10rpx;
}
Uso relacionado con el relleno
.p-t-1 {
padding-top: 0.25rem;
}
.p-b-1 {
padding-bottom: 0.25rem;
}
.p-l-1 {
padding-left: 0.25rem;
}
.p-r-1 {
padding-right: 0.25rem;
}
.p-1 {
padding: 10px;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
uso relacionado con magin
El uso de margen y relleno es exactamente el mismo
, por ejemplo:
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.my-1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
Uso relacionado con Flex
El uso es similar. A continuación se muestran algunos ejemplos comunes:
.flex {
display: flex;
}
.flex-1 {
flex: 1 1 0%;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
Uso relacionado con el texto
.color-#999 {
--un-text-opacity: 1;
color: rgba(153, 153, 153, var(--un-text-opacity));
}
.text-12px {
font-size: 12px;
}
.break-all {
word-break: break-all;
}
Uso de configuración
- Configuración de reglas estáticas
export default defineConfig({
rules: [
['m-1', {
margin: '0.3rem' }]
]
})
Después de la configuración anterior, se detecta m-1 en css y se compilará en
.m-1 {
margin: 0.3rem; }
- reglas dinámicas
export default defineConfig({
rules: [
/** match[1]代表获取到的值 */
[/^m-(\d+)$/, match => ({
margin: `${
+match[1] * 10}px` })],
[/^p-(\d+)$/, match => ({
padding: `${
+match[1] * 10}px` })],
]
})
De esta manera, se puede modificar el tamaño preestablecido de unocss, por ejemplo, m-1 se compilará en
.m-1 {
margin: 10px; }
Un atajo
En vscode, todos usamos teclas de método abreviado para generar código con un solo clic, y unocss no es una excepción. Si tiene un cuadro y el contenido dentro debe estar centrado verticalmente, entonces se puede definir como
export default defineConfig({
shortcuts: [
'flex-center': 'flex items-center justify-center',
]
})
Atajos dinámicos
export default defineConfig({
shortcuts: [
[/^base-border-(.*)$/, match => `border-1 border-style-dashed border-${
match[1]}`],
]
})
Resultado de la compilación
.base-border-red {
border-width: 1px;
--un-border-opacity: 1;
border-color: rgba(248, 113, 113, var(--un-border-opacity));
border-style: dashed;
}
Resumir
Es posible que se sienta un poco incómodo cuando comience con unocss por primera vez. Después de escribir demasiado y el complemento uncss tiene indicaciones gramaticales inteligentes, nuestra eficiencia en el trabajo puede mejorar enormemente. El siguiente paso es la cuestión del dominio de uncss. Vamos, extraños que leen esto.