React Cultivation Notes, Hooks no estágio inicial do estabelecimento da fundação

Eu pensei que já sabia, basicamente usei o sassestilo de escrita ao escrever projetos na empresa antes, o que foi muito tranquilo. Até um tempo, eu ia Element Plusprojetar a estrutura de engenharia da minha própria biblioteca de componentes com referência, quando vi Element Plusaqueles usos elegantes sass, comecei a sentir vergonha da minha superficialidade e ignorância. Isso começou a estudar sistematicamente.Durante sassesse período, muitas vezes eu queria escrever alguns aprendizados e compartilhar, mas todos acabaram sem problemas devido a várias coisas. Hoje, finalmente tirei um tempinho da minha agenda lotada, bem a tempo de compartilhar meu encorajamento com você.

1. Introdução

Como um pré-processador extremamente maduro css, ele sasspossui muitas funções especiais, que nos ajudam a escrever um código de estilo mais elegante e conciso. Ele cssintroduziu variáveis ​​de estilo antes e também oferece suporte a funções como aninhamento, funções, mixagem e controle de comando, o que expande muito o estilo de jogo.

sassExistem duas formas de sintaxe: SCSSe Sass.

Entre eles SCSS, é um formato amplamente utilizado atualmente, expandindo-se apenas na base gramatical CSS3do .SassCSS hacksvendor-specific syntax.scss

ÉSass o formato gramatical mais antigo, usando recuo em vez de chaves e novas linhas em vez de ponto-e-vírgula.O formato é particularmente conciso e a escrita é mais conveniente. Este formato também suporta todas as funções, mas usa uma expressão diferente Sassem alguns lugares , e sua extensão de arquivo é chamada de .SCSS.sass

Qualquer formato pode ser importado (@import) para um arquivo de outro formato para uso e também pode ser sass-convertconvertido para outro formato por meio de uma ferramenta de linha de comando.

# Sass转为SCSS
sass-convert style.sass style.scss
​
# SCSS转为Sass
sass-convert style.scss style.sass 

Não vou apresentar a Sassinstalação e o uso dele aqui, afinal, a maioria dos projetos agora são webpackempacotados e construídos por meio de outras ferramentas de construção, complementadas por ferramentas correspondentes e loaderoutras para auxiliar na compilação. Deve haver muito poucos projetos que precisam usar sasscomandos na linha de comando para compilar arquivos de estilo.

No entanto, vale a pena mencionar o formato de codificação . Assim como com CSS, você pode usar @hcarsetpara declarar um formato de codificação específico: insira-o no início do arquivo de estilo (no primeiro caractere) @charset "encoding-name", e Sasso arquivo será compilado de acordo com o formato de codificação fornecido. Obviamente, o formato de codificação usado deve ser conversível em um Unicodeconjunto de caracteres. SassGere o arquivo em UTF-8codificação e adicione uma declaração ao arquivo de saída CSSse não caracteres aparecerem no arquivo compilado .ASCII@charset

2. Expansão da função básica

1. Regras aninhadasNested Rules

SassEle suporta a CSSincorporação de um conjunto de estilos em outro conjunto de CSSestilos, e o estilo interno usará o seletor externo como seletor pai.

#main p {
  color: #00ff00;
  width: 97%;
​
  .redbox {
    background-color: #ff0000;
    color: #000000;}
} 

Isso seria Sasscompilado da seguinte forma CSS:

#main p {
  color: #00ff00;
  width: 97%; 
}
#main p .redbox {
  background-color: #ff0000;
  color: #000000; 
} 

A função de aninhamento reduz muito a quantidade de código, não precisamos mais escrever repetidamente seletores pais complicados e é fácil de gerenciar.

2. Seletor de pais &( Referencing Parent Selectors: &)

No aninhamento, se você precisar fazer referência ao seletor pai, como ao definir um :hoverestilo para um elemento ou quando bodyum elemento tiver um determinado valor classname, ele poderá ser &usado para fazer referência ao seletor pai, ou seja, seu seletor externo.

