Guía avanzada de Sass: escriba una hoja de estilo más elegante

Language 2023-01-29 19:57:15 views: null

Pensé que ya lo sabía. Básicamente, usé el sassestilo de escritura cuando escribía proyectos en la empresa antes, lo cual fue muy fluido. Hasta hace un tiempo, iba Element Plusa diseñar la estructura de ingeniería de mi propia biblioteca de componentes con referencia, cuando vi Element Plusesos usos elegantes sass, comencé a avergonzarme de mi superficialidad e ignorancia. Esto comenzó a estudiar sistemáticamente sassDurante este período, quise escribir un poco de aprendizaje y compartir muchas veces, pero todos terminaron sin problemas debido a varias cosas. Hoy, finalmente saqué un poco de tiempo de mi apretada agenda, justo a tiempo para compartir mi aliento con ustedes.

1. Introducción

Como csspreprocesador extremadamente maduro, sasstiene muchas funciones especiales que nos ayudan a escribir un código de estilo más elegante y conciso. Introdujo cssvariables de estilo antes y también admite funciones como anidamiento, funciones, mezcla y control de comandos, lo que amplía enormemente el estilo de juego.

sassHay dos formas de sintaxis: SCSSy Sass.

Entre ellos SCSS, es un formato muy utilizado en la actualidad, que solo se expande sobre la base gramatical CSS3de .SassCSS hacksvendor-specific syntax.scss

EsSass el formato gramatical más antiguo, utiliza sangría en lugar de llaves y líneas nuevas en lugar de punto y coma. El formato es particularmente conciso y la escritura es más conveniente. Este formato también es compatible con todas las funciones, pero usa una expresión diferente Sassen algunos lugares y su extensión de archivo se llama .SCSS.sass

Cualquiera de los formatos se puede importar (@importar) en un archivo de otro formato para su uso, y también se puede sass-convertconvertir a otro formato a través de una herramienta de línea de comandos.

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

No presentaré su Sassinstalación y uso aquí.Después de todo, la mayoría de los proyectos ahora se webpackempaquetan y construyen a través de otras herramientas de construcción, complementadas con las correspondientes y loaderotras herramientas para ayudar en la compilación. Debería haber muy pocos proyectos que necesiten usar sasscomandos en la línea de comandos para compilar archivos de estilo.

Sin embargo, vale la pena mencionar el formato de codificación . Al igual que con CSS, puede usar @hcarsetpara declarar un formato de codificación específico: insértelo al principio del archivo de estilo (en el primer carácter) @charset "encoding-name"y Sassel archivo se compilará de acuerdo con el formato de codificación dado. Por supuesto, el formato de codificación utilizado debe poder convertirse en un Unicodejuego de caracteres. SassEnvíe el archivo en UTF-8codificación y agregue una declaración al archivo de salida CSSsi aparecen caracteres que no son caracteres en el archivo compilado .ASCII@charset

2. Expansión de funciones básicas

1. Reglas anidadasNested Rules

SassAdmite CSSla incrustación de un conjunto de estilos en otro conjunto de CSSestilos, y el estilo interno utilizará el selector externo como selector principal.

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

Esto se Sasscompilaría de la siguiente manera CSS:

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

La función de anidamiento reduce en gran medida la cantidad de código, ya no tenemos que escribir repetidamente selectores de padres engorrosos y es fácil de administrar.

2. Selector principal &( Referencing Parent Selectors: &)

Al anidar, si necesita hacer referencia al selector principal, como al establecer un :hoverestilo para un elemento, o cuando bodyun elemento tiene un valor determinado classname, puede &usarse para hacer referencia al selector principal, es decir, su selector externo.

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

se Sasscompilará de la siguiente manera CSS:

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

&Debe ser el primer carácter de un selector, pero puede ir seguido de sufijos para generar selectores compuestos :

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

Esto se compilaría para:

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

3. Anidamiento de atributosNested Properties

