Tecnologia de arquiteto front-end Sass

1 Desvantagens do CSS

CSS é apenas uma linguagem de marcação, não uma linguagem de programação, portanto, variáveis ​​não podem ser personalizadas ou referenciadas. CSS tem principalmente as seguintes desvantagens.

• CSS é uma linguagem não processual e não possui conceitos como variáveis, funções e SCOPE (escopo).
• CSS requer a escrita de muitos códigos aparentemente ilógicos e a redundância de código é relativamente alta.
• CSS não tem um poder de computação muito bom.
• É inconveniente manter e expandir e não conduz à reutilização.

2 O que é Sass

Para resolver os problemas de CSS no processo de desenvolvimento real, podemos usar Sass (pré-processador CSS) para implementar o estilo da página.

• Sass é uma linguagem de extensão CSS de nível profissional madura, estável e poderosa.
• É uma ferramenta auxiliar para aprimorar CSS.
• Com base na sintaxe CSS, funções avançadas como variáveis, nestedrules, mixins e importações inline são adicionadas para tornar o CSS mais poderoso e elegante.
• Usar bibliotecas de estilo Sass e Sass (como Compass) ajuda a organizar e gerenciar melhor arquivos de estilo e desenvolver projetos com mais eficiência.
• Sass é totalmente compatível com todas as versões de CSS.

O resultado final é: escreva menos código e implemente mais estilos.

3 Compilação atrevida

• Ferramenta de compilação online Sass Use ferramentas para compilar

• VScode baixa e instala o plug-in Easy Sass para compilação automática

• VScode baixa e instala o plug-in Live Sass Compilerv para compilação automática

// Live Sass 配置
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
],
"liveSassCompile.settings.excludeList": [
    "**",
    "**/node_modules/**",
    ".vscode/**"
],
"liveSassCompile.settings.formats": [
    {
    
    
        "format": "compressed",
        // "format": "expanded",
        "extensionName": ".min.css",
        "savePath": "~/../css/"
    }
]

4 Uso básico do Sass

4.1 Formato de sintaxe Sass

• Um é o formato de sintaxe Sass mais antigo, chamado Sass Indentado, muitas vezes referido como "Sass", que é um formato simplificado. Este formato tem ".sass" como extensão. (não é mais recomendado)
• Outro formato de sintaxe é SCSS (SassyCSS). Este formato só é expandido com base na sintaxe CSS3. Toda a sintaxe CSS3 é comum no SCSS, ao mesmo tempo que adiciona recursos Sass. Este formato tem ".scss" como extensão. (Atualmente em uso)

4.2 Variáveis ​​Sass

Sass usa o símbolo “$” para identificar variáveis ​​como $highlight-color e $sidebar-width.

A declaração de variáveis ​​Sass é semelhante à declaração de propriedades CSS.

$color: #F90;

Qualquer atribuição que possa ser usada como valor de propriedade CSS pode ser usada como valor de variável Sass, mesmo vários valores de propriedade separados por espaços ou vírgulas.

$basic-border: 1px solid black;
$plain-font: "Myriad Pro", "Myriad", "Helvetica", "Neue", "Helvetica";

Depois que a definição da variável for concluída, a variável ainda não será efetiva, a menos que seja referenciada.

Variáveis ​​​​podem ser usadas sempre que existirem valores padrão para propriedades CSS (como 1px ou negrito).

Quando o CSS é gerado, as variáveis ​​são substituídas pelos seus valores. Posteriormente, se você precisar de um valor diferente, basta alterar o valor dessa variável, e os valores gerados em todos os lugares que fazem referência a essa variável serão alterados de acordo.

$color: #F90;
.selected {
  border: 1px solid $color;
}

Variáveis ​​especiais: Se a variável precisar ser incorporada em uma string, ela deverá ser escrita em #{}.

$side: left;
.rounded {
    border-#{$side}-radius: 5px;
}

4.3 Operações Sass

Sass suporta operações como adição (+), subtração (-), multiplicação (*), divisão (/) e resto (%) de números. Se necessário, ele converterá valores entre unidades diferentes. Por exemplo, 1in + 8pt é convertido em 1,111in (o nome completo de pt é ponto, que é uma unidade natural de comprimento, 1in=72pt. De acordo com esta fórmula, o resultado convertido de 1in+8pt é 1,111in).

