Prefácio
Uma vez anotado um projeto, ele será visualizado normalmente na página web e o resultado será entregue ao gerente de produto.
Estilo de rascunho de design
Estilo real do produto no celular
Produto: "Por que você não tem espaçamento nessa coisa?"
Eu: "Por que o meu está normal??? Na na na olha meu celular (do RedmeK50Utral)"
Produto: "Oh, olhe meu telefone (do Honor 20)"
EU:"..."
Nesse ponto, observei várias lacunas em meu código, depois olhei para seu antigo Android que ainda não foi aposentado e pensei profundamente!
Solução
Minha ideia é definir o espaçamento direito e inferior no elemento filho e definir o mesmo valor magin negativo na mesma direção no elemento pai para obter o mesmo efeito de lacuna.
// xxxx.scss
.xxxxActions {
display: flex;
margin-right:-12px;
margin-bottom:-12px;
.xxxaa {
margin-right:12px;
margin-bottom:12px;
}
}
Você acha que isso é o fim? vazar! Não tão. Não é cansativo escrever isso em todos os arquivos? Como preguiçoso, tenho muito desdém em escrever assim, não é elegante o suficiente.
uso de mixin atrevido
Qualquer um que tenha escrito vue2 deve saber o que é um mixin. O mesmo vale para atrevimento.
Um membro da audiência: “Eu sei disso e disso!”
Simplificando, mixin é colocar algumas coisas comuns nele. A tradução em inglês de mixin significa misturar. É como se você fosse funcionário de uma loja de chá com leite e estivesse fazendo chá com leite. Cada xícara de chá com leite precisa ser recheada com açúcar! Mas outras coisas são diferentes. Neste momento, você pode encapsular a frutose, misturá-la com mixina e misturá-la no chá com leite. Esta xícara de chá com leite está pronta. É muito fácil de entender?
Mistura de pacotes
@mixin gap($size) {
margin-bottom: calc(0px - $size);
margin-right: calc(0px - $size);
& > * {
margin-right: $size;
margin-bottom: $size;
}
}
Usar mixins
Aqui usamos vue cli5+webpack5 como exemplo, e os outros são iguais. No uniapp, escreva mixin diretamente em uni.scss, nenhuma configuração redundante é necessária.
O primeiro passo: configure em vue.config.js, webpack4 apenas substitua advancedData por data.
module.exports = defineConfig({
css: {
loaderOptions: {
sass: {
additionalData: `
@import "@/assets/css/mixin.scss";
`
}
},
},
})
A função de configuração desta etapa é introduzir automaticamente mixin.scss em cada arquivo scss para que a função mixin possa ser acessada.
Etapa 2: usar
.basicBottomActions {
display: flex;
@include gap(10px);
}
Resumir
O acima alcança o mesmo efeito que a lacuna e mantém uma boa compatibilidade. Mamãe não precisa mais se preocupar em não poder usar um celular com defeito e com baixa compatibilidade! Resumindo, não importa qual ferramenta de empacotamento seja utilizada, seja Vite ou webpack, o princípio é o mesmo.