Algunos CSSsiguen el mismo espacio de nombres ( namespace), por ejemplo, font-family, font-size, font-weightambos tienen fontespacios de nombres como atributos. En este momento, por simplicidad de escritura y administración conveniente, Sassse permite anidar atributos en espacios de nombres:

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

compila de la siguiente manera CSS:

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

Entre ellos, el espacio de nombres también puede contener sus propios valores de atributos:

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

compila a:

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

4. Selector de marcador de posición %foo( Placeholder Selectors: %foo)

Los selectores de marcador de posición son similares ida los selectores y classlos selectores, excepto que el símbolo es %, y deben @extendllamarse a través de instrucciones, de lo contrario, no participarán en Sassla compilación.

5. NotasComments

SassSe admiten tanto los comentarios de una sola línea como los comentarios de //varias líneas /* */. Los comentarios de varias líneas se envían por completo al CSSarchivo compilado . !Será el primer carácter de un comentario de varias líneas significa mantener este comentario en el modo de salida comprimido y enviarlo al archivo, que generalmente se usa para agregar información de derechos de autor. Las declaraciones de interpolación ( ) pueden generar valores variables en comentarios de varias líneas. (Usar para interpolación.)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. Ampliación de funciones avanzadas

1.SassScript

SassProporciona una SassScriptpotente función denominada , que se puede aplicar a cualquier atributo, lo que permite que los atributos utilicen funciones adicionales, como variables y operaciones aritméticas.

1.1Interactive Shell

Interactive ShellCaracterísticas que se pueden probar en la línea de comandos SassScript. Ingrese en la línea de comando sass -iy luego ingrese lo que desea probar para SassScriptver el resultado.

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

1.2 Variables$ Variables: $

Usar variables es muy simple:

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

Las variables tienen un alcance a nivel de bloque y las variables dentro de las reglas anidadas son variables locales que solo se pueden usar dentro de las reglas anidadas. Las variables globales se pueden utilizar en cualquier lugar. Agregar !globaluna declaración convierte una variable local en una variable global .

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

1.3 Tipos de datosData Types

SassScript7Se admiten los principales tipos de datos:

  • Números, con unidades, 1, 2, 3, 6, 10pxetc.;
  • cadena (se admiten tanto comillas como sin comillas), "foo", "bar", baz;
  • color, blue, #04a3f9, rgba(255,0,0,0.5)etc;
  • booleano, true, false;
  • NULO, null;
  • Array ( list), con espacios o comas como delimitadores, 1.5em 1em 0 2em, Helvetica, Arial, sans-serif;
  • maps, que es equivalente a JSdonde Object, (key1: value1, key2: value2).

Además, SassScripttambién se admiten otros CSSvalores de atributo , como Unicodejuegos de caracteres o !importantdeclaraciones, pero estos no se tratan de manera especial, sino que se tratan como cadenas sin comillas.

1.3.1 Cadenas

SassScriptSequoted strings admiten tanto cadenas entre comillas ( ) comounquoted strings cadenas sin comillas ( ) . Estas dos cadenas no se convertirán entre sí en el momento de la compilación, excepto en un caso: cuando se usa #{}( interpolation), la cadena entrecomillada se compilará en una cadena sin comillas, lo cual es conveniente mixinpara citar el nombre del selector en .

// 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)

Una matriz se refiere a Sasscómo manejar una serie de valores CSSen margin: 10px 15px 0 0o font-face: Helvetica, Arial, sans-serifseparados por espacios o comas. De hecho, los valores individuales también se tratan como matrices que contienen un solo valor.

La matriz en sí no tiene muchas funciones, pero Sass list functionstrae muchas funciones nuevas a la matriz: las nthfunciones pueden acceder directamente a un elemento de la matriz; las joinfunciones pueden conectar varias matrices juntas; appendlas funciones pueden agregar nuevos valores a la matriz; las @eachfunciones puede atravesar cada elemento de la matriz.

