CSS - Personalização

[CSS] Como usar a personalização avançada CSS / SCSS

38 views 16 de maio de 2018 3 de maio de 2020 admin 0

O que é esta seção?

Esta seção no menu Cores permite que você personalize seu aplicativo mais profundamente com CSS / SCSS. Aqui está um exemplo com uma modificação baseada no Layout 6 usando a personalização avançada com CSS / SCSS em um aplicativo:

Screen Shot 08/09/2016 às 15.24.59

A versão sem essas personalizações:

Screen Shot 08/09/2016 às 16.32.12

O que é CSS?

CSS é uma linguagem de programação (simples) para formatar e modelar uma página. Significa Cascading Style Sheet e define como os elementos HTML5 são exibidos. Mais informações aqui .

O que é SCSS?

SCSS é um superconjunto de CSS3. Ele adiciona mais opções ao CSS clássico usando, especialmente, aninhamento e variáveis.

Como exemplo, aqui estão duas folhas de estilo escritas em CSS e SCSS:

Código CSS:
#body {
margin: 0;
border: 1px solid red;
}
#body p {
font-size: 13px;
font-weight: bold;
color: yellow;
}
#body h {
text-transform: capitalize;
}

O mesmo escrito no código SCSS:

$colorYellow: yellow;
#body {
margin: 0;
border: 1px solid $colorYellow;
p {
color: $colorYellow;
font: {
size: 13px;
weight: bold;
}
}
h {
text-transform;
}
}

Qual a diferença entre os dois?

1. Se você olhar o código acima, poderá ver que há uma variável $colorYellow: yellow;, e essa variável é chamada no próprio CSS como um valor da propriedade “color", consulte: color: $colorYellow;

O poder disso é que você pode chamar uma variável em seu CSS e, então, teria que trabalhar apenas no valor dessa variável para alterar o valor de todos os seletores que usam essa variável. A diferença com o CSS clássico é que você precisaria alterar o valor da propriedade para todos os seletores, em vez de alterá-lo uma vez para todos os seletores.

2. Se você comparar os dois códigos acima, ambos têm 3 seletores, dois deles são filhos de um seletor principal. No SCSS, os filhos podem ser aninhados no pai. Facilita a leitura, gravação e manutenção do código. Então, ao invés de escrever em CSS:

#body {
margin: 0;
}
#body p {
font-size: 12px;
}

no SCSS você escreveria:

#body {
margin: 0;
p {
color: $colorYellow;
font-size: 12px;
}
}

3. Você pode ver que há o mesmo para algumas propriedades que podem ser divididas nas propriedades pai e filho. Por exemplo, no SCSS font-weightse torna uma propriedade filha da propriedade pai “font"

em CSS:

#body p {
font-size: 13px;
font-weight: bold;
}

no SCSS:

#body p {
font {
size: 13px;
weight: bold;
}
}

Isto foi útil?