a {
  font-weight: bold;
  text-decoration: none;
  // & 引用父元素&:hover { text-decoration: underline; }
  // body.firefox 可以直接引用
  body.firefox & { font-weight: normal; }
} 

será Sasscompilado da seguinte forma CSS:

a {
  font-weight: bold;
  text-decoration: none; 
}
a:hover {
  text-decoration: underline; 
}
body.firefox a {
    font-weight: normal; 
} 

&Deve ser o primeiro caractere de um seletor, mas pode ser seguido por sufixos para gerar seletores compostos :

#main {
  color: black;
  // #main-sidebar 字符串拼接，这就有点好玩了&-sidebar { border: 1px solid; }
} 

Isso seria compilado para:

#main {
  color: black; 
}
#main-sidebar {
  border: 1px solid; 
} 

3. Aninhamento de atributosNested Properties

Alguns CSSseguem o mesmo namespace ( namespace), já que font-family, font-size, font-weightambos possuem fontnamespaces como atributos. Neste momento, para simplicidade de escrita e gerenciamento conveniente, os Sassatributos podem ser aninhados em namespaces:

.funky {
  // 注意命名空间这里要加冒号
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;}
} 

compila da seguinte forma CSS:

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
} 

Entre eles, o namespace também pode conter seus próprios valores de atributo:

.funky {
  // font-size/line-height
  font: 20px/24px {
    family: fantasy;
    weight: bold;}
} 

compila para:

.funky {
  /* font-size/line-height */
  font: 20px/24px;
  font-family: fantasy;
  font-weight: bold; 
} 

4. Seletor de espaço reservado %foo( Placeholder Selectors: %foo)

Os seletores de espaço reservado são semelhantes idaos seletores e classseletores, exceto que o símbolo é %, e devem ser @extendchamados por meio de instruções, caso contrário, não participarão Sassda compilação.

5. NotasComments

SassComentários de uma linha e comentários //de várias linhas são suportados /* */. Os comentários de várias linhas são totalmente enviados para o CSSarquivo compilado . !Será o primeiro caractere de um comentário de várias linhas significa manter esse comentário no modo de saída compactado e enviá-lo para o arquivo, que geralmente é usado para adicionar informações de direitos autorais. As instruções de interpolação ( ) podem gerar valores de variáveis ​​em comentários de várias linhas. (Use para interpolação.)CSSinterpolation#{$val}

// Sass
$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */
​
// 编译为CSS：
/* This CSS is generated by My Snazzy Framework version 1.2.3. */ 

3. Expansão de função avançada

1.SassScript

SassFornece uma SassScriptfunção poderosa chamada , que pode ser aplicada a qualquer atributo, permitindo que os atributos usem funções adicionais, como variáveis ​​e operações aritméticas.

1.1Interactive Shell

Interactive ShellRecursos que podem ser testados na linha de comando SassScript. Digite na linha de comando sass -ie digite o que deseja testar para SassScriptver a saída.

sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white 

1.2 Variáveis$ Variables: $

O uso de variáveis ​​é muito simples:

// 声明变量
$width: 5em;
​
#main {// 使用变量
  width: $width;
} 

As variáveis ​​têm escopo em nível de bloco e as variáveis ​​dentro de regras aninhadas são variáveis ​​locais que só podem ser usadas dentro de regras aninhadas. As variáveis ​​globais podem ser usadas em qualquer lugar. Adicionar !globaluma declaração transforma uma variável local em uma variável global .

// Sass
#main {// !global声明，转换为全局变量
  $width: 5em !global;
  width: $width;
}
​
#sidebar {
  // 使用全局变量
  width: $width;
}
​
// 编译为CSS:
#main {
  width: 5em;
}
#sidebar {
  width: 5em;
} 

1.3 Tipos de dadosData Types

SassScript7Os principais tipos de dados são suportados :

