conceptos y uso de scss

SCSS (Sassy CSS) es un lenguaje de preprocesador para CSS. Proporciona más funciones y flexibilidad basadas en CSS, lo que hace que la escritura y gestión de hojas de estilo sea más eficiente y conveniente.

Estas son algunas de las ventajas de SCSS:

Variables: SCSS permite el uso de variables para almacenar valores como colores, tamaños de fuente, etc., lo que hace que sea más conveniente y fácil de mantener ajustar uniformemente estos valores en toda la hoja de estilo.
Reglas anidadas: las reglas anidadas se pueden usar en SCSS para organizar estilos y hacer que la estructura del código sea más clara. Por ejemplo, puede escribir el estilo de pseudoclase de un elemento en el bloque de estilo de su elemento principal en lugar de escribirlo en varios lugares.
Mixins: Los mixins son una forma de combinar un conjunto de propiedades de estilo en un bloque reutilizable. Esto evita escribir repetidamente el mismo código de estilo y mejora la reutilización y legibilidad del código.
Importación (importaciones en línea): se pueden fusionar varios archivos SCSS en un solo archivo mediante la regla @import. Este enfoque ayuda a dividir la hoja de estilo en unidades lógicas y puede organizarse y administrarse de manera flexible según sea necesario.
Herencia (Extender): SCSS admite la herencia de estilos a través de la palabra clave @extend, lo que puede hacer que la hoja de estilo sea más modular y fácil de mantener.
Operaciones: SCSS permite operaciones matemáticas en hojas de estilo, como suma, resta, multiplicación y división, lo que resulta útil para manejar algunos cálculos de estilo dinámico.
Modularidad: las características de SCSS hacen que las hojas de estilo sean más modulares y estructuradas, lo que puede gestionar y mantener mejor los estilos, especialmente en proyectos grandes.

En resumen, SCSS no solo conserva todas las funciones de CSS, sino que también introduce características avanzadas como variables, anidamiento, mezcla, importación, etc. Estas funciones permiten a los desarrolladores escribir y administrar hojas de estilo de manera más eficiente y se usan comúnmente en el front-end moderno. finalizar el desarrollo.

Comparación entre scss y css

gramática:

CSS: Sintaxis básica de hojas de estilos en cascada, las reglas se definen a través de selectores, atributos y valores.
SCSS: SCSS es un lenguaje de preprocesador para CSS. Proporciona más funciones y sintaxis, como variables, reglas anidadas, mixins, importaciones, etc., que hacen que la escritura de hojas de estilo sea más flexible y eficiente.

Legibilidad y mantenibilidad:

CSS: en proyectos más grandes, los archivos CSS pueden volverse muy detallados y difíciles de mantener porque carecen de características estructuradas y modulares.
SCSS: SCSS admite variables y reglas anidadas. Estas características hacen que el código sea más legible y fácil de mantener. Al utilizar variables y mixins, se puede reducir la escritura repetitiva de código y las reglas anidadas pueden expresar la relación jerárquica de la estructura HTML con mayor claridad.

Extensión de función:

CSS: CSS estándar solo puede realizar definiciones de estilos básicas y coincidencias de selectores.
SCSS: SCSS introduce funciones avanzadas como mezcla, herencia y cálculos. Estas funciones hacen que las hojas de estilo sean más flexibles y potentes, y pueden hacer frente mejor a requisitos de estilo complejos.

compatibilidad:

CSS: los navegadores admiten CSS directamente, no se requieren pasos de compilación adicionales.
SCSS: un compilador debe convertir SCSS en un archivo CSS normal antes de que el navegador pueda entenderlo y aplicarlo.

curva de aprendizaje:

CSS: aprender CSS es relativamente simple, solo comprenda la combinación básica de selectores, propiedades y valores.
SCSS: Aprender SCSS requiere dominar su sintaxis y funciones únicas, como variables, mezcla, anidamiento, etc., lo que requiere un cierto proceso de aprendizaje y adaptación.

En resumen, en comparación con CSS normal, SCSS proporciona más herramientas y funciones para simplificar la escritura y el mantenimiento de hojas de estilo, y es especialmente adecuado para el desarrollo de proyectos grandes y complejos. Sin embargo, para proyectos pequeños o necesidades de estilo simples, CSS simple puede ser más sencillo y conveniente.

uso de scss