Los arreglos pueden contener sub-arreglos: Por ejemplo 1px 2px, 5px 6px, es contiene dos1px 2px arreglos de y . 5px 6pxSi las matrices interna y externa usan el mismo método de separación, debe usar paréntesis para envolver la capa interna, por ejemplo (1px 2px) (5px 6px). Los paréntesis no se conservarán durante la compilación, por lo que no importa de qué manera se escriban 1px 2px, 5px 6pxo (1px 2px) (5px 6px)el resultado final de la compilación sea el mismo, pero Sasstienen diferentes significados en el archivo, el primero significa una matriz que contiene cuatro valores y el último significa una matriz que contiene dos Se puede decir que los paréntesis enfatizan el concepto de "agrupamiento".

()Se utiliza para representar una matriz vacía y también puede representar un archivo vacío map. Las matrices vacías no se compilarán directamente CSS, y si hay matrices vacías o valores nulos en la matriz, se borrarán en el momento de la compilación. Como 1px 2px () 3pxo 1px 2px null 3px. Las matrices separadas por comas pueden conservar la coma final, que pretende enfatizar la relación estructural de la matriz, especialmente cuando es necesario declarar una matriz que contiene solo un valor. Por ejemplo (1,), representa 1una matriz que contiene solo .

1.3.3maps

mapes una colección de pares clave-valor, keyy valueambos pueden ser SassScriptobjetos arbitrarios. Tanto él como listambos operan con funciones. Por ejemplo, map-getlas funciones se pueden usar para buscar valores clave , las funciones se map-mergepueden usar para agregar nuevos pares clave-valor y las @eachdirectivas se pueden usar para agregar estilos a cada par clave-valor. mapSe puede usar en cualquier lugar donde se pueda usar list, pero no al revés. Cuando se mapusa listen funciones, se trata como key1 value1, key2 value2una matriz de la forma.

1.3.4 Color

Cualquier CSSexpresión de color devuelve un SassScriptvalor de color. unquoted stringsContiene una gran cantidad de colores con nombre (a menudo indistinguibles de las cadenas sin comillas ).

1.4 OperaciónOperations

Todos los tipos de datos admiten la operación de igualdad ==O !=, además, cada tipo de datos también tiene su propio método de operación.

1.4.1 Operaciones numéricasNumber Operations

SassScriptAdmite operaciones de suma, resta, multiplicación y división, así como operaciones de redondeo ( +, -, *, /, %), convirtiendo valores entre unidades cuando sea necesario. El operador relacional ( >, <, >=, <=) también se puede utilizar para operaciones numéricas.

// Sass
p {
  width: 1in + 8pt;
}
​
// 编译为：
p {
  width: 1.111in; 
}
  • operación de división/

Mención aparte merece la operación de división. Debido a que los /símbolos CSSgeneralmente juegan el papel de separar números en . En SassScript, /no solo para separar números, sino también para operaciones de división. /Se considera operación de división en los tres casos siguientes :

  • cuando el valor o parte de un valor es una variable o el valor de retorno de una función;
  • Cuando el valor está entre paréntesis;
  • Cuando el valor es parte de una expresión 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; 
}

Si necesita usar una variable y no quiere que /se use como operador de división, puede #{}ajustar la variable con:

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

// 编译为CSS
p {font: 12px/30px; 
}
1.4.2 Operación de valor de colorColor Operations

El funcionamiento del valor del color se calcula por tramos, es decir, R, G, Blos valores se calculan por separado.

p {
  color: #010203 + #040506;
}

Calculado en piezas 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09, luego compilado como:

p {
  color: #050709; 
}

se puede utilizar color functions, que es un poco más conveniente que los cálculos de color.

Los valores de color también se pueden combinar con operaciones numéricas:

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

Cabe señalar que si el valor del color contiene alpha channel, el valor del color involucrado en el cálculo debe tener el mismo alphavalor para realizar la operación, ya que la operación aritmética no actuará sobre el alphavalor.

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

El valor en el valor del color alphase puede ajustar a través de la función opacityo 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 Operaciones con cadenasString Operations

Utilice una +cadena de concatenación; +el valor de la izquierda domina si el resultado compilado final está entre comillas o sin comillas.

Cuando la expresión de operación se usa junto con otros valores, use espacios como conectores:

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