// 编译前
p {
    width: 1in + 8pt;
}
// 编译后
p {
    width: 1.111in; 
}

O símbolo "/" geralmente é usado para separar números em CSS, e em Sass, "/" também recebe a função de operação de divisão, mas os dois não entram em conflito.

Em outras palavras, se “/” separar dois números no Sass, terá o mesmo efeito no arquivo CSS compilado.

// 编译前
p {
    font: 10px/8px;
    $width: 1000px;
    width: $width/2;
    height: (500px/2); 
    margin-left: 5px + 8px/2px; 
}
// 编译后
p {
    font: 10px/8px;
    width: 500px;
    height: 250px;
    margin-left: 9px; 
}

Ao compilar código que usa o operador "/", o resultado compilado da fonte permanece inalterado porque não está entre parênteses.

Se você precisar usar uma variável e garantir que o símbolo "/" não esteja dividido, mas totalmente compilado no arquivo CSS, basta envolver a variável com uma instrução de interpolação #{}.

p {
    $font-size: 12px;
    $line-height: 30px;
    font: #{$font-size}/#{$line-height};
}

• Os valores normais são operados com "/" e precisam ser colocados entre parênteses.
• O valor da variável não precisa ser operado com "/" e a variável precisa ser agrupada com a instrução de interpolação #{}.

4.4 Aninhamento Sass

Sass fornece uma ferramenta mais poderosa baseada em variáveis, nomeadamente aninhamento de regras.

Variáveis ​​Sass só são mais poderosas quando usadas junto com o aninhamento de regras.

Ao escrever código usando CSS, sabemos que escrever seletores repetidamente é muito complicado.

Por exemplo, quando você deseja escrever uma grande série de estilos que apontam para o mesmo bloco da página, muitas vezes você precisa escrever o mesmo ID ou nome de classe repetidamente.

#content article h1 {
    
     color: #333 }
#content article p {
    
     margin-bottom: 1.4em }
#content aside {
    
     background-color: #eee }

.box article h1 {
    
     color: #333 }
.box article p {
    
     margin-bottom: 1.4em }
.box aside {
    
     background-color: #eee }

O Sass irá lidar automaticamente com essas regras aninhadas ao compilar e gerar CSS, evitando a duplicação de código e tornando o estilo mais legível. Sass pode ser implementado apenas escrevendo-o uma vez.

#content {
    article {
        h1 { color: #333 }
        p { margin-bottom: 1.4em }
    }
    aside { background-color: #eee }
}
.box {
    article {
        h1 { color: #333 }
        p { margin-bottom: 1.4em }
    }
    aside { background-color: #eee }
}

As propriedades também podem ser aninhadas, como a propriedade border-color, que pode ser escrita como

// 编译前
.box {
    border: {
        color: red;
    }
}
// 编译后
.box {
    border-color: red;
}

Nota: Atributos aninhados (borda) devem ser seguidos por dois pontos.

Dentro de blocos de código aninhados, você pode usar & para se referir a elementos pais. Por exemplo: a pseudoclasse hover pode ser escrita como

// 编译前
.box {
    &:hover { color: red; }
}
// 编译后
.box:hover {
    color: red;
}

4.4 Comentários atrevidos

Sass tem dois estilos de comentários

• Comentários de linha única // 注释são retidos apenas no arquivo fonte Sass, não no arquivo compilado.
• Os comentários CSS padrão /* 注释 */serão retidos no arquivo compilado e excluídos quando compactados.
  • Adicione um ponto de exclamação após o comentário padrão /*! 重要注释 */ para indicar um comentário importante. O modo de compactação também reterá comentários para declarações de direitos autorais, etc.

5 Reutilização de código

5.1 Herança Sass

No Sass,a herança permite que um seletor herde todos os estilos de outro seletor.A herança usa o comando @extend.

// 编译前
.alert{
    padding: 15px;
}

.alert a{
    text-decoration: none;
}

.alert-info{
    @extend .alert;
    background-color: lightblue;
}
// 编译后
.alert, .alert-info {
  padding: 15px;
}

.alert a, .alert-info a {
  text-decoration: none;
}

.alert-info {
  background-color: lightblue;
}

Use o seletor de espaço reservado % . A partir do Sass 3.2.0, você pode definir o seletor de espaço reservado %. A vantagem disso é que não haverá arquivos CSS redundantes sem chamá-lo.

// 编译前
%h1 {
    font-size:20px;
}
div {
    @extend %h1;
    color:red;
}
// 编译后
div {
    font-size:20px;
    color:red;
}

5.2 Mistura

Mixins são pedaços de código que podem ser reutilizados.

• Use o comando @mixin para definir um bloco de código.
• Use o comando @include para chamar este mixin.

@mixin alert {
    color:#ccc;
    background-color:red;
}
div {
    @include alert;
}

O poder do Mxin é que você pode especificar parâmetros e valores padrão. Ao usá-lo, adicione parâmetros conforme necessário.

@mixin alert($color:red) {
    color:#ccc;
    background-color:$color;
}
div {
    @include alert(blue);
}

Você pode usar o Mixin para gerar prefixos de navegador.

// 设置关键帧
@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        @content;
    }
    @-moz-keyframes #{$name} {
        @content;
    }
    @-o-keyframes #{$name} {
        @content;
    }
    @keyframes #{$name} {
        @content;
    }
}
// 引入
@include keyframes(scale) {
    100% {
        transform: scale(0.8);
    }
}
// css编译后
@-webkit-keyframes scale {
    100% {
        transform: scale(0.8);
    }
}
@-moz-keyframes scale {
    100% {
        transform: scale(0.8);
    }
}
@-o-keyframes scale {
    100% {
        transform: scale(0.8);
    }
}
@keyframes scale {
    100% {
        transform: scale(0.8);
    }
}