Antes de aprender scss, primero instale dos complementos en vscode para convertir scss en archivos CSS normales para el aprendizaje posterior.

Busque sass en la tienda de complementos, descargue los dos complementos siguientes y reinicie vscode.

declarar variables

Declarar variables en SCSS es muy simple, puede usar el símbolo $ para definir variables.

Aquí hay un ejemplo simple que demuestra cómo declarar y usar variables en SCSS:


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

En el ejemplo anterior, definimos dos variables $color primario y $color secundario para almacenar el color primario y el color secundario respectivamente. Luego podemos usar estas variables en reglas de estilo para mantener los colores consistentes y fáciles de modificar en toda la hoja de estilo.

Cuando un archivo SCSS se compila en un archivo CSS normal, todas las variables se reemplazarán con sus valores correspondientes, por lo que el archivo CSS final generado no contendrá ninguna declaración de variable.

Diferenciar variables predeterminadas

En SCSS, puede utilizar variables predeterminadas para garantizar que una variable tenga un valor alternativo si no está definida. Esto es especialmente útil cuando se trabaja con temas o se configuran estilos.

A continuación se muestra un ejemplo de cómo declarar y utilizar variables predeterminadas:


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

En el ejemplo anterior, utilizamos la etiqueta !default para definir el valor predeterminado. Esto significa que si $primary-color o $secundary-color no están definidos en otro lugar antes de introducirlos en ese archivo SCSS, utilizarán los valores predeterminados especificados (#3498db y #2ecc71). Si estas variables se han definido antes de importar el archivo, se ignorarán los valores predeterminados.

La ventaja de utilizar variables predeterminadas es que le permite proporcionar valores alternativos para las variables sin sobrescribir las variables ya definidas. Esto es especialmente útil para crear temas o compartir variables entre múltiples archivos de estilo.

Distinguir entre variables globales y variables locales.

Variables globales: las variables globales son variables declaradas fuera de un selector o fuera de un mezclador/función. Son accesibles en toda la hoja de estilo y, si la misma variable global se define en varios archivos, sus valores seguirán siendo consistentes.
Variables locales: Las variables locales son variables definidas dentro de un selector o dentro de un mezclador/función. Sólo se pueden utilizar dentro del ámbito en el que están definidos y ya no son válidos fuera de ese ámbito.

Nota: las variables locales anulan las variables globales

Cuando una variable con el mismo nombre que una variable global se redeclara en un ámbito local, la variable local sobrescribe el valor de la variable global. Esto permite definir diferentes valores de variables para un selector o mezclador específico sin afectar la situación global.

Utilice la palabra clave !global para convertir variables locales en variables globales

SCSS proporciona la palabra clave !global para declarar explícitamente variables locales como variables globales. Esto hace que el valor de una variable local se promueva al ámbito global donde se declara, sobrescribiendo cualquier variable global existente con el mismo nombre.

Ejemplo:


// 全局变量
$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
}

En el primer ejemplo, la variable local $primary-color dentro del selector .button anula el valor de la variable global. En el segundo ejemplo, al usar la palabra clave !global, las variables locales dentro del selector .button se convierten en variables globales, lo que afecta los valores de las variables en el alcance global.

Sintaxis anidada

Anidamiento de selectores

anidamiento básico

El anidamiento de selectores permite anidar reglas de estilo para selectores secundarios dentro de selectores principales, por ejemplo:


// 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;
        }
      }
    }
  }
}

En el código anterior, el selector .navbar contiene un ul, un li anidados y un subselector. Esta estructura anidada hace que las reglas de estilo sean más claras y fáciles de gestionar.

Referencia del selector principal anidado (&)

En SCSS, el símbolo & se utiliza para referirse a un selector principal, especialmente útil en el caso de pseudoclases o pseudoelementos. Por ejemplo, use &:hover para hacer referencia al selector principal del selector actual y agregue un 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;
  }
}

Consideraciones de anidamiento

Profundidad del selector: Evite el anidamiento excesivamente profundo del selector, ya que puede aumentar la prioridad del estilo, dificultando la anulación de estilos y el mantenimiento.
Legibilidad: cuando utilice el anidamiento de selectores, preste atención a mantener el código legible y claro, y evite estructuras anidadas demasiado complejas.
Rendimiento: las estructuras anidadas pueden aumentar el tamaño del archivo CSS generado, pero generalmente se pueden optimizar con una organización y escritura de estilo adecuadas.

