conceitos de scss e uso

SCSS (Sassy CSS) é uma linguagem de pré-processador para CSS que oferece mais funções e flexibilidade baseada em CSS, tornando a escrita e o gerenciamento de folhas de estilo mais eficientes e convenientes.

Aqui estão algumas vantagens do SCSS:

Variáveis: SCSS permite o uso de variáveis para armazenar valores como cores, tamanhos de fonte, etc., tornando mais conveniente e fácil de manter o ajuste uniforme desses valores em toda a folha de estilos.
Regras aninhadas: regras aninhadas podem ser usadas no SCSS para organizar estilos e tornar a estrutura do código mais clara. Por exemplo, você pode escrever o estilo de pseudoclasse de um elemento no bloco de estilo de seu elemento pai em vez de escrevê-lo em vários locais.
Mixins: Mixins são uma forma de combinar um conjunto de propriedades de estilo em um bloco reutilizável. Isso evita escrever repetidamente o mesmo código de estilo e melhora a capacidade de reutilização e legibilidade do código.
Importação (Importações Inline): Vários arquivos SCSS podem ser mesclados em um arquivo por meio da regra @import. Essa abordagem ajuda a dividir a folha de estilo em unidades lógicas e pode ser organizada e gerenciada de maneira flexível conforme necessário.
Herança (Extend): SCSS suporta herança de estilo por meio da palavra-chave @extend, o que pode tornar a folha de estilo mais modular e de fácil manutenção.
Operações: SCSS permite operações matemáticas em folhas de estilo, como adição, subtração, multiplicação e divisão, o que é útil para lidar com alguns cálculos de estilo dinâmico.
Modularidade: As características do SCSS tornam as folhas de estilo mais modulares e estruturadas, podendo gerenciar e manter melhor os estilos, principalmente em grandes projetos.

Em resumo, o SCSS não apenas mantém todas as funções do CSS, mas também introduz recursos avançados como variáveis, aninhamento, mixagem, importação, etc. desenvolvimento final.

Comparação entre scss e css

gramática:

CSS: Sintaxe básica da folha de estilo em cascata, as regras são definidas por meio de seletores, atributos e valores.
SCSS: SCSS é uma linguagem de pré-processador para CSS que fornece mais funções e sintaxe, como variáveis, regras aninhadas, mixins, importações, etc., que tornam a escrita de folhas de estilo mais flexível e eficiente.

Legibilidade e facilidade de manutenção:

CSS: Em projetos maiores, os arquivos CSS podem se tornar muito detalhados e difíceis de manter porque carecem de recursos estruturados e modulares.
SCSS: SCSS suporta variáveis e regras aninhadas. Esses recursos tornam o código mais legível e de fácil manutenção. Ao usar variáveis e mixins, a escrita repetitiva de código pode ser reduzida e regras aninhadas podem expressar o relacionamento hierárquico da estrutura HTML de forma mais clara.

Extensão de função:

CSS: CSS padrão só pode fazer definição básica de estilo e correspondência de seletores.
SCSS: SCSS apresenta funções avançadas como mixagem, herança e cálculos. Essas funções tornam as folhas de estilo mais flexíveis e poderosas e podem lidar melhor com requisitos de estilo complexos.

compatibilidade:

CSS: os navegadores suportam CSS diretamente, nenhuma etapa adicional de compilação é necessária.
SCSS: SCSS precisa ser convertido em um arquivo CSS normal por um compilador antes de poder ser compreendido e aplicado pelo navegador.

curva de aprendizado:

CSS: Aprender CSS é relativamente simples, basta entender a combinação básica de seletores, propriedades e valores.
SCSS: Aprender SCSS requer o domínio de sua sintaxe e funções únicas, como variáveis, mistura, aninhamento, etc., o que requer um certo processo de aprendizagem e adaptação.

Resumindo, comparado ao CSS comum, o SCSS oferece mais ferramentas e recursos para simplificar a escrita e manutenção de folhas de estilo e é especialmente adequado para o desenvolvimento de projetos grandes e complexos. No entanto, para projetos pequenos ou necessidades simples de estilo, CSS simples pode ser mais direto e conveniente.