Puede #{}insertar valores dinámicos usando:

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

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

Compatibilidad con operaciones booleanas and, or, not.

1.4.5 Operación de matriz

Las matrices no admiten operaciones directas y solo list functionsse pueden manipular mediante.

1.5 paréntesis(Parentheses)

Los paréntesis se cuentan primero.

1.6 FuncionesFunctions

SassScriptHay muchas funciones integradas, algunas incluso se pueden CSSllamar usando declaraciones ordinarias:

p {
  color: hsl(0, 100%, 50%);
}
// 编译为：
p {
  color: #ff0000; 
}
  • argumentos de palabras claveKeyword Arguments

SassLas funciones permiten argumentos de palabras clave, el ejemplo anterior se puede escribir como:

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

SassHay muchas funciones integradas, por lo que no las expandiré aquí.

1.7 Declaraciones de interpolaciónInterpolation #{}

Las variables se #{}pueden usar en selectores o nombres de propiedades a través de:

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

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

SassScripten 1.8&

&Representa el selector principal. De la siguiente manera, &el valor de ((".foo.bar" ".baz.bang"), ".bip.qux").

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

Si no hay un selector principal, &el valor es null. Esto se puede aplicar mixinpara detectar si hay un selector principal:

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

1.9 Valor por defecto de la variable ( Variable Defaults):!default

La adición al final de una variable !defaultse puede utilizar para asignar un valor a !defaultuna variable a la que no se le ha asignado una declaración. nullLa asignación sólo funcionará si a la variable no se le ha asignado un valor o se le ha asignado un 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. @-Rulescon el comando ( Directives)

SassTodas CSS3 @-Rules, así como Sassdirectivas específicas ( directives), son compatibles.

2.1@import

SassFuncionalidad ampliada @importpara que sea posible importar .scssy .sassarchivar. Los archivos importados se fusionarán y compilarán en el mismo CSSarchivo. Además, las variables contenidas en el archivo importado pueden o mixinno estar disponibles en el archivo importado.

Generalmente, el archivo @importse encuentra Sasse importa, con las siguientes excepciones, que se tratan como CSSsintaxis normal:

  • La extensión del archivo es .css;
  • Los nombres de archivo http://comienzan con;
  • El nombre del archivo es url();
  • @importcontener media queries_

Se permite importar varios archivos a la vez. Cuando no se escribe ninguna extensión, intentará encontrar .scssel .sassarchivo con el mismo nombre.

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

Los archivos de importación también pueden usar sentencias de interpolación #{}, pero solo para CSSel url()método de importación.

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

@importsTambién hay dos usos especiales: parciales y anidamiento .

  • Diafragma ( Partials)

A veces, desea importar Sassun archivo, pero no quiere compilarlo como CSS, puede agregar un guión bajo antes del nombre del archivo, lo que le indicará Sassque no lo compile. Tenga en cuenta que el guión bajo no es necesario en la declaración de importación. Por ejemplo, si el nombre del archivo es _colors.scss, el siguiente código importa el _colors.scssarchivo y no se compilará como CSS.

@import "colors";

Cabe señalar que si hay archivos con el mismo nombre que contienen guiones bajos al principio y archivos que no contienen guiones bajos al principio, los archivos que agregan guiones bajos se ignorarán.

  • anidando@import

En la mayoría de los escenarios, lo usamos en el nivel superior del archivo @imports. De hecho, el anidamiento también se puede @importsanidar en CSSestilos o @media. La diferencia de usarlo en la capa superior es que el estilo importado de esta manera solo puede aparecer en la capa anidada, lo que se puede entender como "alcance local".

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

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

eventualmente será compilado a:

#main .example {
  color: red;
}

Sin embargo, debe tenerse en cuenta que no debe haber instrucciones de nivel superior como , etc. @importen los archivos importados por este formulario anidado .@mixin@charset

2.2@media

Sasses el @mediamismo CSSque en , con la adición de nuevas características:

  • Se permite CSSanidar dentro de las reglas. Cuando @mediaestá anidado en CSSuna regla, cuando se compila, se compilará en la capa más externa del archivo y contiene el selector principal cuando estaba anidado antes, lo cual es muy conveniente.