anidado anidado

SCSS permite múltiples niveles de anidamiento de selectores, por ejemplo:


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

Anidamiento de propiedades

En SCSS, además del anidamiento de selectores, también existe la función de anidamiento de atributos, que es otra característica que hace que las hojas de estilo sean más limpias y fáciles de administrar. El anidamiento de propiedades permite que las propiedades relacionadas se organicen juntas, de forma similar a la forma de un objeto.

Anidamiento de atributos básicos

El anidamiento de propiedades se puede utilizar para colocar propiedades relacionadas dentro de un bloque de código, por ejemplo:


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

En el ejemplo anterior, los bloques de fuente, margen y relleno contienen atributos relacionados. Esta organización hace que las propiedades dentro de cada bloque sean más claras y fáciles de modificar y mantener.

Consideraciones de anidamiento

Propiedades admitidas: no todas las propiedades CSS admiten el anidamiento, generalmente aquellas que pueden aceptar pares clave-valor, como fuente, margen, relleno, borde, etc.
Legibilidad: cuando utilice el anidamiento de atributos, garantice la legibilidad y claridad del código y evite el anidamiento excesivo y las estructuras complejas.
Anidamiento anidado: también puede anidar otras propiedades dentro de nidos de propiedades, lo que puede organizar y estructurar aún más sus estilos.

heredar

En SCSS, la herencia (Extender) es una característica muy útil que permite a un selector heredar las reglas de estilo de otro selector. Esta característica reduce el código CSS duplicado y hace que las hojas de estilo sean más modulares y fáciles de mantener.

Uso básico

La herencia del selector se puede lograr usando la palabra clave @extend. Por ejemplo:


%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;
}

En el ejemplo anterior, %message-shared es un selector de marcador de posición que define un conjunto común de estilos. .success-message y .error-message heredan respectivamente el estilo de %message-shared y agregan sus propios colores de fondo.

Notas sobre la herencia

Orden de selectores: la herencia puede generar una larga lista de selectores, lo que puede afectar la prioridad de estilo. Asegúrese de que el orden y la posición de los selectores sean correctos cuando utilice @extend para evitar problemas de prioridad innecesarios.
Restricción: Los selectores heredados deben aparecer después del selector heredado. Esto significa que si define un selector en su archivo SCSS y usa @extend para heredar su estilo en el código posterior, esta herencia solo tendrá efecto después de que se defina.
Selectores de marcador de posición versus selectores de clase: los selectores de marcador de posición que comienzan con % generalmente son mejores objetivos para la herencia que los selectores de clase directos porque no generan selectores redundantes después de la compilación. Los selectores de clases, por otro lado, generarán estilos duplicados en todos los lugares donde se utilicen, lo que aumentará el tamaño y la complejidad del archivo.

Escenarios de aplicación

La herencia es particularmente adecuada para selectores con características comunes, como componentes de botones, cuadros de mensajes, etc. A través de la herencia, puede reutilizar las mismas reglas de estilo en diferentes escenarios mientras mantiene su código limpio y fácil de mantener.

En resumen, la herencia en SCSS es una herramienta poderosa que puede ayudarlo a evitar la duplicación de estilos y mantener la modularidad y claridad de su código. Sin embargo, al usarlo, debe prestar atención al orden y la posición de los selectores, y a lo razonable. uso de marcadores de posición para maximizar su efecto.

% de marcador de posición

El marcador de posición % es un selector especial en SCSS que a menudo se usa para definir reglas de estilo que se pueden heredar pero que no generan una salida CSS real. Específicamente:

definir marcador de posición


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

En el ejemplo anterior, %placeholder-selector es un selector de marcador de posición que comienza con %. Define un conjunto de reglas de estilo, pero el nombre del selector correspondiente no aparecerá en el CSS compilado.

marcador de posición de herencia


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

El uso de la palabra clave @extend permite que .some-class herede el estilo de %placeholder-selector. Esto significa que .some-class aplicará todas las reglas de estilo definidas en %placeholder-selector y generará la salida CSS correspondiente.

Ventajas y escenarios aplicables