• Números, com unidades, 1, 2, 3, 6, 10pxetc.;
• string (tanto entre aspas quanto sem aspas são suportadas), "foo", "bar", baz;
• cor, blue, #04a3f9, rgba(255,0,0,0.5)etc;
• booleano, true, false;
• NULO, null;
• Array ( list), com espaços ou vírgulas como delimitadores, 1.5em 1em 0 2em, Helvetica, Arial, sans-serif;
• maps, que é equivalente a JSonde Object, (key1: value1, key2: value2).

Além disso, outros valores de atributos SassScripttambém são suportados , como conjuntos de caracteres ou declarações, mas estes não são tratados de forma especial, mas são tratados como strings sem aspas.CSSUnicode!important

1.3.1 Cordas

SassScriptAs strings entre aspas ( ) e as strings sem aspas ( ) sãoquoted strings suportadas . Essas duas strings não serão convertidas uma na outra em tempo de compilação, exceto em um caso: ao usar ( ), a string entre aspas será compilada em uma string sem aspas, o que é conveniente para colocar aspas no nome do seletor em .unquoted strings#{}interpolationmixin

// Sass
@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";}
}
@include firefox-message(".header");
​
// 编译为CSS
body.firefox .header:before {
  content: "Hi, Firefox users!"; 
} 

1.3.2 matriz ( lists)

Uma matriz refere-se a Sasscomo lidar com uma série de valores separados CSSpor espaços margin: 10px 15px 0 0ou font-face: Helvetica, Arial, sans-serifvírgulas. Na verdade, valores individuais também são tratados como arrays contendo apenas um valor.

O array em si não tem muitas funções, mas Sass list functionstraz muitas novas funções para o array: nthfunções podem acessar diretamente um item no array; joinfunções podem conectar vários arrays juntos; appendfunções podem adicionar novos valores ao array; @eachfunções pode percorrer cada item na matriz.

As matrizes podem conter submatrizes: por exemplo 1px 2px, 5px 6px, é contém duas1px 2px matrizes de e . 5px 6pxSe as matrizes interna e externa usarem o mesmo método de separação, você precisará usar parênteses para envolver a camada interna, por exemplo (1px 2px) (5px 6px). Os parênteses não serão preservados durante a compilação, então não importa de que maneira eles são escritos, 1px 2px, 5px 6pxou (1px 2px) (5px 6px)o resultado final da compilação é o mesmo, mas eles Sasstêm significados diferentes no arquivo, o primeiro significa uma matriz contendo quatro valores e o último significa uma matriz contendo dois Pode-se dizer que os parênteses enfatizam o conceito de "agrupamento".

()Usado para representar uma matriz vazia e também pode representar map. Matrizes vazias não serão compiladas diretamente CSSe, se houver matrizes vazias ou valores nulos na matriz, elas serão limpas no momento da compilação. Tal como 1px 2px () 3pxou 1px 2px null 3px. Arrays separados por vírgula podem reter a vírgula à direita, que serve para enfatizar o relacionamento estrutural do array, especialmente quando é necessário declarar um array contendo apenas um único valor. Por exemplo (1,), representa 1uma matriz contendo apenas .

1.3.3maps

mapé uma coleção de pares chave-valor keye ambos podem ser objetos valuearbitrários . SassScriptEle e listambos operam com funções. Por exemplo, map-getfunções podem ser usadas para pesquisar valores-chave , funções podem map-mergeser usadas para adicionar novos pares de valores-chave e @eachdiretivas podem ser usadas para adicionar estilos a cada par de valores-chave. mapEle pode ser usado em qualquer lugar list, mas não vice-versa. Quando mapusado listem funções, é tratado como key1 value1, key2 value2um array do formulário.

1.3.4 Cor

Qualquer CSSexpressão de cor retorna um SassScriptvalor de cor. unquoted stringsIsso contém um grande número de cores nomeadas (muitas vezes indistinguíveis de strings sem aspas ).

1.4 OperaçãoOperations

