En Sass, podemos usar "@for" para lograr la operación de bucle

CSS, Sass, Scss y la diferencia entre sass y scss

CSS se refiere a hojas de estilo en cascada

Sass (Syntactically Awesome StyleSheets), es un lenguaje de preprocesamiento CSS escrito por el lenguaje buby. Tiene un estilo de sangría estricto como html. Es muy diferente de la especificación de escritura CSS. No utiliza corchetes ni punto y coma. Por lo tanto, no es ampliamente aceptado. Sass es una herramienta auxiliar para fortalecer CSS, que es una extensión de CSS. Agrega variables, reglas anidadas, mixins, extend e inline en base a la sintaxis CSS. Importaciones) y otras características avanzadas, estas extensiones hacen que CSS sea más potente y elegante. El uso de las bibliotecas de estilos Sass y Sass (como Compass) ayuda a organizar y administrar mejor los archivos de estilo y a desarrollar proyectos de manera más eficiente. El sufijo es .sass.

SCSS (Sassy CSS), un lenguaje de preprocesamiento de CSS. SCSS es una nueva sintaxis introducida por Sass 3. Su sintaxis es totalmente compatible con CSS3 y hereda las potentes funciones de Sass. En otras palabras, cualquier hoja de estilo CSS3 estándar es un archivo SCSS válido con la misma semántica. SCSS requiere el uso de punto y coma y llaves en lugar de saltos de línea y sangría. SCSS no es sensible a los símbolos en blanco, de hecho, tiene la misma sintaxis que css3 y su nombre de sufijo es .scss.

 

La relación entre sass y scss

sass和scss其实是一样的css预处理语言，SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.scss两种。 SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。 两者是有不同的，继sass之后scss的编写规范基本和css一致，sass时代是有严格的缩进规范并且没有‘{}’和‘；’。 而scss则和css的规范是一致的。

Insertar archivo

@import "foo.scss"; // importará el archivo foo.scss 
 @import "foo"; // importará el archivo foo.scss 
 @import "http://foo.com/bar"; // inserte un archivo externo 
 @ import "foo.css"; // Equivalente al comando de importación de css.

 

Mezclador (evite repetir un patrón repetidamente)

// Use el comando @mixin para definir un bloque de código. 
　　@mixin left { 
　　　　float : left ; 
　　　　margin-left : 10px ; 
　　} 
    // Use el comando @include para llamar a este mixin. 
　　div { 
　　　　@include left;
　　 } 
　　
　　// El poder de la combinación es que puede especificar parámetros y valores predeterminados. 
　　@mixin left ($ value: 10px) { 
　　    float : left ; 
　　    margin-right : $ value ; 
　　} 
    // Cuando lo use, agregue los parámetros según sea necesario: 
　　div { 
　　　　@include left (20px);
　　 }

En Sass, podemos usar "@for" para implementar una operación de bucle. Entre ellos, el bucle @for en Sass tiene 2 formas.

方式1：@for $i from 开始值 through 结束值

方式2：@for $i from 开始值 to 结束值

 

 

@para $ i del 1 al 3
 { 
    .item - # {$ i } 
    { 
        ancho : (20px * $ i) ; 
    } 
}

El código CSS compilado es el siguiente:

.item-1
 { 
    ancho : 20px ; 
} 
.item-2
 { 
    ancho : 40px ; 
} 
.item-3
 { 
    ancho : 60px ; 
}

 

Análisis:

Si cambia "@for $ i de 1 a 3" a "@for $ i de 1 a 3", el código CSS compilado es el siguiente:

.item-1
 { 
    ancho : 20px ; 
} 
.item-2
 { 
    ancho : 40px ; 
}

Ejemplo 2

@para $ i del 1 al 3
 { 
    .border - # {$ i } 
    { 
        border : # {$ i } px rojo sólido; 
    } 
}

El código CSS compilado es el siguiente:

border-1
 { 
    border : 1px rojo sólido ; 
} 
 
.border-2
 { 
    borde : 2px rojo sólido ; 
} 
 
.border-3
 { 
    borde : 3px rojo sólido ; 
}