Reducir la duplicación: los selectores de marcador de posición permiten definir un conjunto común de reglas de estilo y reutilizarlas mediante herencia cuando sea necesario, evitando la duplicación de código.
Modularidad: los selectores de marcadores de posición contribuyen a la modularidad y la facilidad de mantenimiento del código, especialmente en proyectos grandes, y pueden mejorar la claridad estructural de las hojas de estilo.
Evite la redundancia: en comparación con el uso de selectores de clases, los selectores de marcador de posición no generan selectores redundantes, lo que reduce el tamaño de los archivos CSS.

Precauciones

Orden y posición: cuando se usa @extend para heredar selectores de marcador de posición, el selector de marcador de posición heredado debe definirse antes de usar su selector; de lo contrario, pueden ocurrir problemas inesperados de jerarquía de estilos.
Mezcla: puede combinar selectores de marcador de posición con selectores de clases comunes, pero debe manejarlos con cuidado para evitar resultados CSS inesperados.

En resumen, el selector% de marcador de posición es una herramienta poderosa en SCSS que puede ayudar a los desarrolladores a mejorar la reutilización y la capacidad de mantenimiento de las hojas de estilo al tiempo que reduce la redundancia innecesaria de CSS.

Mezclar @mixin

Los mixins son otra característica muy poderosa de SCSS que permite encapsular un conjunto de reglas de estilo en un bloque de código reutilizable y luego hacer referencia a ellas cuando sea necesario. A diferencia del selector de marcador de posición, los mixins pueden generar directamente resultados CSS, por lo que son adecuados para aquellas situaciones en las que es necesario utilizar el mismo estilo en varios lugares.

definir mezcla


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

En el ejemplo anterior, la palabra clave @mixin define un mixin llamado mixin-name que puede aceptar múltiples argumentos (si es necesario) y define un conjunto de reglas de estilo dentro de él.

mezcla de llamadas


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

Utilice la palabra clave @include para llamar al mixin en el selector y pasarle parámetros. De esta manera, .some-class aplicará las reglas de estilo definidas en el mixin y aplicará los valores de los parámetros pasados a las variables de parámetros correspondientes.

ejemplo


@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);
}

Ventajas y escenarios aplicables

Flexibilidad: la mezcla permite pasar parámetros y se pueden generar dinámicamente diferentes salidas de estilo según sea necesario, lo que hace que el estilo sea más flexible y personalizable.
Legibilidad: encapsular reglas de estilo comúnmente utilizadas en un mixin puede mejorar la legibilidad y el mantenimiento de su código, especialmente si se requiere el mismo estilo en varios lugares.
Reutilizabilidad: la misma combinación se puede llamar varias veces en diferentes selectores y archivos para evitar definiciones repetidas de estilos y reducir la cantidad de código.

Precauciones

Conflictos de nombres: asegúrese de que los mixins no entren en conflicto con los nombres de clases CSS existentes u otros mixins para evitar anulaciones de estilo o errores inesperados.
Paso de parámetros: al llamar a un mixin, asegúrese de que los tipos de parámetros y el orden pasados sean coherentes con los requisitos de la definición del mixin para evitar errores de compilación o comportamientos inesperados.
Impacto en el rendimiento: el uso extensivo de mixins puede aumentar el tamaño de los archivos CSS resultantes, así que tenga cuidado con el impacto en el rendimiento.

En resumen, mix @mixin es una poderosa herramienta para encapsular y reutilizar reglas de estilo en SCSS. Puede mejorar significativamente la capacidad de mantenimiento y la flexibilidad de CSS y es adecuada para diversos requisitos de estilo complejos y repetidos.

SCSS utiliza declaraciones condicionales

En SCSS, las declaraciones condicionales permiten que los estilos CSS se generen dinámicamente en función de condiciones específicas. Las declaraciones condicionales en SCSS son similares a las declaraciones condicionales en otros lenguajes de programación, incluidos @if, @else if y @else.

@si declaración

La declaración @if permite generar estilos en función de una condición. La sintaxis es la siguiente:


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

En el ejemplo anterior, si el valor de la variable $use-rounded-corners es verdadero, se genera el estilo de la clase .button, incluido border-radius: 4px;. Si la condición es falsa, esta parte del estilo no se generará.

declaraciones @else y @else if

Además de @if, también puedes usar @else if y @else para agregar más ramas condicionales.


$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; // 默认值
  }
}