Todos os tipos de dados suportam a operação de igualdade ==OU !=, além disso, cada tipo de dados também possui seu próprio método de operação.

1.4.1 Operações numéricasNumber Operations

SassScriptSuporta adição, subtração, multiplicação e divisão, bem como operações de arredondamento ( +, -, *, /, %), convertendo valores entre unidades quando necessário. O operador relacional ( >, <, >=, <=) também pode ser usado para operações numéricas.

// Sass
p {
  width: 1in + 8pt;
}
​
// 编译为：
p {
  width: 1.111in; 
} 

• operação de divisão/

A operação de divisão merece uma menção à parte. Como os /símbolos CSSgeralmente desempenham o papel de separar números em . Em SassScript, /não apenas para separar números, mas também para operações de divisão. Nos três casos seguintes, /é considerada uma operação de divisão:

• quando o valor ou parte de um valor é uma variável ou o valor de retorno de uma função;
• Quando o valor estiver entre parênteses;
• Quando o valor faz parte de uma expressão aritmética.

// Sass
p {
  font: 10px/8px;             // 普通的CSS
  $width: 1000px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 函数返回值，是除法运算
  height: (500px/2);          // 使用圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 算数运算表达式的一部分，是除法运算
}
​
// 编译为CSS
p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; 
} 

Se você precisar usar uma variável e não quiser que ela /seja usada como um operador de divisão, você pode #{}agrupar a variável com:

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

// 编译为CSS
p {font: 12px/30px; 
} 

1.4.2 Operação de valor de corColor Operations

A operação do valor da cor é calculada em seções, ou seja, R, G, Bos valores são calculados separadamente.

p {
  color: #010203 + #040506;
} 

Calculado em partes 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09e compilado como:

p {
  color: #050709; 
} 

pode ser usado color functions, o que é um pouco mais conveniente do que cálculos de cores.

Os valores de cores também podem ser combinados com operações numéricas:

p {
  color: #010203 * 2;
}
​
// 计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06，然后编译为:
p {
  color: #020406; 
} 

Deve-se observar que se o valor da cor contiver alpha channel, o valor da cor envolvido no cálculo deve ter o mesmo alphavalor para realizar a operação, pois a operação aritmética não atuará sobre o alphavalor.

p {
	// 需要保证有相同的alpha值color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
} 

O valor no valor da cor alphapode ser ajustado através da função opacityou transparentize.

// Sass
$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}
​
// 被编译为：
p {
  color: rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.25); 
} 

1.4.3 Operações de stringString Operations

Use uma +string de concatenação; +o valor à esquerda domina se o resultado final compilado é citado ou não.

Quando a expressão de operação for usada em conjunto com outros valores, use espaços como conectores:

p {
  margin: 3px + 4px auto;
}
// 编译为：
p {
  margin: 7px auto; 
} 

Você pode #{}inserir valores dinâmicos usando:

$value: null;
p:before {content: "I ate #{$value} pies!";
}

// 编译为CSS:
p:before {content: "I ate pies!"; 
} 

1.4.4 Operações BooleanasBoolean Operations

Suporte a operações booleanas and, or, not.

1.4.5 Operação de matriz

Arrays não suportam operações diretas e só podem list functionsser manipulados usando.

1.5 Parênteses(Parentheses)

Os parênteses são contados primeiro.

1.6 FunçõesFunctions

SassScriptExistem muitas funções incorporadas, algumas podem até ser CSSchamadas usando instruções comuns:

p {
  color: hsl(0, 100%, 50%);
}
// 编译为：
p {
  color: #ff0000; 
} 

• argumentos de palavras-chaveKeyword Arguments

SassAs funções permitem argumentos de palavra-chave, o exemplo acima pode ser escrito como:

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
} 

SassExistem muitas funções internas, então não vou expandi-las aqui.

1.7 Declarações de InterpolaçãoInterpolation #{}

As variáveis ​​podem #{}ser usadas em seletores ou nomes de propriedade por meio de:

$name: foo;
$attr: border;
p.#{$name} {#{$attr}-color: blue;
}

