Prefacio
Una vez escrito un proyecto, se previsualizará normalmente en la página web y el resultado se entregará al gerente de producto.
Estilo de borrador de diseño
Estilo real del producto en el teléfono móvil.
Producto: "¿Por qué no tienes ningún espacio en esta cosa?"
Yo: "¿Por qué lo mío es normal??? Na na na mira mi teléfono (de RedmeK50Utral)"
Producto: "Oh, mira mi teléfono (de Honor 20)"
I:"..."
En este punto, miré un montón de lagunas en mi código, luego miré su antiguo Android que aún no se había retirado y ¡me puse a pensar profundamente!
Solución
Mi idea es establecer el espaciado derecho e inferior en el elemento secundario y establecer el mismo valor mínimo negativo en la misma dirección en el elemento principal para lograr el mismo efecto de espacio.
// xxxx.scss
.xxxxActions {
display: flex;
margin-right:-12px;
margin-bottom:-12px;
.xxxaa {
margin-right:12px;
margin-bottom:12px;
}
}
¿Crees que este es el final? ¡filtración! No tan. ¿No resulta agotador escribir esto en cada archivo? Como tipo vago, desdeño mucho escribir así, no es lo suficientemente elegante.
uso de mixin descarado
Cualquiera que haya escrito vue2 debe saber qué es un mixin, lo mismo ocurre con sass.
Un miembro de la audiencia: "¡Sé esto y esto!"
En pocas palabras, mezclar es meter algunas cosas comunes en él. La traducción al inglés de mixin significa mezclar. Es como si fueras empleado de una tienda de té con leche y estuvieras preparando té con leche: ¡cada taza de té con leche debe estar llena de azúcar! Pero otras cosas son diferentes, en este momento puedes encapsular la fructosa, mezclarla con mixin y mezclarla con el té con leche, esta taza de té con leche está lista. ¿Es muy fácil de entender?
Mezcla de paquetes
@mixin gap($size) {
margin-bottom: calc(0px - $size);
margin-right: calc(0px - $size);
& > * {
margin-right: $size;
margin-bottom: $size;
}
}
Usar mixins
Aquí usamos vue cli5 + webpack5 como ejemplo, y los demás son iguales. En uniapp, escriba mixin directamente en uni.scss, no se requiere configuración redundante.
El primer paso: configurar en vue.config.js, webpack4 simplemente reemplaza datos adicionales con datos.
module.exports = defineConfig({
css: {
loaderOptions: {
sass: {
additionalData: `
@import "@/assets/css/mixin.scss";
`
}
},
},
})
La función de configuración de este paso es introducir automáticamente mixin.scss en cada archivo scss para que se pueda acceder a la función mixin.
Paso 2: usar
.basicBottomActions {
display: flex;
@include gap(10px);
}
Resumir
Lo anterior logra el mismo efecto que la brecha y mantiene una buena compatibilidad. ¡Mamá ya no tiene que preocuparse por no poder usar un teléfono móvil con poca compatibilidad! En resumen, no importa qué herramienta de empaquetado se utilice, ya sea Vite o webpack, el principio es el mismo.