// Sass
.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;}
}
​
// 编译为
.sidebar {
  width: 300px; 
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } 
}
  • @mediaSe permite el anidamiento queries, que se agrega automáticamente en tiempo de compilación and.
@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
  }}
}
​
// 编译为
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } 
}
  • Puede usar SassScript(variable, función, etc.) en lugar del nombre o valor de la condición.
$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

  • @extendSe puede hacer que un selector herede el estilo de otro selector a través de .
.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 Selectorsselector de marcador de posición

A veces, es necesario definir un conjunto de estilos para la herencia, no para un determinado elemento, y esperamos que no se Sasscompile y genere por separado. Este tipo de escena ocurre con más frecuencia cuando se crea una Sassbiblioteca de estilos. Así nació el selector de marcador de posición. Su uso es casi idéntico ida selector o classselectora, la notación selectora es %. Cuando se usan solos, los selectores de marcador de posición se Sassignoran y no se compilan en el archivo de salida.

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

Debe @extendser utilizado por:

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

Usando !optionaldeclaraciones, es posible @extendno generar nuevos selectores.

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

Para evitar generar mucho código inútil, extienda ( @extend) en la instrucción y limite la extensión a selectores en el mismo nivel de instrucción.

@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-rootdirectivas para elevar los selectores seleccionados al nivel más externo.

.parent {...
  @at-root .child { ... }
}
​
// 编译为
.parent { ... }
.child { ... }
  • Puede ser una estructura a nivel de bloque que contenga múltiples selectores.
.parent {...
  @at-root {
    .child1 { ... }
    .child2 { ... }}
  .step-child { ... }
}
​
// 编译为
.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }
  • Use with:xxx yyy ...o without:xxx yyy ...para asegurarse de que la directiva externa sea válida para el selector promovido a la capa más 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 controlControl Derectives

Las directivas de control se utilizan para hacer referencia a estilos bajo ciertas condiciones.

3.1if()

La iffunción integrada se puede utilizar en cualquier SassScriptcontexto de secuencias de comandos.

3.2@if

@ifLa condición se cumple cuando el valor de retorno de la expresión de la instrucción no es falseo null. @else ifSe puede conectar más tarde @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 directiva tiene dos formatos: @for $var from <start> through <end>, o @for $var from <start> to <end>. Ambos contienen el punto de partida <start>, la diferencia es que tono contiene <end>, sino que throughcontiene <end>. Además, $varpuede ser cualquier variable, pero <start>y <end>debe ser un número entero.

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

3.4@each

@eachFormato de 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'); }
  • Se pueden aplicar múltiples variables al mismo tiempo , lo cual es útil cuando se escriben estilos que tienen formas similares pero 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; }
  • Dado mapsque se tratará como una matriz lists, @eachtambién semap puede usar :
@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

whileCirculación, entiendo.

$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 mixtos ( Mixin Directives)

mixinSe utiliza para definir estilos reutilizables.

4.1 Definición de instrucciones mixtas @minin( Defining a Mixin: @mixin)

Después @mixinde agregar el nombre y el estilo, puede definir la instrucción mixta. Tenga en cuenta que debe incluir selectores y atributos, y también puede usar &para referirse al selector principal.

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

4.2 Instrucciones mixtas de referencia @include( Including a Mixin: @include)

  • Úselo @include MixinNamepara citar una directiva mixin:
.page-title {
  // 引用混合指令，将 clearfix 中的规则混入到 .page-title 中
  @include clearfix;
  padding: 4px;
  margin-top: 10px;
}
  • También se puede hacer referencia directamente y mezclarlo en el nivel más externo, sin definir atributos y sin tener un selector principal al que hacer referencia:
@mixin silly-links {
  a {
    color: blue;
    background-color: red;}
}
@include silly-links;
​
//编译为
a {
  color: blue;
  background-color: red; }