// 编译为：
p.foo {border-color: blue; 
} 

SassScriptem 1.8&

&Representa o seletor pai. A seguir, &o valor de ((".foo.bar" ".baz.bang"), ".bip.qux").

.foo.bar .baz.bang, .bip.qux {$selector: &;
} 

Se não houver seletor pai, &o valor será null. Isso pode ser aplicado mixinpara detectar se há um seletor pai:

@mixin does-parent-exist {
  @if & {
    // 有父选择器
  &:hover {
      color: red;
  }} @else {
    // 没有父选择器
    a {
      color: red;
  }}
} 

1.9 Valor padrão variável ( Variable Defaults):!default

Adicionar no final de uma variável !defaultpode ser usado para atribuir um valor a !defaultuma variável que não foi atribuída a uma declaração. nullA atribuição só funcionará se a variável não tiver um valor atribuído ou se for atribuído um valor nulo !default.

$content: "First content";
// 变量已被赋值，无效
$content: "Second content?" !default;
$new_content: "First time reference" !default;
​
#main {
  content: $content;
  new-content: $new_content;
}
​
// 编译为：
#main {
  content: "First content";
  new-content: "First time reference"; 
} 

2. @-Rulescom o comando ( Directives)

SassTodos os CSS3 @-Rules, bem como Sassdiretivas específicas ( directives) são suportados.

2.1@import

SassFuncionalidade estendida @importpara possibilitar a importação .scsse .sassarquivamento. Os arquivos importados serão mesclados e compilados no mesmo CSSarquivo. Além disso, as variáveis ​​contidas no arquivo importado podem ou mixinnão estar disponíveis no arquivo importado.

Geralmente, o arquivo @importé encontrado Sasse importado, com as seguintes exceções, que são tratadas como CSSsintaxe normal:

• A extensão do arquivo é .css;
• Os nomes dos arquivos http://começam com;
• O nome do arquivo é url();
• @importcontém media queries.

É permitido importar vários arquivos ao mesmo tempo, quando nenhuma extensão for gravada, ele tentará encontrar .scssou .sasso arquivo com o mesmo nome.

@import "rounded-corners", "text-shadow"; 

Arquivos de importação também podem usar instruções de interpolação #{}, mas apenas para CSSo url()método de importação.

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");
​
// 编译为：
@import url("http://fonts.googleapis.com/css?family=Droid+Sans"); 

@importsHá também dois usos especiais: parciais e aninhamento .

• Diafragma ( Partials)

Às vezes, você deseja importar Sassum arquivo, mas não deseja compilá-lo como CSS, você pode adicionar um sublinhado antes do nome do arquivo, o que lhe dirá Sasspara não compilá-lo. Observe que o sublinhado não é necessário na instrução de importação. Por exemplo, se o nome do arquivo for _colors.scss, o código a seguir importará o _colors.scssarquivo e ele não será compilado como CSS.

@import "colors"; 

Deve-se observar que, se houver arquivos com o mesmo nome que contenham sublinhados à esquerda e arquivos que não contenham sublinhados à esquerda, os arquivos que adicionam sublinhados serão ignorados.

• nidificação@import

Na maioria dos cenários, usamos no nível superior do arquivo @imports. Na verdade, o aninhamento também pode ser @importsaninhado em CSSestilos ou arquivos @media. A diferença de usá-lo na camada superior é que o estilo importado dessa forma só pode aparecer na camada aninhada, que pode ser entendida como "escopo local".

// example.scss
.example {
  color: red;
} 

// main.scss
#main {
  @import "example";
} 

eventualmente será compilado para:

#main .example {
  color: red;
} 

No entanto, deve-se observar que não deve haver instruções de nível superior, como , etc., @importnos arquivos importados por este formulário aninhado .@mixin@charset

2.2@media

Sassé o @mediamesmo CSSque em , com a adição de novos recursos:

• É permitido ser CSSaninhado dentro de regras. Quando @mediaestiver aninhado em CSSuma regra, quando for compilado, será compilado para a camada mais externa do arquivo e conterá o seletor pai quando foi aninhado antes, o que é muito conveniente.

// Sass
.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;}
}
​
// 编译为
.sidebar {
  width: 300px; 
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } 
} 

• @mediaO aninhamento é permitido queries, o que é adicionado automaticamente em tempo de compilação and.

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
  }}
}
​
// 编译为
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } 
} 

• Você pode usar SassScript(variável, função, etc.) em vez do nome ou valor da condição.

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
​
@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;}
}
​
// 编译为
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } 
} 

2.3@extend

• @extendUm seletor pode ser feito para herdar o estilo de outro seletor via .

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  // 继承，此时所有使用到 .error 的样式都会被继承过来
  @extend .error;
  border-width: 3px;
}
​
// 编译为
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }
​
.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); 
}
​
.seriousError {
  border-width: 3px; 
} 

• Placeholder Selectorsseletor de espaço reservado

Às vezes, é necessário definir um conjunto de estilos para herança, não para um determinado elemento, e esperamos que não seja Sasscompilado e gerado separadamente. Esse tipo de cena ocorre com mais frequência ao criar uma Sassbiblioteca de estilos. Assim nasceu o seletor de espaço reservado. Seu uso é quase idêntico idao seletor ou classseletor, a notação do seletor é %. Quando usados ​​sozinhos, os seletores de espaço reservado são Sassignorados e não compilados no arquivo de saída.

// 不会被编译到输出文件中
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
} 

Ele precisa @extendser usado por:

.notice {
  @extend %extreme;
}
​
// 被编译为
#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; 
} 

• !optionaldeclaração

Usando !optionaldeclarações, é possível @extendnão gerar novos seletores.

// 不可以，因为没有 .notice
a.important {
  @extend .notice
}
​
// 可以
a.important {
  @extend .notice !optional;
} 

• usado no comando@extend

Para evitar a geração de muito código inútil, estenda ( @extend) na instrução e limite a extensão aos seletores no mesmo nível de instrução.

@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;}
  .seriousError {
    // 可以
    // .error 同在一个 @meida层级中
    @extend .error;
    border-width: 3px;}
}
​
// 以下为反面栗子
.error {
  border: 1px #f00;
  background-color: #fdd;
}
​
@media print {
  .seriousError {
    // 不可以, .error 不在当前的@meida指令层级中
    @extend .error;
    border-width: 3px;}
} 

2.4@at-root

Use @at-rootdiretivas para elevar os seletores selecionados para o nível mais externo.

.parent {...
  @at-root .child { ... }
}
​
// 编译为
.parent { ... }
.child { ... } 

• Pode ser uma estrutura em nível de bloco contendo vários seletores.

.parent {...
  @at-root {
    .child1 { ... }
    .child2 { ... }}
  .step-child { ... }
}
​
// 编译为
.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... } 

• Use with:xxx yyy ...ou without:xxx yyy ...para garantir que a diretiva externa seja válida para o seletor promovido para a camada mais externa:

// without:
@media print {
  .page {
    width: 8in;
    // without: media 让选择器不受外层的@media影响
    @at-root (without: media) {
      color: red;
  }}
}
​
// 编译为
@media print {
  .page {
    width: 8in;}
}
.page {
  color: red;
} 

3. Comandos de controleControl Derectives

As diretivas de controle são usadas para fazer referência a estilos sob certas condições.

3.1if()

A iffunção interna pode ser usada em qualquer SassScriptcontexto de script.

3.2@if

@ifA condição é atendida quando o valor de retorno da expressão da instrução não é falseou null. @else ifPode ser conectado posteriormente @else.

$type: monster;
p {
  @if $type == ocean {
    color: blue;} @else if $type == matador {
    color: red;} @else if $type == monster {
    color: green;} @else {
    color: black;}
}
​
// 编译为
p {
  color: green; 
} 

3.3@for