Uso de scss

Antes de aprender scss, primeiro instale dois plug-ins no vscode para converter scss em arquivos CSS comuns para aprendizado posterior!

Procure sass na loja de plug-ins, baixe os dois plug-ins a seguir e reinicie o vscode!

declarar variáveis

Declarar variáveis no SCSS é muito simples, você pode usar o símbolo $ para definir variáveis.

Aqui está um exemplo simples que demonstra como declarar e usar variáveis no SCSS:


// 定义变量
$primary-color: #3498db;
$secondary-color: #2ecc71;
 
// 使用变量
body {
  background-color: $primary-color;
}
 
a {
  color: $secondary-color;
}

No exemplo acima, definimos duas variáveis $primary-color e $secondary-color para armazenar a cor primária e a cor secundária, respectivamente. Podemos então usar essas variáveis em regras de estilo para manter as cores consistentes e fáceis de modificar em toda a folha de estilos.

Quando um arquivo SCSS é compilado em um arquivo CSS normal, todas as variáveis serão substituídas por seus valores correspondentes, portanto, o arquivo CSS final gerado não conterá nenhuma declaração de variável.

Diferenciar variáveis padrão

No SCSS, você pode usar variáveis padrão para garantir que uma variável tenha um valor alternativo se não estiver definida. Isso é especialmente útil ao trabalhar com temas ou configurar estilos.

Aqui está um exemplo de como declarar e usar variáveis padrão:


// 声明变量，并设置默认值
$primary-color: #3498db !default;
$secondary-color: #2ecc71 !default;
 
// 使用变量
body {
  background-color: $primary-color;
}
 
a {
  color: $secondary-color;
}