@mixin rounded($attr, $value) {
    #{$attr}: $value;
    -moz-#{$attr}: $value;
    -webkit-#{$attr}: $value;
}
#navbar li {
    @include rounded(border-radius, 8px);
}

5.3 Função de cor

Sass fornece algumas funções de cores integradas para gerar uma série de cores.

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

5.4 Inserindo arquivos

Use o comando @import para introduzir arquivos externos. Após a importação, você pode usar variáveis ​​nos arquivos externos, etc.

@import "base.scss";

Se um arquivo for inserido .css, será equivalente ao comando de importação CSS.

@import "base.css";

6 Uso Avançado

6.1 Declarações condicionais

@if pode ser usado para julgamento e o comando @else correspondente

// Sass样式
$type: monster;
div {
    @if $type == ocean {
        color: blue;
    } @else if $type == matador {
        color: red;
    } @else if $type == monster {
        color: green;
    } @else {
        color: black;
    }
}
// css编译后样式
div {
    color: green;
}

**Julgamento trinocular:** A sintaxe é if($condition, $if_true, $if_false)

Os três parâmetros representam respectivamente: condição, valor quando a condição é verdadeira e valor quando a condição é falsa.

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

$box: red;
$fontSize: if($box==red, 16px, 14px);
.box {
    font-size: $fontSize;
}

6.2 Instruções de loop

O loop for tem duas formas, a saber:

• @for $var from <start> through <end>

• @for $var from <start> to <end>

$var representa uma variável, start representa o valor inicial e end representa o valor final.A diferença entre os dois formulários é que through inclui o valor final e to não inclui o valor final.

@for $i from 1 to 10 {
    .border-#{$i} {
        border: #{$i}px solid blue;
    }
}

enquanto loop

$i: 6;
@while $i > 0 {
    .item-#{$i} {
        width: 2em * $i;
    }
    $i: $i - 2;
}

cada comando é semelhante a para

• A sintaxe é @each $var in <list or map>.

• onde $var representa a variável

@each $member in a, b, c, d {
    .#{$member} {
        background-image: url("/image/#{$member}.jpg");
    }
}

6.3 Funções personalizadas

Sass permite que os usuários escrevam suas próprias funções, começando com @function e retornando um valor com @return.

// 常规用法
@function double($n) {
    @return $n * 2;
}
#sidebar {
    width: double(5px);
}

// 常用用法
$fontSize: 100px;
@function pxTorem($px) {
    @return $px / $fontSize * 1rem;
}
div {
    font-size: pxTorem(24px);
}
// css编译后样式
div {
    font-size: .24rem;
}

7 tarefas práticas

• Otimize folhas de estilo móveis usando sintaxe Sass