En este ejemplo, dependiendo del valor de la variable $button-size, se seleccionan diferentes valores de relleno para aplicarlos a la clase .button. Si no hay ninguna condición coincidente, se ejecutará el bloque de código en @else.

Anidamiento de declaraciones condicionales

Las declaraciones condicionales también se pueden anidar para manejar una lógica más compleja.


$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;
  }
}

En este ejemplo, se seleccionan diferentes estilos para aplicar según los valores de $button-style y $button-size. Este enfoque anidado permite generar reglas de estilo complejas basadas en múltiples condiciones.

en conclusión

Al utilizar declaraciones condicionales, puede lograr una definición de estilo más flexible y dinámica en SCSS y generar diferentes reglas CSS basadas en diferentes condiciones, mejorando así la capacidad de mantenimiento y escalabilidad de la hoja de estilo.

Tres tipos de bucles en SCSS

En SCSS, hay tres construcciones de bucle principales que se pueden utilizar para generar reglas CSS repetidas: @for, @each y @ while.

@en bucle

El bucle @for se utiliza para generar estilos repetidamente de acuerdo con ciertos pasos y condiciones.

gramática básica：


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

de<start> a través de<end> : Especifique el valor inicial y el valor final del bucle (incluido el valor final).
La variable $i se puede utilizar en el cuerpo del bucle para representar el valor del índice del bucle actual.

Ejemplo：


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

En el ejemplo anterior, se generan tres clases .item-1, .item-2 y .item-3, con anchos establecidos en 100 px, 200 px y 300 px respectivamente.

@cada bucle

El bucle @each se utiliza para recorrer datos de tipo lista o mapa y generar estilos para cada elemento.

gramática básica：


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

$var: representa la variable del bucle actual.
<list or map>: Puede ser una lista (como $lista: elemento1, elemento2, elemento3;) o un mapa (par clave-valor).

Ejemplo：


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

En este ejemplo, se generan tres clases .text-red, .text-green y .text-blue, y sus colores de texto se establecen en los valores de color correspondientes.

@mientras bucle

El bucle @ while genera repetidamente estilos basados en una condición hasta que no se cumple la condición.

gramática básica：


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

$i: como contador de bucle o variable de condición.
Cualquier código SCSS se puede ejecutar en el cuerpo del bucle. Por lo general, la variable de condición debe actualizarse al final del cuerpo del bucle para evitar bucles infinitos.

Ejemplo：


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

Este código genera tres clases .item-1, .item-2 y .item-3, y establece sus anchos en 100px, 200px y 300px respectivamente.

Resumir

Las tres estructuras de bucle SCSS @for, @each y @ while se utilizan para realizar bucles por índice, recorrer datos de tipo lista o mapa y generar estilos basados en bucles condicionales, respectivamente. Estas estructuras de bucle hacen que SCSS sea más potente y flexible, capaz de generar reglas CSS complejas según las necesidades.

Funciones personalizadas y uso

En SCSS, las hojas de estilo se pueden mejorar con funciones personalizadas que aceptan parámetros y devuelven valores procesados.

Definir funciones personalizadas

En SCSS, utilice la palabra clave @function para definir funciones, que pueden tener parámetros y valores de retorno. Por ejemplo, definimos una función para calcular el ancho total del modelo de caja de un elemento:


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

En el ejemplo anterior:

ancho total es el nombre de la función.
La función acepta cuatro parámetros: $padding, $border, $margin, $content-width.
La declaración @return se utiliza para devolver un valor calculado.

Usar funciones personalizadas

Una vez definida una función, se puede utilizar en estilos para calcular y generar los valores requeridos. Por ejemplo:


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

En este ejemplo, se llamará a la función de ancho total con los parámetros 10px, 1px, 5px y 100px. El resultado devuelto por la función (116px) se aplicará a la propiedad de ancho de .element.

Precauciones

Las funciones se pueden incluir en cualquier archivo SCSS y se pueden organizar e importar como otras reglas de estilo.
Todas las características de SCSS, como las declaraciones de control (como @if, @for, @each, @ while) y las funciones integradas, se pueden utilizar en funciones.
Los parámetros de la función pueden ser cualquier tipo de datos SCSS, incluidos números, cadenas, colores, etc.

Tarea

Utilice SCSS para cambiar el tema blanco y negro de la 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>

esc


// 定义轻主题的样式变量
$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');
});

Compartir tecnología