No exemplo acima, usamos a tag !default para definir o valor padrão. Isso significa que se $primary-color ou $secondary-color não forem definidos em outro lugar antes de serem introduzidos nesse arquivo SCSS, eles usarão os valores padrão especificados (#3498db e #2ecc71). Caso essas variáveis tenham sido definidas antes da importação do arquivo, os valores padrão serão ignorados.

A vantagem de usar variáveis padrão é que ela permite fornecer valores alternativos para variáveis sem substituir variáveis já definidas. Isto é especialmente útil para criar temas ou compartilhar variáveis em vários arquivos de estilo.

Distinguir entre variáveis globais e variáveis locais

Variáveis globais: Variáveis globais são variáveis declaradas fora de um seletor ou fora de um mixer/função. Eles estão acessíveis em toda a folha de estilo e, se a mesma variável global for definida em vários arquivos, seus valores permanecerão consistentes.
Variáveis locais: Variáveis locais são variáveis definidas dentro de um seletor ou dentro de um mixer/função. Eles só podem ser usados dentro do escopo em que estão definidos e não são mais válidos fora desse escopo.

Nota: variáveis locais substituem variáveis globais

Quando uma variável com o mesmo nome de uma variável global é declarada novamente em um escopo local, a variável local substitui o valor da variável global. Isso permite que diferentes valores de variáveis sejam definidos para um seletor ou mixer específico sem afetar a situação global.

Use a palavra-chave !global para transformar variáveis locais em variáveis globais

SCSS fornece a palavra-chave !global para declarar explicitamente variáveis locais como variáveis globais. Isto faz com que o valor de uma variável local seja promovido para o escopo global onde ela é declarada, substituindo qualquer variável global existente com o mesmo nome.

Exemplo:


// 全局变量
$primary-color: #3498db;
 
.button {
  // 局部变量，覆盖全局变量
  $primary-color: #cc582e;
  background-color: $primary-color; // 使用局部变量值
}
 
// 使用 !global 将局部变量变为全局变量
$primary-color: #cddb34;
 
.button {
  // 使用 !global 将局部变量变为全局变量
  $primary-color: #2ecc71 !global;
}
 
body {
  background-color: $primary-color; // 这里使用的是已变为全局的 $primary-color
}

No primeiro exemplo, a variável local $primary-color dentro do seletor .button substitui o valor da variável global. No segundo exemplo, ao utilizar a palavra-chave !global, as variáveis locais dentro do seletor .button são convertidas em variáveis globais, afetando assim os valores das variáveis no escopo global.

Sintaxe aninhada

Aninhamento de seletor

aninhamento básico

O aninhamento de seletores permite que regras de estilo para seletores filhos sejam aninhadas dentro de seletores pais, por exemplo:


// SCSS代码
.navbar {
  background-color: #333;
  padding: 10px;
 
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
 
    li {
      display: inline-block;
      margin-right: 10px;
 
      a {
        text-decoration: none;
        color: #fff;
 
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

No código acima, o seletor .navbar contém um ul, li e um subseletor aninhados. Essa estrutura aninhada torna as regras de estilo mais claras e fáceis de gerenciar.

Referência do seletor pai aninhado (&)

No SCSS, o símbolo & é usado para se referir a um seletor pai, especialmente útil no caso de pseudoclasses ou pseudoelementos. Por exemplo, use &:hover para fazer referência ao seletor pai do seletor atual e adicione um estilo de estado :hover.


.button {
  background-color: #3498db;
  color: #fff;
  padding: 8px 16px;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
 
  &:hover {
    background-color: #2980b9;
  }
}

Considerações sobre aninhamento

Profundidade do seletor: Evite o aninhamento excessivamente profundo do seletor, pois isso pode aumentar a prioridade do estilo, dificultando a substituição e a manutenção do estilo.
Legibilidade: Ao usar o aninhamento de seletores, preste atenção para manter o código legível e claro e evite estruturas aninhadas excessivamente complexas.
Desempenho: estruturas aninhadas podem aumentar o tamanho do arquivo CSS gerado, mas geralmente podem ser otimizadas com organização e escrita de estilo adequado.

aninhado aninhado

SCSS permite vários níveis de aninhamento de seletores, por exemplo:


.container {
  .row {
    .col {
      width: 100%;
    }
  }
}

Aninhamento de propriedades

No SCSS, além do aninhamento de seletores, existe também o recurso de aninhamento de atributos, outro recurso que torna as folhas de estilo mais limpas e fáceis de gerenciar. O aninhamento de propriedades permite que propriedades relacionadas sejam organizadas juntas, semelhante à forma de um objeto.

Aninhamento de atributos básicos

O aninhamento de propriedades pode ser usado para colocar propriedades relacionadas dentro de um bloco de código, por exemplo:


.navbar {
  font: {
    family: Arial, sans-serif;
    size: 16px;
    weight: bold;
  }
  margin: {
    top: 10px;
    bottom: 15px;
  }
  padding: {
    left: 20px;
    right: 20px;
  }
}

No exemplo acima, os blocos de fonte, margem e preenchimento contêm atributos relacionados. Esta organização torna as propriedades dentro de cada bloco mais claras e fáceis de modificar e manter.

Considerações sobre aninhamento

Propriedades suportadas: Nem todas as propriedades CSS suportam aninhamento, geralmente aquelas que podem aceitar pares de valores-chave, como fonte, margem, preenchimento, borda, etc.
Legibilidade: Ao usar o aninhamento de atributos, garanta a legibilidade e clareza do código e evite aninhamento excessivo e estruturas complexas.
Aninhamento aninhado: você também pode aninhar outras propriedades dentro de aninhamentos de propriedades, o que pode organizar e estruturar ainda mais seus estilos.

herdar

No SCSS, a herança (Extend) é um recurso muito útil que permite que um seletor herde as regras de estilo de outro seletor. Esse recurso reduz o código CSS duplicado e torna as folhas de estilo mais modulares e fáceis de manter.

Uso básico

A herança do seletor pode ser obtida usando a palavra-chave @extend. Por exemplo:


%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
 
.success-message {
  @extend %message-shared;
  background-color: lightgreen;
}
 
.error-message {
  @extend %message-shared;
  background-color: lightcoral;
}

No exemplo acima, %message-shared é um seletor de espaço reservado que define um conjunto comum de estilos. .success-message e .error-message respectivamente herdam o estilo de %message-shared e adicionam suas próprias cores de fundo.

Notas sobre herança

Ordem dos seletores: a herança pode gerar uma longa lista de seletores, o que pode afetar a prioridade do estilo. Certifique-se de que a ordem e a posição dos seletores estejam corretas ao usar @extend para evitar problemas de prioridade desnecessários.
Restrição: Os seletores herdados devem aparecer após o seletor herdado. Isso significa que se você definir um seletor em seu arquivo SCSS e usar @extend para herdar seu estilo no código subsequente, essa herança só terá efeito após ser definida.
Seletores de espaço reservado versus seletores de classe: seletores de espaço reservado começando com % geralmente são alvos melhores para herança do que seletores de classe diretos porque não geram seletores redundantes após a compilação. Os seletores de classe, por outro lado, gerarão estilos duplicados em todos os lugares em que forem usados, aumentando o tamanho e a complexidade do arquivo.

Cenários de aplicação

A herança é particularmente adequada para seletores com características comuns, como componentes de botões, caixas de mensagens, etc. Por meio da herança, você pode reutilizar as mesmas regras de estilo em diferentes cenários, mantendo seu código limpo e de fácil manutenção.

Resumindo, a herança no SCSS é uma ferramenta poderosa que pode ajudá-lo a evitar a duplicação de estilo e manter a modularidade e clareza do seu código. No entanto, ao usá-lo, você precisa prestar atenção à ordem e posição dos seletores, e ao razoável. uso de espaços reservados para maximizar seu efeito.

Espaço reservado%

O espaço reservado % é um seletor especial no SCSS frequentemente usado para definir regras de estilo que podem ser herdadas, mas não geram saída CSS real. Especificamente:

definir espaço reservado


%placeholder-selector {
  // 样式规则
}

No exemplo acima, %placeholder-selector é um seletor de espaço reservado começando com%. Ele define um conjunto de regras de estilo, mas o nome do seletor correspondente não aparecerá no CSS compilado.

espaço reservado para herança


.some-class {
  @extend %placeholder-selector;
  // 可选的额外样式
}

Usar a palavra-chave @extend permite que .some-class herde o estilo de% placeholder-selector. Isso significa que .some-class aplicará todas as regras de estilo definidas em% placeholder-selector e gerará a saída CSS correspondente.

Vantagens e cenários aplicáveis

Reduza a duplicação: os seletores de espaço reservado permitem definir um conjunto comum de regras de estilo e reutilizá-las por meio de herança quando necessário, evitando a duplicação de código.
Modularidade: os seletores de espaço reservado contribuem para a modularidade e a manutenção do código, especialmente em projetos grandes, e podem melhorar a clareza estrutural das folhas de estilo.
Evite redundância: Comparados ao uso de seletores de classe, os seletores de espaço reservado não geram seletores redundantes, reduzindo assim o tamanho dos arquivos CSS.

Precauções

Ordem e posição: Ao usar @extend para herdar seletores de espaço reservado, o seletor de espaço reservado herdado deve ser definido antes de seu seletor ser usado, caso contrário, poderão ocorrer problemas inesperados de hierarquia de estilo.
Mistura: você pode combinar seletores de espaço reservado com seletores de classe comuns, mas precisa manuseá-los com cuidado para evitar saída CSS inesperada.

Em resumo, o seletor de espaço reservado% é uma ferramenta poderosa em SCSS que pode ajudar os desenvolvedores a melhorar a capacidade de reutilização e manutenção de folhas de estilo, ao mesmo tempo que reduz a redundância desnecessária de CSS.

Misture @mixin

Mixins são outro recurso muito poderoso do SCSS que permite que um conjunto de regras de estilo seja encapsulado em um bloco de código reutilizável e depois referenciado sempre que necessário. Ao contrário do seletor de espaço reservado %, os mixins podem gerar saída CSS diretamente, por isso é adequado para situações em que o mesmo estilo precisa ser usado em vários locais.

Definir mix


@mixin mixin-name($parameter1, $parameter2, ...) {
  // 样式规则使用参数
}

No exemplo acima, a palavra-chave @mixin define um mixin chamado mixin-name que pode aceitar vários argumentos (se necessário) e define um conjunto de regras de estilo dentro dele.

mixagem de chamadas


.some-class {
  @include mixin-name(value1, value2, ...);
  // 可选的额外样式
}

Use a palavra-chave @include para chamar o mixin no seletor e passar parâmetros para ele. Desta forma, .some-class aplicará as regras de estilo definidas no mixin e aplicará os valores dos parâmetros passados às variáveis dos parâmetros correspondentes.

exemplo


@mixin button-style($background-color, $text-color) {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: $background-color;
  color: $text-color;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
 
  &:hover {
    background-color: darken($background-color, 10%);
  }
}
.button-primary {
  @include button-style(#3498db, #fff);
}
 
.button-secondary {
  @include button-style(#2ecc71, #fff);
}

Vantagens e cenários aplicáveis

Flexibilidade: A mixagem permite a passagem de parâmetros e diferentes saídas de estilo podem ser geradas dinamicamente conforme necessário, tornando o estilo mais flexível e personalizável.
Legibilidade: encapsular regras de estilo comumente usadas em um mixin pode melhorar a legibilidade e a manutenção do seu código, especialmente se o mesmo estilo for necessário em vários locais.
Reutilização: O mesmo mix pode ser chamado diversas vezes em diferentes seletores e arquivos para evitar definições repetidas de estilos e reduzir a quantidade de código.

Precauções

Conflitos de nomenclatura: certifique-se de que os mixins não entrem em conflito com nomes de classes CSS existentes ou outros mixins para evitar substituições ou erros inesperados de estilo.
Passagem de parâmetros: Ao chamar um mixin, certifique-se de que os tipos de parâmetros e a ordem passada sejam consistentes com os requisitos da definição do mixin para evitar erros de compilação ou comportamento inesperado.
Impacto no desempenho: O uso extensivo de mixins pode aumentar o tamanho dos arquivos CSS resultantes, portanto, tenha cuidado com o impacto no desempenho.

Em resumo, mix @mixin é uma ferramenta poderosa para encapsular e reutilizar regras de estilo em SCSS. Ele pode melhorar significativamente a capacidade de manutenção e flexibilidade do CSS e é adequado para vários requisitos de estilo complexos e repetidos.

SCSS usa instruções condicionais

No SCSS, as instruções condicionais permitem que estilos CSS sejam gerados dinamicamente com base em condições específicas. As instruções condicionais no SCSS são semelhantes às instruções condicionais em outras linguagens de programação, incluindo @if, @else if e @else.

declaração @if

A instrução @if permite que estilos sejam gerados com base em uma condição. A sintaxe é a seguinte:


$use-rounded-corners: true;
 
.button {
  @if $use-rounded-corners {
    border-radius: 4px;
  }
}

No exemplo acima, se o valor da variável $use-rounded-corners for verdadeiro, o estilo da classe .button é gerado, incluindo border-radius: 4px;. Se a condição for falsa, esta parte do estilo não será gerada.

@else e @else instruções if

Além de @if, você também pode usar @else if e @else para adicionar mais ramificações condicionais.


$button-size: medium;
 
.button {
  @if $button-size == small {
    padding: 5px 10px;
  } @else if $button-size == medium {
    padding: 10px 25px;
  } @else if $button-size == large {
    padding: 15px 30px;
  } @else {
    padding: 10px 20px; // 默认值
  }
}

Neste exemplo, dependendo do valor da variável $button-size, diferentes valores de preenchimento são selecionados para serem aplicados à classe .button. Se não houver condição correspondente, o bloco de código @else será executado.

Aninhamento de declarações condicionais

Instruções condicionais também podem ser aninhadas para lidar com lógicas mais complexas.


$button-style: flat;
$button-size: medium;
 
.button {
  @if $button-style == flat {
    background-color: transparent;
    color: #333;
    border: 1px solid #333;
 
    @if $button-size == small {
      padding: 5px 10px;
    } @else if $button-size == medium {
      padding: 10px 25px;
    } @else if $button-size == large {
      padding: 15px 30px;
    } @else {
      padding: 10px 20px; // 默认值
    }
  } @else if $button-style == raised {
    background-color: #3498db;
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
  } @else {
    // 默认样式
    background-color: #db6334;
    color: #fff;
    padding: 10px 20px;
  }
}

Neste exemplo, diferentes estilos são selecionados para aplicação com base nos valores de $button-style e $button-size. Essa abordagem aninhada possibilita gerar regras de estilo complexas com base em múltiplas condições.

para concluir

Ao usar instruções condicionais, você pode obter uma definição de estilo mais flexível e dinâmica no SCSS e gerar diferentes regras CSS com base em diferentes condições, melhorando assim a capacidade de manutenção e escalabilidade da folha de estilos.

Três tipos de loops no SCSS

No SCSS, existem três construções principais de loop que podem ser usadas para gerar regras CSS repetidas: @for, @each e @while.

@for loop

O loop @for é usado para gerar estilos repetidamente de acordo com certas etapas e condições.

gramática básica：


@for $i from <start> through <end> {
  // 循环体
}

de<start> através<end> : Especifique o valor inicial e o valor final do loop (incluindo o valor final).
A variável $i pode ser usada no corpo do loop para representar o valor do índice do loop atual.

Exemplo：


@for $i from 1 through 3 {
  .item-#{$i} {
    width: 100px * $i;
  }
}

No exemplo acima, são geradas três classes .item-1, .item-2 e .item-3, com larguras definidas como 100px, 200px e 300px respectivamente.

@cada ciclo

O loop @each é usado para percorrer dados de lista ou tipo de mapa e gerar estilos para cada elemento.

gramática básica：


@each $var in <list or map> {
  // 循环体
}

$var: representa a variável do loop atual.
<list or map>: pode ser uma lista (como $list: item1, item2, item3;) ou um mapa (par chave-valor).

Exemplo：


$colors: (red, green, blue);
 
@each $color in $colors {
  .text-#{$color} {
    color: $color;
  }
}

Neste exemplo, três classes .text-red, .text-green e .text-blue são geradas e suas cores de texto são definidas com valores de cores correspondentes.

@tempo loop

O loop @while gera estilos repetidamente com base em uma condição até que a condição não seja atendida.

gramática básica：


$i: 1;
@while $i < 4 {
  // 循环体
  $i: $i + 1; // 更新条件
}

$i: como contador de loop ou variável de condição.
Qualquer código SCSS pode ser executado no corpo do loop. Normalmente, a variável de condição precisa ser atualizada no final do corpo do loop para evitar loops infinitos.

Exemplo：


$i: 1;
@while $i < 4 {
  .item-#{$i} {
    width: 100px * $i;
  }
  $i: $i + 1;
}

Este código gera três classes .item-1, .item-2 e .item-3 e define suas larguras para 100px, 200px e 300px respectivamente.

Resumir

As três estruturas de loop SCSS @for, @each e @while são usadas para fazer loop por índice, percorrer lista ou dados de tipo de mapa e gerar estilos baseados em loops condicionais, respectivamente. Essas estruturas de loop tornam o SCSS mais poderoso e flexível, capaz de gerar regras CSS complexas de acordo com as necessidades.

Funções e uso personalizados

No SCSS, as folhas de estilo podem ser aprimoradas com funções personalizadas que aceitam parâmetros e retornam valores processados.

Definir funções personalizadas

No SCSS, use a palavra-chave @function para definir funções, que podem ter parâmetros e valores de retorno. Por exemplo, definimos uma função para calcular a largura total do modelo de caixa de um elemento:


@function total-width($padding, $border, $margin, $content-width) {
  @return $padding + $border + $margin + $content-width;
}

No exemplo acima:

largura total é o nome da função.
A função aceita quatro parâmetros: $padding, $border, $margin, $content-width.
A instrução @return é usada para retornar um valor calculado.

Use funções personalizadas

Depois que uma função é definida, ela pode ser usada em estilos para calcular e gerar os valores necessários. Por exemplo:


.element {
  width: total-width(10px, 1px, 5px, 100px);
}

Neste exemplo, a função largura total será chamada com os parâmetros 10px, 1px, 5px e 100px. O resultado retornado pela função (116px) será aplicado à propriedade width de .element.

Precauções

As funções podem ser incluídas em qualquer arquivo SCSS e podem ser organizadas e importadas como outras regras de estilo.
Todos os recursos do SCSS, como instruções de controle (como @if, @for, @each, @while) e funções integradas, podem ser usados em funções.
Os parâmetros da função podem ser qualquer tipo de dados SCSS, incluindo números, strings, cores, etc.

Trabalho de casa

Use SCSS para mudar o tema preto e branco da página

HTML->


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="main.css">
  <title>黑白色主题切换</title>
</head>
<body>
  <div class="container">
    <button id="theme-toggle">切换主题</button>
    <div class="box">
      <div class="content">
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
      </div>
    </div>
  </div>
 
  <script src="main.js"></script>
</body>
</html>

SCSS-S


// 定义轻主题的样式变量
$light-theme: (
  background-color: white,
  text-color: black,
  highlight-color: #f0f0f0
);
 
// 定义暗主题的样式变量
$dark-theme: (
  background-color: black,
  text-color: white,
  highlight-color: #333333
);
 
// 定义一个混合（mixin）来应用主题样式
// 参数 $theme: 要应用的主题，是一个包含背景色、文本颜色和高亮颜色的映射（map）
@mixin theme($theme) {
  background-color: map-get($theme, background-color);
  color: map-get($theme, text-color);
 
  // 为 .box 类应用主题的高亮颜色
  .box {
    background-color: map-get($theme, highlight-color);
  }
}
 
// 应用轻主题样式到 body 元素，并添加过渡效果
body {
  @include theme($light-theme);
  transition: all 0.3s ease;
}
 
// 为 body 的 dark 类应用暗主题样式
body.dark {
  @include theme($dark-theme);
}
 
// 设置容器的文本居中和顶部间距
.container {
  text-align: center;
  margin-top: 20px;
}
 
// 配置主题切换按钮的样式
#theme-toggle {
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  outline: none;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  border-radius: 5px;
}
 
// 鼠标悬停在主题切换按钮上时改变背景色
#theme-toggle:hover {
  background-color: #0056b3;
}
 
// 定义 .box 类的基本样式和过渡效果
.box {
  margin: 20px auto;
  padding: 20px;
  width: 50%;
  border: 1px solid #ccc;
  transition: all 0.3s ease;
 
  // 内容区域的样式配置
  .content {
    p {
      margin: 10px 0;
    }
  }
}


/**
 * 为主题切换按钮添加点击事件监听器
 * 当按钮被点击时，切换文档主体的黑暗主题样式
 * 
 * 该函数通过toggle方法动态切换body元素的'dark'类，从而实现主题的切换。
 * 如果body已经应用了'dark'类，那么点击按钮将移除这个类，反之亦然。
 * 这种方式允许用户在黑暗主题和默认主题之间自由切换。
 */
document.getElementById('theme-toggle').addEventListener('click', () => {
  document.body.classList.toggle('dark');
});

Compartilhamento de tecnologia

conceitos e uso de scss

o que é scs

Comparação entre scss e css

Uso de scss

declarar variáveis

Diferenciar variáveis ​​padrão

Distinguir entre variáveis ​​globais e variáveis ​​locais

Sintaxe aninhada

Aninhamento de seletor

aninhamento básico

Referência do seletor pai aninhado (&)

Considerações sobre aninhamento

aninhado aninhado

Aninhamento de propriedades

Aninhamento de atributos básicos

Considerações sobre aninhamento

herdar

Uso básico

Notas sobre herança

Cenários de aplicação

Espaço reservado%

definir espaço reservado

espaço reservado para herança

Vantagens e cenários aplicáveis

Precauções

Misture @mixin

Definir mix

mixagem de chamadas

exemplo

Vantagens e cenários aplicáveis

Precauções

SCSS usa instruções condicionais

declaração @if

@else e @else instruções if

Aninhamento de declarações condicionais

para concluir

Três tipos de loops no SCSS

@for loop

@cada ciclo

@tempo loop

Resumir

Funções e uso personalizados

Definir funções personalizadas

Use funções personalizadas

Precauções

Trabalho de casa

Perfil pessoal

minhas informações de contato

Diferenciar variáveis padrão

Distinguir entre variáveis globais e variáveis locais