Esta diretiva tem dois formatos: @for $var from <start> through <end>, ou @for $var from <start> to <end>. Ambos contém o ponto de partida <start>, a diferença é que tonão contém <end>, mas throughcontém <end>. Além disso, $varpode ser qualquer variável, mas <start>e <end>deve ser inteiro.

@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}
​
// 编译为
.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
} 

3.4@each

@eachFormato do comando:@each $var in <list>

@each $animal in puma, sea-slug, egret, salamander {.#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');}
}
​
// 编译为
.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); } 

• Várias variáveis ​​podem ser aplicadas ao mesmo tempo , o que é útil ao escrever estilos com formas semelhantes, mas valores diferentes:

@each $animal, $color, $cursor in (puma, black, default),
                                (sea-slug, blue, pointer),
                                (egret, white, move) {.#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;}
}
​
// 编译为
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; }
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; } 

• Como mapsserá tratado como um array lists, @eachtambém podemap ser utilizado :

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {#{$header} {
    font-size: $size;}
}
​
// 编译为
h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em; }
h3 {
  font-size: 1.2em; } 

3.5@while

whileCirculação, eu entendo.

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  // 更改条件变量
  $i: $i - 2;
}
​
//编译为
.item-6 {
  width: 12em; }
​
.item-4 {
  width: 8em; }
​
.item-2 {
  width: 4em; } 

4. Comandos mistos ( Mixin Directives)

mixinUsado para definir estilos reutilizáveis.

4.1 Definindo Instruções Mistas @minin( Defining a Mixin: @mixin)

Depois @mixinde adicionar o nome e o estilo, você pode definir a instrução mista. Observe que você precisa incluir seletores e atributos e também pode usar &para se referir ao seletor pai.

// 定义名为 clearfix 的混合指令
@mixin clearfix {
  display: inline-block;
  // & 指代父选择器。注意，这个混合指令里虽然它没有父选择器，
  // 但是混合指令使用的地方，可以产生父选择器&:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
  // 这里的 & 同理* html & { height: 1px }
} 

4.2 Instruções mistas de referência @include( Including a Mixin: @include)

• Use @include MixinNamepara citar uma diretiva mixin:

.page-title {
  // 引用混合指令，将 clearfix 中的规则混入到 .page-title 中
  @include clearfix;
  padding: 4px;
  margin-top: 10px;
} 

• Ele também pode ser referenciado diretamente e misturado no nível mais externo, sem definir atributos e não ter seletor pai para se referir:

@mixin silly-links {
  a {
    color: blue;
    background-color: red;}
}
@include silly-links;
​
//编译为
a {
  color: blue;
  background-color: red; } 

Nas diretivas mixin que escrevemos, é melhor definir apenas seletores descendentes, para que possam ser importados com segurança em qualquer lugar do arquivo.

• Uma diretiva composta pode se referir a outras diretivas compostas:

@mixin compound {
  @include highlighted-background;
  @include header-text;
}
@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; } 

4.3 Parâmetros ( Arguments)

Os parâmetros podem ser usados ​​para definir variáveis ​​para o estilo de comandos mistos e atribuir valores. Ao referenciar e definir instruções mistas, a ordem dos parâmetros deve ser uma correspondência de um para um e os parâmetros podem receber valores padrão.

// $width有默认值
@mixin sexy-border($color, $width: 1in) {
  // 注意这里得 border，是CSS命名空间
  border: {
    color: $color;
    width: $width;
    style: dashed;}
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
​
// 编译为
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }
​
h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; } 

Além disso, há mais dois pontos importantes sobre os parâmetros:

• Parâmetro palavra- chave ( Keyword Arguments): Ao Mixinpassar um parâmetro por referência, passe o valor precisamente especificando a palavra-chave do parâmetro (nome do parâmetro).

p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); } 

Embora a escrita seja um pouco complicada, é fácil de ler e pode ser atribuída com precisão.