En las directivas mixin que escribimos, es mejor definir solo selectores descendientes, para que puedan importarse de manera segura en cualquier parte del archivo.

  • Una directiva compuesta puede hacer referencia a otras directivas compuestas:
@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)

Los parámetros se pueden usar para establecer variables para el estilo de comandos mixtos y asignar valores. Al hacer referencia y definir instrucciones mixtas, el orden de los parámetros debe tener una correspondencia uno a uno, y se pueden asignar valores predeterminados a los parámetros.

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

Además, hay dos puntos más importantes sobre los parámetros:

  • Parámetro de palabra clave ( Keyword Arguments): al Mixinpasar un parámetro por referencia, pase el valor precisamente especificando la palabra clave del parámetro (nombre del parámetro).
p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); }

Aunque la escritura es un poco engorrosa, es fácil de leer y se puede asignar con precisión.

  • Variable de parámetro ( Variable Arguments): cuando no está seguro de cuántos parámetros necesita el comando mixto, puede usar la variable de parámetro al final del parámetro ...para declarar, y Sassestos parámetros se tratarán como una 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;
}

También puede usar variables de parámetros al 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 contenido en el comando mixto @content( Passing Content Blocks to a Mixin)

Al citar Mixin, especialmente cuando se cita en la capa más externa del archivo, puede usar @contentmarcadores de posición y luego @includeimportar el siguiente contenido a @contentla posición, similar a plantillas, espacios, 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);
}

Debido a su uso frecuente Mixinen Sassbibliotecas de estilos. Para simplificar el uso, puede ser =expresado @mixinpor y +expresado por @include.

// Sass (这里就是Sass格式的语法了，而非SCSS格式)
=apply-to-ie6-only* html
    @content
​
+apply-to-ie6-only
  #logo
    background-image: url(/logo.gif)
  • Contenido a nivel de bloque y alcance variable : al @contentimportar contenido a nivel de bloque, su alcance se asocia con el contexto donde se define, y no tiene nada que ver con el alcance dentro de la instrucción mixta.
$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;
}

Tenga en cuenta que no todas las definiciones están en el ámbito global, y también es posible que la definición esté anidada en un selector, y luego el ámbito sea el ámbito local del selector.

5. Instrucción de función ( Function Directives)

SassPermite funciones personalizadas, las funciones se pueden usar en cualquier valor de atributo o SassScript. Los nombres de las funciones personalizadas pueden tener un prefijo para evitar conflictos de nombres.

$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 salida

6.1:nested

Anidado ( :nested) es sassel formato de salida predeterminado de , que refleja claramente la CSSrelación HTMLentre y . Los selectores y los atributos ocupan una línea aparte, y la sangría es sasscoherente con la del archivo, basándose en la sangría para reflejar el nivel de anidamiento.

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

6.2:expanded

El formato de expansión ( :expanded) es el mismo que cuando se escribe a mano y el selector no tiene sangría.

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

6.3:compact

El formato compacto ( Compact) ocupa menos espacio, cada CSSregla ocupa solo una línea, los selectores anidados no dejan líneas en blanco y los selectores no anidados dejan líneas en blanco entre ellos.

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

6.4:compressed

El formato comprimido ( Compressed) no deja líneas en blanco, espacios, comentarios, etc., y el volumen de salida es el más pequeño.

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

Por fin

Se prepara un paquete de información inicial para todos. Contiene 54, 2.57G e-books relacionados con front-end, "Colección de entrevistas de front-end (con respuestas y análisis)", tutoriales en video de conocimientos clave y difíciles (juego completo).



Amigos necesitados, puede hacer clic en la tarjeta a continuación para recibir y compartir gratis

Supongo que te gusta

Origin blog.csdn.net/web22050702/article/details/128664031
Recomendado
Clasificación
Diario
Más
2025-02-04(0)
2025-02-03(0)
2025-02-02(0)
2025-02-01(0)
2025-01-31(0)
2025-01-30(0)
2025-01-29(0)
2025-01-28(0)
2025-01-27(0)
2025-01-26(0)

Code World

© 2018 codetd.com