• Variável de parâmetro ( Variable Arguments): Quando você não tem certeza de quantos parâmetros o comando misto precisa, você pode usar a variável de parâmetro no final do parâmetro ...para declarar, e Sassesses parâmetros serão tratados como uma lista de valores.

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
​
// 编译为
.shadowed {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
} 

Você também pode usar variáveis ​​de parâmetro ao citar:

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}
​
// 编译为
.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
} 

4.4 Importar conteúdo para o comando misto @content( Passing Content Blocks to a Mixin)

Ao citar Mixin, especialmente ao citar na camada mais externa do arquivo, você pode usar @contentespaços reservados e, em seguida, @includeimportar o seguinte conteúdo para @contenta posição, semelhante a modelos, slots etc.

@mixin apply-to-ie6-only {* html {
    @content;}
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);}
}
​
// 编译为
* html #logo {
  background-image: url(/logo.gif);
} 

Devido ao seu uso frequente Mixinem Sassbibliotecas de estilos. Para simplificar o uso, pode ser =expresso @mixinpor e +expresso por @include.

// Sass (这里就是Sass格式的语法了，而非SCSS格式)
=apply-to-ie6-only* html
    @content
​
+apply-to-ie6-only
  #logo
    background-image: url(/logo.gif) 

• Conteúdo em nível de bloco e escopo variável : Ao @contentimportar o conteúdo em nível de bloco, seu escopo é associado ao contexto onde é definido, e nada tem a ver com o escopo dentro da instrução mista.

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  // @content 的内容的作用域在定义它的地方
  @content;
  border-color: $color;
}
.colors {
  @include colors { // 这里的color，虽然会被插入到@content的位置// 但是它的作用域是在定义它的地方，
    // 而定义它的地方，$color是全局变量，值为whitecolor: $color; }
}
​
// 编译为
.colors {
  background-color: blue;
  color: white;
  border-color: blue;
} 

Observe que nem toda definição está no escopo global e também é possível que a definição esteja aninhada em um seletor e, então, o escopo seja o escopo local do seletor.

5. Instrução de função ( Function Directives)

SassPermite funções personalizadas, as funções podem ser usadas em qualquer valor de atributo ou SassScript. Nomes de funções personalizadas podem ser prefixados para evitar conflitos de nomenclatura.

$grid-width: 40px;
$gutter-width: 10px;
​
@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}
​
#sidebar { width: grid-width(5); }
​
// 编译为
#sidebar {
  width: 240px; 
} 

6. Formato de saída

6.1:nested

Nested ( :nested) é sasso formato de saída padrão de , que reflete claramente a CSSrelação HTMLentre e . Seletores e atributos ocupam uma linha separada e o recuo é sassconsistente com o do arquivo, contando com o recuo para refletir o nível de aninhamento.

// 编译后输出的CSS文件
#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; } 

6.2:expanded

O formato expandido ( :expanded) é igual ao da escrita à mão e o seletor não é recuado.

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
} 

6.3:compact

O formato compacto ( Compact) ocupa menos espaço, cada CSSregra ocupa apenas uma linha, os seletores aninhados não deixam linhas em branco e os seletores não aninhados deixam linhas em branco entre eles.

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
​
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; } 

6.4:compressed

O formato compactado ( Compressed) não deixa linhas em branco, espaços, comentários, etc., e o volume de saída é o menor.

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline} 

Finalmente

Organizou um conjunto de "Coleção de entrevistas de fabricantes de front-end", incluindo HTML, CSS, JavaScript, HTTP, protocolo TCP, navegador, VUE, React, estrutura de dados e algoritmo, um total de 201 perguntas de entrevista e deu uma resposta para cada pergunta Responda e analise.

Amigos necessitados, você pode clicar no cartão no final do artigo para receber este documento e compartilhá-lo gratuitamente

Parte da documentação mostra:

A extensão do artigo é limitada e o conteúdo a seguir não será exibido um por um

Amigos necessitados, você pode clicar no cartão abaixo para obtê-lo gratuitamente