Sass Es PDF

sass
#sass
Tabla de contenido
Acerca de 1
Capítulo 1: Empezando con sass 2
Observaciones 2
Versiones 2
Examples 2
Preparar 2
Herramientas de línea de comandos 2
Aplicaciones GUI 3
Variables 3
Importador 3
Anidamiento 4
Comentarios 5
Capítulo 2: Actualizar la versión de Sass 6
Introducción 6
Examples 6
Windows 6
Linux 6
Capítulo 3: Anidamiento 7
Examples 7
Nido basico 7
Profundidad de nidificación 7
Problemas 8
Especificidad 8
Reusabilidad 8
¿Qué tan profundo debe anidar? 9
Anidando con @ at-root 9
El selector padre (&) 10
Estados y pseudo-elementos. 11
Propiedades de anidación 12
Capítulo 4: Bucles y Conditones 14

Examples 14
Mientras bucle 14
en bucle 14
Directiva condicional (si) 15
Cada bucle 16
Asignación múltiple 16
Cada bucle con mapas / valores de lista 17
Capítulo 5: Compass CSS3 Mixins 18
Introducción 18
Examples 18
Establecer entorno 18
Instalación utilizando Ruby 18
Crear un proyecto 18
Usar brújula 18
Usando CSS3 con brújula 19
Radio de la frontera 19
Ejemplo de Flexbox 19
Conclusión 20
Capítulo 6: Convertir unidades 21
Examples 21
Convertir px a (r) em 21
Capítulo 7: Extender / Herencia 22
Sintaxis 22
Parámetros 22
Observaciones 22
Examples 22
Extender una clase 22
Extenderse de clases múltiples 22
El encadenamiento se extiende 23
Opcional Extiende 24
Placeholders 24
Extendiendo al padre 25
Capítulo 8: Funciones 26
Sintaxis 26
Examples 26
Funciones básicas 26
Capítulo 9: Instalación 27
Observaciones 27
Examples 27
Mac 27
Linux 27
Windows 27
Capítulo 10: Los operadores 28
Examples 28
Operador de Asignación 28
Operadores aritméticos 28
Operadores de comparación 29
Capítulo 11: Mixins 30
Sintaxis 30
Examples 30
Crea y utiliza un mixin. 30
Mixin con argumento variable. 30
Incumplimientos sensuales 31
Argumentos opcionales 32
directiva @content 32
Capítulo 12: Partiales e Importaciones 34
Examples 34
Importador 34
Ejemplo 34
Principales beneficios 35
Parciales 35
Ejemplo 35
Capítulo 13: Scss utiles mixins 36

Examples 36
Flechas de puntero css3 puro con borde de contorno 36
Ejemplo de puntero de información sobre herramientas 37
Capítulo 14: SCSS vs Sass 38
Examples 38
Principales diferencias 38
Sintaxis 38
SCSS: 38
HABLAR CON DESCARO A: 38
Mixins 39
Definiendo un mixin 39
Incluyendo una mezcla 39
Mapas 39
Comentarios 40
Comentario de una sola línea 40
Comentario multilínea 40
Comparación entre SCSS y SASS 41
para sintaxis de bucle 42
Capítulo 15: Variables 44
Sintaxis 44
Examples 44
Hablar con descaro a 44
SCSS 44
Alcance variable 45
Localizar variables con la directiva @ at-root 45
Interpolación 46
Variables en SCSS 46
Creditos 48
Acerca de
You can share this PDF with anyone you feel could benefit from it, downloaded the latest version
from: sass
It is an unofficial and free sass ebook created for educational purposes. All the content is extracted
from Stack Overflow Documentation, which is written by many hardworking individuals at Stack
Overflow. It is neither affiliated with Stack Overflow nor official sass.
The content is released under Creative Commons BY-SA, and the list of contributors to each
chapter are provided in the credits section at the end of this book. Images may be copyright of
their respective owners unless otherwise specified. All trademarks and registered trademarks are
the property of their respective company owners.
Use the content presented in this book at your own risk; it is not guaranteed to be correct nor
accurate, please send your feedback and corrections to info@zzzprojects.com
https://riptutorial.com/es/home 1
Capítulo 1: Empezando con sass
Observaciones
Esta sección proporciona una descripción general de qué es sass y por qué un desarrollador
puede querer usarlo.
También debe mencionar cualquier tema grande dentro de sass, y vincular a los temas
relacionados. Dado que la Documentación para sass es nueva, es posible que deba crear
versiones iniciales de esos temas relacionados.
¿Por qué SASS?
• Característica de herencia
• Podemos usar sentencias condicionales.
• Más funcional que el CSS tradicional.
• Manera eficiente y clara de escribir CSS
Versiones
Versión Fecha de lanzamiento
3.4.22 (Actual) 2016-03-28
3.4.0 2014-08-18
3.3.0 2014-03-07
3.2.0 2012-08-10
Examples
Preparar
Cuando se trata de usar SASS, hay varias formas de configurar su área de trabajo. Algunas
personas prefieren usar herramientas de línea de comandos (probablemente personas de Linux)
y otras prefieren usar aplicaciones GUI. Voy a cubrir ambos.
Herramientas de línea de comandos

La página 'Instalar SASS' en sass-lang.com cubre esto bastante bien. Puede usar SASS con Ruby
(que se puede instalar desde un administrador de paquetes de Linux o puede descargar el
instalador en Windows). macOS viene con Ruby preinstalado.
Una vez que hayas instalado Ruby, debes instalar SASS (en algunos casos, puede que no sea
necesario sudo ):
sudo gem install sass
Finalmente, puedes verificar que has instalado SASS con sass -v .
Aplicaciones GUI
Si bien hay varias aplicaciones GUI que puedes usar, te recomiendo la aplicación Scout .
Construye y comprime automáticamente sus archivos CSS, guardando archivos y es compatible
con macOS, Windows y Linux.
Variables
Si tiene un valor que usa con frecuencia, puede almacenarlo en una variable. Podría usar esto
para definir esquemas de color, por ejemplo. Solo tendría que definir su esquema una vez y luego
podría usarlo a lo largo de sus hojas de estilo.
Para definir una variable, debe prefijar su nombre con el símbolo $. (Como lo harías en PHP).
Puede almacenar cualquier valor de propiedad CSS válido dentro de una variable. Tales como
colores, fuentes o URLs.
Ejemplo 1:
$foreground: #FAFAFA;
$background: rgb(0, 0, 0);
body {
color: $foreground;
background-color: $background;
}
p {
color: rgb(25, 25, 20);
background-color: $background;
}
Importador
Supongamos el siguiente escenario: Tiene dos hojas de estilo: _variables.scss y layout.scss .

Lógicamente, mantienes todas tus variables dentro de tu hoja de estilo variable pero quieres
acceder a ellas desde tu hoja de estilo de diseño.
NOTA: Es posible que observe que las variables hoja de estilo tienen un guión bajo
('_') antes de su nombre. Esto se debe a que es parcial, lo que significa que se va a
importar.
sass-lang.com dice lo siguiente acerca de los parciales: Puedes crear archivos
parciales de Sass que contienen pequeños fragmentos de CSS que puedes incluir en
otros archivos de Sass. Esta es una excelente manera de modularizar su CSS y
ayudar a mantener las cosas más fáciles de mantener. [...] El subrayado le permite a
Sass saber que el archivo es solo un archivo parcial y que no se debe generar en un
archivo CSS. Los parciales de Sass se utilizan con la directiva @import.
Las variables SCSS son geniales para este escenario. Supongamos que su _variables.scss ve
así:
$primary-color: #333;
Puede importarlo con @import y luego el nombre de la hoja de estilo entre comillas. Su hoja de
estilo de diseño ahora puede verse así (tome nota de que no hay un guión bajo o una extensión
de archivo en la importación):
@import 'variables';
body {
color: $primary-color;
}
Esto daría como resultado algo como lo siguiente:
body {
color: #333;
}
Anidamiento
layout.scss
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
margin: 0 5px;
}
}
}
salida
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
Comentarios
SASS soporta dos tipos de comentarios:
• Comentarios en línea: estos solo abarcan una línea y generalmente se usan para describir
una variable o bloque. La sintaxis es la siguiente: // Your comment here (usted lo añade con
una doble barra ( // ) y el analizador ignora el resto de la línea).
• Comentarios multilínea: abarcan varias líneas y generalmente se usan para mostrar

derechos de autor o licencia en la parte superior de un documento. Puede abrir un bloque
de comentarios multilínea con /* y puede cerrar un bloque de comentarios multilínea con */
. Aquí hay un ejemplo:
/*
This is a comment
It's a multiline comment
Also a hiaku
*/
Lea Empezando con sass en línea: https://riptutorial.com/es/sass/topic/2045/empezando-con-sass
Capítulo 2: Actualizar la versión de Sass
Introducción
Actualiza tu versión de Sass usando gem / ruby
Examples
Windows
Puedes verificar la versión de Sass usando sass -v
Actualizar todas las gemas ruby gem update
Actualizar solo Sass gem update sass
Linux
Puedes verificar la versión de Sass usando sass -v
Actualizar todas las gemas ruby sudo gem update
Actualizar solo Sass sudo gem update sass
Lea Actualizar la versión de Sass en línea: https://riptutorial.com/es/sass/topic/10599/actualizar-la-

version-de-sass
Capítulo 3: Anidamiento
Examples
Nido basico
Cada vez que declara una nueva regla dentro de otra regla, se denomina anidar. Con el
anidamiento básico, como se muestra a continuación, el selector anidado se compilará como un
nuevo selector de CSS con todos sus padres precedidos, separados por un espacio.
// SCSS
.parent {
margin: 1rem;
.child {
float: left;
}
}
// CSS output
.parent {
margin: 1rem;
}
.parent .child {
float: left;
}
Profundidad de nidificación
La anidación es una característica muy poderosa, pero debe usarse con precaución. Puede
suceder con bastante facilidad y rapidez, que empiece a anidar y continúe incluyendo a todos los
niños en un nido, de un nido, de un nido. Déjame demostrar:
// SCSS
header {
// [css-rules]
.holder {
// [css-rules]
.dropdown-list {
// [css-rules]
ul {
// [css-rules]
li {
margin: 1rem 0 0 1rem;
}
}
}
}
}
// CSS output of the last rule

header .holder .dropdown-list ul li {
margin: 1rem 0 0 1rem;
}
Problemas
Especificidad
El li del ejemplo anterior tiene un margin establecido. Digamos que queremos anular esto más
adelante en una consulta de medios.
@media (max-width: 480) {
// will not work

.dropdown-list ul li {
margin: 0;
}
// will work
header .holder .dropdown-list ul li {
margin: 0;
}
}
Por lo tanto, al anidar demasiado profundamente, tendrá que anidar de nuevo cada vez que
desee sobrescribir un determinado valor. Peor aún, aquí es a menudo donde la regla es
!important de usar.
@media (max-width: 480) {
// BIG NO-NO, don't do this

.dropdown-list ul li {
margin: 0 !important;
}
¿Por qué es la !important -rule es una mala idea
Debería escribir su SCSS de una buena manera que estas soluciones no son necesarias en
primer lugar. !important Usar !important en un tema tan menor ya te llevará por un agujero de
conejo!
Reusabilidad
Esto es bastante similar al problema de especificidad, pero vale la pena señalarlo por separado.
Si diseña algo como un botón o incluso un menú desplegable, es posible que desee reutilizar
esos estilos en otro lugar de su página.
Al anidar demasiado profundamente, sus estilos solo están vinculados a los elementos que se
encuentran dentro del elemento más externo (el elemento en la parte superior de su SCSS). Esto
te lleva a copiar estilos y pegarlos de nuevo en otro lugar. Posiblemente en otra regla anidada.
Sus hojas de estilo serán cada vez más grandes y más difíciles de mantener.
¿Qué tan profundo debe anidar?

La mayoría de las guías de estilo establecen la profundidad máxima en 2. Este es un buen
consejo en general, ya que hay muy pocas ocasiones en las que querrá anidar más
profundamente. La mayoría de las veces, 2 es suficiente.
Anidando con @ at-root
El agrupamiento probablemente se usa con más frecuencia para crear selectores más
específicos, pero también se puede usar simplemente para la organización de códigos. Usando la
directiva @at-root , puede 'saltar' desde donde la anida en su Sass, devolviéndolo al nivel
superior. Hacer esto le permite mantener los estilos agrupados sin crear más especificidad de la
que necesita.
Por ejemplo, podrías hacer algo como esto:
.item {
color: #333;
@at-root {
.item-wrapper {
color: #666;
img {
width: 100%;
}
}
}
.item-child {
background-color: #555;
}
}
Eso compilaría a esto:
.item {
color: #333;
}
.item-wrapper {
color: #666;
}
.item-wrapper img {
width: 100%;
}
.item .item-child {
background-color: #555;
}
Al hacer esto, todos nuestros estilos relacionados con la clase .item están juntos en el SCSS,
pero no necesariamente necesitamos esa clase en cada selector.
Excluyendo contextos
Por defecto, las declaraciones dentro de @at-root aparecerán en cualquier contexto. Esto significa
que las reglas dentro de un bloque @media , por ejemplo, permanecerán allí.
@media print {
.item-wrapper {
@at-root {
.item {
background: white;
}
}
}
}
// Will compile to
@media print {
.item {
background: white;
}
}
Este no es siempre el comportamiento deseado, por lo que puede excluir el contexto de los
medios, pasando los media a la opción without de la directiva @at-root .
@at-root (without: media) {..
Para más información, consulte la documentación oficial.
El selector padre (&)
El agrupamiento es ideal para mantener juntos los selectores relacionados para facilitar que los
futuros desarrolladores entiendan su código. El selector principal, representado por un signo ("&")
puede ayudar a hacerlo en situaciones más complejas. Hay varias formas en que se puede
utilizar.
Cree un nuevo selector que requiera tanto el selector principal como otro en el mismo elemento
colocando el nuevo selector directamente después de un selector principal.
// SCSS
.parent {
&.skin {
background: pink;
}
}
// CSS output
.parent.skin {
background: pink;
}
Haga que el padre aparezca después de un selector anidado en el CSS compilado colocando el
selector padre después del selector anidado.
// SCSS
.parent {
.wrapper & {
border: 1px solid black;
}
}
// CSS output
.wrapper .parent {
}
Estados y pseudo-elementos.
Además de usar el agrupamiento para clases e hijos, el agrupamiento con el selector principal
también se usa comúnmente para combinar los estados de :active :hover y :focus para enlaces.
// SCSS
a {
color: blue;
&:active,
&:focus {
color: red;
}
&:visited {
color: purple;
}
}
// CSS output
a {
color: blue;
}
a:active,
a:focus {
color: red;
}
a:visited {
color: purple;
}
De forma similar, puede diseñar pseudo-elementos anidando con el selector principal.
// SCSS
.parent {
&::after {
display: table;
clear: both;
content: '';
}
&::only-child {
font-weight: bold;
}
}
// CSS output
.parent::after {
display: table;
clear: both;
content: '';
}
.parent::only-child {
font-weight: bold;
}
Propiedades de anidación
Algunas propiedades de CSS pertenecen a un espacio de nombres, por ejemplo border-right

pertenece al espacio de nombres de border . Para escribir menos, podemos utilizar el anidamiento
de propiedades y omitir estos prefijos, incluso en múltiples niveles.
Si necesitáramos crear un borde a la derecha e izquierda de una clase llamada .borders ,

podríamos escribir esto:
//SCSS
.borders {
border: 2px dashed blue;
border: {
left: 1px solid black;
right: 1px solid red;
}
}
// CSS output
.borders {
border-left: 1px solid black;
border-right: 1px solid red;
}
Esto nos ahorra tener que escribir el border-right y el border-left , sin embargo, todavía estamos
escribiendo código repetitivo con las líneas 1px solid black y 1px solid red . Podemos escribir aún
menos CSS repetitivo con el siguiente:
// SCSS
.borders {
border: 2px dashed blue {
left: 1px solid black;
right: {
color: red;
}
}
}
// CSS output
.borders {
border-left: 1px solid black;
border-right-color: red;
}
Lea Anidamiento en línea: https://riptutorial.com/es/sass/topic/2178/anidamiento
Capítulo 4: Bucles y Conditones
Examples
Mientras bucle
La directiva @while se @while sobre un bloque de código hasta que la condición especificada se
vuelva falsa. En el siguiente ejemplo, este bucle se ejecutará hasta que $font-size <= 18 aumente
el valor de $font-size en 2.
$font-size: 12;
@while $font-size <= 18 {

.font-size-#{$font-size} {
font-size: ($font-size * 1px);
}
$font-size: $font-size + 2;
}
Salida del código anterior
.font-size-12 {
font-size: 12px;
}
.font-size-14 {
font-size: 14px;
}
.font-size-16 {
font-size: 16px;
}
.font-size-18 {
font-size: 18px;
}
en bucle
La directiva @for permite recorrer algunos códigos para una cantidad determinada de iteraciones y
tiene dos formas:
• @for <var> from <start> through <end> {}

• @for <var> from <start> to <end> {}
La diferencia en las dos formas es el a través y el a ; la palabra clave a través incluirá la <end> en
el bucle de dónde no; usar a través de es equivalente a usar >= o <= en otros idiomas, como C ++,
JavaScript o PHP.
Notas
• Tanto <start> como <end> deben ser enteros o funciones que devuelvan enteros.
• Cuando <start> es mayor que <end> el contador disminuirá en lugar de incrementarse.
Ejemplo de SCSS
@for $i from 1 through 3 {

.foo-#{$i} { width: 10px * $i; }
}
// CSS output
.foo-1 { width: 10px; }
Directiva condicional (si)
La directiva de control @if evalúa una expresión dada y si devuelve algo que no sea false ,
procesa su bloque de estilos.
Ejemplo de Sass
$test-variable: true !default
=test-mixin
@if $test-variable
display: block
@else
display: none
.test-selector
+test-mixin
Ejemplo de SCSS
$test-variable: true !default
@mixin test-mixin() {
@if $test-variable {
display: block;
} @else {
display: none;
}
}
.test-selector {
@include test-mixin();
}
Los ejemplos anteriores producen el siguiente CSS:
.test-selector {
display: block;
}
Cada bucle
La directiva @each le permite iterar a través de cualquier lista o mapa. Toma la forma de @each
$var or <list or map> {} donde $var puede ser cualquier nombre de variable y <list or map>
puede ser cualquier cosa que devuelva una lista o mapa.
En el siguiente ejemplo, el bucle recorrerá la lista de $authors asignando cada elemento a $author
, procesará su bloque de estilos utilizando ese valor de $author y continuará con el siguiente
elemento de la lista.
Ejemplo de SCSS
$authors: "adam", "steve", "john";

@each $author in $authors {
.photo-#{$author} {
background: image-url("avatars/#{$author}.png") no-repeat
}
}
Salida CSS
.photo-adam {
background: image-url("avatars/adam.png") no-repeat;
}
.photo-steve {
background: image-url("avatars/steve.png") no-repeat;
}
.photo-john {
background: image-url("avatars/john.png") no-repeat;
}
Asignación múltiple
La asignación múltiple le permite acceder fácilmente a todas las variables declarando múltiples
variables en la directiva @each .
Listas anidadas
Para tener un acceso fácil a todos los elementos anidados, puede declarar variables separadas
para que coincidan con cada elemento anidado. Asegúrese de tener la cantidad correcta de
variables y elementos anidados. En el siguiente ejemplo, cada bucle está iterando a través de una
lista de tres elementos, cada uno de los cuales contiene tres elementos anidados. Tener la
cantidad incorrecta de variables declaradas dará lugar a un error del compilador.
@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;
}
}
Mapas
La asignación múltiple también funciona para Mapas, pero está limitada a solo dos variables, una
variable para acceder a la clave y una variable para acceder al valor. Los nombres $key y $value
son arbitrarios en el siguiente ejemplo:
@each $key, $value in ('first': 1, 'second': 2, 'third': 3) {

.order-#{$key} {
order: $value;
}
}
Cada bucle con mapas / valores de lista
En el siguiente ejemplo, el valor en map $color-array se trata como una lista de pares.
Entrada SCSS
$color-array:(
black: #4e4e4e,
blue: #0099cc,
green: #2ebc78
);
@each $color-name, $color-value in $color-array {
.bg-#{$color-name} {
background: $color-value;
}
}
Salida CSS
.bg-black {
background: #4e4e4e;
}
.bg-blue {
background: #0099cc;
}
.bg-green {
background: #2ebc78;
}
Lea Bucles y Conditones en línea: https://riptutorial.com/es/sass/topic/2671/bucles-y-conditones
Capítulo 5: Compass CSS3 Mixins
Introducción
Guía de introducción utilizando Sass exentsion Compass. Compass es muy útil cuando se trata
de CSS3, ya que proporciona combinaciones para escribir 1 línea con el fin de admitir todos los
navegadores que utilizan las características de CSS3. También es genial incluir imágenes de
sprites.
Examples
Establecer entorno
Abre tu línea de comando
Instalación utilizando Ruby
gem update --system
gem install compass
Crear un proyecto
compass create <myproject>
Esto inicializará un proyecto de brújula. Se agregará una carpeta llamada. La carpeta se verá
como si tuviera la siguiente estructura:
Archivo / Carpeta descripción
hablar con descaro

Pon tus archivos sass / scss en esta carpeta
a/
hojas de estilo / En esta carpeta se almacenará tu css compilado.
Configure la brújula, por ejemplo, la ruta de la carpeta, la compilación

config.rb
de sass
Usar brújula
compass watch
Esto compilará tus archivos sass cada vez que los cambies. La ruta de la carpeta sass se puede
cambiar dentro de config.rb
Usando CSS3 con brújula
Puede encontrar una referencia completa de qué componentes CSS3 son compatibles en esta
página
Para utilizar CSS3 en su proyecto, Compass proporciona combinaciones para soportar las
características de CSS3 en cada navegador. En la parte superior de su archivo Sass / Scss, debe
especificar que desea utilizar una brújula
@import "compass/css3";
Radio de la frontera
Incluya radio de borde con brújula en su archivo sass:
div {
@include border-radius(4px);
}
Salida CSS
div {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
Como puedes ver puedes usar el nombre normal de CSS. Simplemente ponga @include delante
de él y use () para establecer su valor.
Ejemplo de Flexbox
.row {
@include display-flex;
@include flex-direction(row);
}
Salida CSS
.row {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
Conclusión
Estos son solo dos ejemplos. Compass proporciona mucho más mixins CSS3. Es muy útil utilizar
Compass y no tiene que preocuparse por haber olvidado la definición de un componente CSS3
para un navegador específico. Si el navegador admite la función CSS3, la brújula lo definirá por
usted.
Lea Compass CSS3 Mixins en línea: https://riptutorial.com/es/sass/topic/10600/compass-css3-

mixins
Capítulo 6: Convertir unidades
Examples
Convertir px a (r) em
Para convertir px en em o rem puede usar la siguiente función:
@function rem-calc($size, $font-size : $font-size) {

$font-size: $font-size + 0px;
$remSize: $size / $font-size;
@return #{$remSize}rem;
}
@function em-calc($size, $font-size : $font-size) {

$font-size: $font-size + 0px;
$remSize: $size / $font-size;
@return #{$remSize}em;
}
El $font-size es el tamaño de fuente original.
Por ejemplo:
$font-size: 14;
body {
font-size: #{$font-size}px;
font-size: rem-calc(14px); // returns 1rem
// font-size: rem-calc(28); // returns 2rem
}
Lea Convertir unidades en línea: https://riptutorial.com/es/sass/topic/6661/convertir-unidades
Capítulo 7: Extender / Herencia
Sintaxis
• @extend .<className>
• @extend .<className>, .<className>
• @extend .<className> !optional
• @extend .<className>, .<className> !optional
Parámetros
Parámetro Detalles
nombre de la clase La clase que quieres ampliar.
Observaciones
La regla @extend Sass le permite compartir propiedades de CSS en varias clases, manteniendo el
código DRY y más fácil de leer.
Examples
Extender una clase
.message
color: white
.message-important
@extend .message
background-color: red
Esto tomará todos los estilos de .message y los agregará a .message-important . Genera el siguiente
CSS:
.message, .message-important {
color: white;
}
.message-important {
background-color: red;
}
Extenderse de clases múltiples
.message
color: white
.important
background-color: red
.message-important
@extend .message, .important
En el código anterior, @extend se usa en una línea para agregar el código de varias clases a
.message-important , sin embargo, es posible usar una extensión por línea como esta:
.message-important
@extend .message
@extend .important
Cualquiera de estos métodos generará el siguiente CSS:
.message, .message-important {
color: white;
}
.important, .message-important {
background-color: red;
}
El encadenamiento se extiende
.message
color: white
background: black
.message-important
@extend .message
font-weight: bold
.message-error
@extend .message-important
font-style: italic
Este código hace que .message-error extienda desde .message-important , lo que significa que
contendrá código de .message-important y .message , ya que .method-important extiende desde
.message . Esto resulta en el siguiente CSS:
.message, .message-important, .message-error {

color: white;
background: black;
}
.message-important, .message-error {
font-weight: bold;
}
.message-error {
font-style: italic;
}
Descargo de responsabilidad: asegúrese de que la (s) clase (s) de la cual se está
extendiendo se produzcan solo una vez en el código; de lo contrario, Sass puede generar
algunos CSS confusos y complicados.
Opcional Extiende
A veces, es posible que desee que un @extend sea opcional y no requiera que exista la clase
especificada en su código.
.message-important
@extend .message !optional
background: red
Esto resultará en el siguiente CSS:
.message-important {
background: red;
}
Descargo de responsabilidad: Esto es útil durante el desarrollo cuando es posible que aún
no tenga todo su código escrito y no desee errores, pero probablemente debería eliminarse
en la producción porque podría dar lugar a resultados inesperados.
Placeholders
A veces, creará clases que no se utilizarán por derecho propio, sino que solo se extenderán
dentro de otros conjuntos de reglas. Esto significa que el archivo CSS compilado será más grande
de lo que debe ser. Los selectores de marcadores de posición resuelven este problema.
Los selectores de marcador de posición son similares a los selectores de clase, pero utilizan el
carácter de porcentaje (%) en lugar del (.) Utilizado para las clases. No aparecerán en el CSS
compilado.
%button {
border-radius: 5px;
margin: 0;
}
.error-button {
@extend %button;
background-color: #FF0000;
}
.success-button {
@extend %button;
background-color: #00FF00;
}
Esto compilará al siguiente CSS:
.error-button, .success-button {
border-radius: 5px;
margin: 0;
}
.error-button {
background-color: #FF0000;
}
.success-button {
background-color: #00FF00;
}
Extendiendo al padre
Típicamente tratando de extender al padre así:
.parent {
style: value;
@extend &;
}
Resultará en un error, indicando que el padre no puede ser extendido. Esto tiene sentido, pero
hay una solución. Simplemente almacene el selector padre en una variable.
.parent {
$parent: &;
style: value;
@extend #{&};
}
No hay ningún beneficio en hacer esto en el ejemplo anterior, sin embargo, esto le da el poder de
envolver los estilos principales dentro de una mezcla incluida.
Lea Extender / Herencia en línea: https://riptutorial.com/es/sass/topic/2894/extender---herencia
Capítulo 8: Funciones
Sintaxis
• @función nombre-función (parámetro) {/ * cuerpo de la función * /}
Examples
Funciones básicas
Una función es similar en apariencia a una mezcla, pero no agrega ningún estilo, solo devuelve
un valor. Deben usarse funciones para evitar que la lógica se repita en sus estilos.
Sass tiene algunas funciones integradas que se llaman mediante la sintaxis de la función CSS
estándar.
h1 {
background: hsl(0, 25%, 50%);
}
Las funciones se declaran usando la siguiente sintaxis,
@function multiply(x, y) {
@return x * y;
}
// example use below

h1 {
margin-top: multiply(10px, 2);
}
En el código anterior, @function declara una función, y @return significa el valor de retorno.
Lea Funciones en línea: https://riptutorial.com/es/sass/topic/4782/funciones
Capítulo 9: Instalación
Observaciones
Esto cubre solo a Ruby, que es el compilador principal de SASS para muchos sistemas pero
existen otras opciones. Uno muy común para cualquier desarrollador de nodos sería el sass de
nodos, que podría ser más fácil, y órdenes de magnitud más rápido, para muchos usuarios.
Examples
Mac
Ruby viene preinstalado en una computadora Mac.
Siga las instrucciones a continuación para instalar Sass:
1. Abrir CMD
2. Ejecutar gem install sass
3. Si recibe un mensaje de error, intente sudo gem install sass
4. Compruébalo funciona usando sass -v
Linux
Ruby deberá instalarse primero antes de la instalación. Puedes instalar Ruby a través del
administrador de paquetes apt, rbenv o rvm.
Entonces corre
sudo su -c "gem install sass"
Windows
La forma más rápida de obtener Ruby en su computadora con Windows es usar Ruby Installer .
Es un instalador de un solo clic que configurará todo de manera súper rápida. Después de instalar
Ruby, siga las instrucciones a continuación para instalar Sass:
1. Abrir CMD
2. Ejecutar gem install sass
3. Si recibe un mensaje de error, intente sudo gem install sass
4. Compruébalo funciona usando sass -v
Lea Instalación en línea: https://riptutorial.com/es/sass/topic/2052/instalacion
Capítulo 10: Los operadores
Examples
Operador de Asignación
Sass utiliza los dos puntos ( : operador para asignar valores a las variables).
Ejemplo
$foreColor: red;
p {
color: $foreColor;
}
Operadores aritméticos
Sass soporta los siguientes operadores aritméticos estándar:
Operador Descripción
+ Adición
- Sustracción
* Multiplicación
/ División
% Recordatorio
Ejemplos
p {
font-size: 16px + 4px; // 20px
}
h3 {
width: 2px * 5 + 12px; // 22px
}
h2 {
width: 8px + (12px / 2) * 3; // 26px
}
El orden normal de las operaciones se aplica como de costumbre.
Operadores de comparación
Sass es compatible con todos los operadores de comparación habituales: < , > , == != , <= , >= .
Ejemplos
(10px == 10) // Returns true
("3" == 3) // Returns false
$padding: 10px;
$padding <= 8px; // Returns false
Lea Los operadores en línea: https://riptutorial.com/es/sass/topic/3047/los-operadores
Capítulo 11: Mixins
Sintaxis
• @mixin mixin-name ($argument1, $argument, ...){ ... }
Examples
Crea y utiliza un mixin.
Para crear una @mixin usa la directiva @mixin .
@mixin default-box ($color, $borderColor) {

color: $color;
border: 1px solid $borderColor;
clear: both;
display: block;
margin: 5px 0;
padding: 5px 10px;
}
Puede especificar una lista de argumentos dentro de un paréntesis después del nombre de la
mezcla. Recuerda comenzar tus variables con $ y separarlas con comas.
Para usar la mezcla en otro selector, use la directiva @include .
footer, header{ @include default-box (#ddd, #ccc); }
Los estilos de la mezcla ahora se usarán en el footer y el header , con el valor #ccc para la variable
$color y #ddd para la variable $borderColor .
Mixin con argumento variable.
Hay algunos casos en mixins donde puede haber argumentos simples o múltiples mientras se
usa. Tomemos un caso de border-radius de border-radius donde puede haber un solo argumento
como border-radius:4px; o múltiples argumentos como border-radius:4px 3px 2px 1px; .
Tradicional con mezcla de argumentos de palabras clave será como a continuación: -
@mixin radius($rad1, $rad2, $rad3, $rad4){

-webkit-border-radius: $rad1 $rad2 $rad3 $rad4;
-moz-border-radius: $rad1 $rad2 $rad3 $rad4;
-ms-border-radius: $rad1 $rad2 $rad3 $rad4;
-o-border-radius: $rad1 $rad2 $rad3 $rad4;
border-radius: $rad1 $rad2 $rad3 $rad4;
}
Y utilizado como
.foo{
@include radius(2px, 3px, 5px, 6px)
}
El ejemplo anterior es complejo (codificar, leer y mantener) y si no puede pasar solo uno o dos
valores, generará un error y, para usar uno, dos o sus valores, debe definir otros tres mixins.
Al utilizar la variable Argumento , no tiene que preocuparse por la cantidad de argumentos que
puede pasar. Los argumentos variables se pueden declarar definiendo un nombre de variable
seguido de tres puntos (...) . A continuación se muestra un ejemplo de un argumento variable.
@mixin radius($radius...)
{
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
Y utilizado como
.foo{
@include radius(2px 3px 5px 6px)
}
.foo2{
@include radius(2px 3px)
}
.foo3{
@include radius(2px)
}
El ejemplo anterior es mucho más simple (para codificar, mantener y leer), no debe preocuparse
por la cantidad de argumentos que están por venir, ya sea uno o más de uno .
Si hay más de un argumento y, en cualquier caso, desea acceder al segundo argumento, puede
hacerlo escribiendo el nombre de propertyname : nth(variable_name, 2) .
Incumplimientos sensuales
SASS le ofrece la posibilidad de omitir cualquier parámetro, excepto los que desea sobrescribir,
por supuesto. Tomemos nuevamente el ejemplo de la default-box :
@mixin default-box ($color: red, $borderColor: blue) {

color: $color;
border: 1px solid $borderColor;
clear: both;
display: block;
margin: 5px 0;
padding: 5px 10px;
}
Aquí llamaremos a la mezcla que ha sobrescrito el segundo parámetro.
footer, header{ @include default-box ($borderColor: #ccc); }
el valor de $borderColor es #ccc , mientras que $color permanece red
Argumentos opcionales
Los argumentos opcionales de SASS le permiten usar un parámetro solo si especifica su valor;
De lo contrario, será ignorado. Tomemos un ejemplo de la siguiente mezcla:
@mixin galerie-thumbnail ($img-height:14em, $img-width: null) {

width: $img-width;
height: $img-height;
outline: 1px solid lightgray;
outline-offset: 5px;
}
Así que una llamada a
.default {
@include galerie-thumbnail;
}
.with-width {
@include galerie-thumbnail($img-width: 12em);
}
.without-height {
@include galerie-thumbnail($img-height: null);
}
simplemente mostrará lo siguiente en el archivo CSS:
.default {
height: 14em;
}
.with-width {
width: 12em;
height: 14em;
}
.without-height {
}
SASS no genera propiedades con valor null como su valor, lo cual es muy útil cuando
necesitamos incluir un argumento opcional en nuestra llamada o no.
directiva @content
Los mixins pueden pasar un bloque de código compatible con SASS, que luego estará disponible
dentro del mixin como la directiva @content .
@mixin small-screen {
@media screen and (min-width: 800px;) {
@content;
}
}
@include small-screen {
.container {
width: 600px;
}
}
Y esto daría salida:
@media screen and (min-width: 800px;) {

.container {
width: 600px;
}
}
Los mixins pueden usar la directiva @content y seguir aceptando parámetros.
@mixin small-screen($offset) {...
Lea Mixins en línea: https://riptutorial.com/es/sass/topic/2131/mixins
Capítulo 12: Partiales e Importaciones
Examples
Importador
El uso de @import permite dividir sus archivos en varios archivos más pequeños. Esto tiene
sentido, ya que puede mantener una mejor estructura para sus hojas de estilo y evitar archivos
muy grandes.
Ejemplo
Digamos que tienes unos cuantos archivos.
- application.scss
- header.scss
- content
|-- article.scss
'-- list.scss
- footer.scss
Su application.scss hoja de estilo principal.scss puede importar todos los archivos, así como
definir sus propios estilos.
// application.scss
// Import files:
@import 'header.scss';
@import 'content/article.scss';
@import 'content/list.scss';
@import 'footer.scss';
// other styles in application.scss

body {
margin: 0;
}
Tenga en cuenta que también puede omitir la extensión .scss para que pueda escribir @import
'header'; En lugar de @import 'header.scss' .
Esto lleva a application.scss tener todos los .scss importados incluidos en el archivo compilado
que sirve al cliente (navegador). En este caso, su archivo compilado sería application.css que
incluirá en su html.
<html>
<head>
<link rel="stylesheet" type="text/css" href="/application.css?v=18c9ed25ea60">
</head>
<body>
...
</body>
</html>
Si bien está trabajando con varios archivos, solo sirve un archivo, eliminando la necesidad de
múltiples solicitudes (una para cada archivo) y acelerando el tiempo de carga para sus visitantes.
Principales beneficios
• Mejor estructura para desarrollo utilizando carpeta y múltiples archivos.
• Servir solo un archivo al cliente (navegador)
Parciales
Puede crear archivos parciales que contienen fragmentos más pequeños de sus hojas de estilo.
Esto le permite modularizar su CSS y permite una mejor estructura de sus hojas de estilo. Un
parcial es un archivo Sass nombrado con un subrayado _partial.scss , es decir: _partial.scss . El
subrayado le permite a Sass saber que el archivo específico es parcial y no se generará en un
archivo CSS.
Los parciales de Sass deben utilizarse con la directiva @import . Cuando use @import , puede omitir
el guión bajo.
Ejemplo
Suponiendo que tienes una estructura de archivos con parciales como este
- main.scss
- _variables.scss
- content
|-- _buttons.scss
'-- _otherelements.scss
Puede incluir esos parciales en su archivo main.scss la siguiente manera (en este ejemplo, se
omiten los guiones bajos y las extensiones de archivo):
// main.scss - Imports:
@import 'variables';
@import 'content/buttons';
@import 'content/otherelements';
Lea Partiales e Importaciones en línea: https://riptutorial.com/es/sass/topic/2893/partiales-e-

importaciones
Capítulo 13: Scss utiles mixins
Examples
Flechas de puntero css3 puro con borde de contorno
!!! El contenedor debe colocarse relativamente o absolutamente
$ dirección - arriba, abajo, izquierda, derecha
$ margen - margen por el borde en $ dirección . Para la dirección superior e inferior, es de

izquierda a derecha. De izquierda a derecha: de arriba a abajo.
$ colores : primero es un color de borde, segundo, es un color de fondo (tal vez sea mejor
heredar el color de fondo de un padre)
$ arrowSide - es un tamaño relativo de una flecha
$ isInset : la flecha está dentro (verdadero) o fuera de su contenedor
Aquí hay un Plunker de trabajo https://plnkr.co/edit/PRF9eLwmOg8OcUoGb22Y?p=preview
%pointer-core {
content: " ";
position: absolute;
border: solid transparent;
z-index: 9999;
}
@mixin pointer($direction, $margin: 10px, $colors: (#999, $gray), $arrowSide: 8px, $isInset:
false){
$opposites: (
top: bottom,
bottom: top,
left: right,
right: left
);
$margin-direction: (
top: left,
bottom: left,
left: top,
right: top
);
&:before {
@extend %pointer-core;
border-width: $arrowSide;
@if $isInset {
border-#{$direction}-color: nth($colors, 1);
#{$direction}: -1px;
}
@else
{
border-#{map-get($opposites, $direction)}-color: nth($colors, 1);
#{map-get($opposites, $direction)}: 100%;
}
#{map-get($margin-direction, $direction)}: 0;
margin-#{map-get($margin-direction, $direction)}: $margin - 1;

}
&:after {
@extend %pointer-core;
border-width: $arrowSide - 1;
@if $isInset {
border-#{$direction}-color: nth($colors, 2);
#{$direction}: -1px;
}
@else
{
border-#{map-get($opposites, $direction)}-color: nth($colors, 2);
#{map-get($opposites, $direction)}: 100%;
}
#{map-get($margin-direction, $direction)}: 0;
margin-#{map-get($margin-direction, $direction)}: $margin;

}
}
Ejemplo de puntero de información sobre herramientas
$color-purple-bg: #AF6EC4;
$color-purple-border: #5D0C66;
$color-yellow-bg: #E8CB48;
$color-yellow-border: #757526;
.tooltip {
position: relative;
&--arrow-down {
@include pointer('bottom', 30px, ($color-purple-border, $color-purple-bg), 15px);
}
&--arrow-right {
@include pointer('right', 60px, ($color-yellow-border, $color-yellow-bg), 15px);
}
}
Lea Scss utiles mixins en línea: https://riptutorial.com/es/sass/topic/6605/scss-utiles-mixins
Capítulo 14: SCSS vs Sass
Examples
Principales diferencias
Aunque la gente suele decir Sass como el nombre de este preprocesador CSS, a menudo se
refieren a la sintaxis SCSS . Sass usa la extensión de archivo .sass , mientras que SCSS - Sass usa la
extensión .scss . Ambos se conocen como "Sass".
Hablando en general, la sintaxis SCSS usa más comúnmente. SCSS parece a CSS normal con más
capacidades, mientras que Sass ve bastante diferente al CSS normal. Ambas sintaxis tienen las
mismas habilidades.
Sintaxis
Las principales diferencias son que Sass no usa llaves o punto y coma, donde SCSS hace. Sass
también es sensible al espacio en blanco, lo que significa que tiene que sangrar correctamente.
En SCSS , puede dar formato y sangrar sus reglas a su gusto.
SCSS:
// nesting in SCSS
.parent {
margin-top: 1rem;
.child {
float: left;
background: blue;
}
}
HABLAR CON DESCARO A:

// nesting in Sass
.parent
margin-top: 1rem
.child
float: left
background: blue
Después de la compilación, ambos producirán el mismo CSS siguiente:
.parent {
margin-top: 1rem;
}
.parent .child {
float: left;
background: blue;
}
Mixins
Sass tiende a ser la sintaxis más "perezosa". Nada ilustra esto mejor que la forma en que define e
incluye los mixins.
Definiendo un mixin
= es cómo se define una mezcla en Sass , @mixin en SCSS .
// SCSS
@mixin size($x: 10rem, $y: 20rem) {
width: $x;
height: $y;
}
// Sass
=size($x: 10rem, $y: 20rem)
width: $x
height: $y
Incluyendo una mezcla

+ es cómo incluir en Sass , @include en SCSS .
// SCSS
.element {
@include size(20rem);
}
// Sass
.element
+size(20rem)
Mapas
Cuando se trata de mapas, usualmente SCSS es la sintaxis más fácil. Debido a que Sass está
basado en sangría, sus mapas deben guardarse en una línea.
// in Sass maps are "unreadable"

$white: ( white-50: rgba(255, 255, 255, .1), white-100: rgba(255, 255, 255, .2), white-200:
rgba(255, 255, 255, .3), white-300: rgba(255, 255, 255, .4), white-400: rgba(255, 255, 255,
.5), white-500: rgba(255, 255, 255, .6), white-600: rgba(255, 255, 255, .7), white-700:
rgba(255, 255, 255, .8), white-800: rgba(255, 255, 255, .9), white-900: rgba(255, 255, 255, 1
)
Debido a que puede formatear su código en varias líneas con SCSS , puede formatear sus mapas
para que sean más legibles.
// in SCSS maps are more readable

$white: (
white-50: rgba(255, 255, 255, .1),
white-100: rgba(255, 255, 255, .2),
white-200: rgba(255, 255, 255, .3),
white-300: rgba(255, 255, 255, .4),
white-400: rgba(255, 255, 255, .5),
white-500: rgba(255, 255, 255, .6),
white-600: rgba(255, 255, 255, .7),
white-700: rgba(255, 255, 255, .8),
white-800: rgba(255, 255, 255, .9),
white-900: rgba(255, 255, 255, 1)
);
Comentarios
Los comentarios en Sass vs. Scss son en gran medida similares, excepto cuando se trata de
líneas múltiples. SASS multilíneas SASS son sensibles a la sangría, mientras que SCSS basa en
terminadores de comentarios.
Comentario de una sola línea

estilo.scss
// Just this line will be commented!

h1 { color: red; }
style.sass
// Exactly the same as the SCSS Syntax!

h1
color: red
Comentario multilínea
estilo.scss
Iniciador: /*
Terminador: */
/* This comment takes up
* two lines.
*/
h1 {
color: red;
}
Esto dará estilo a los elementos h1 con el color rojo .
style.sass
Ahora, SASS tiene dos iniciadores, pero no los respectivos terminadores. Los comentarios de SASS
en SASS son sensibles a los niveles de sangría .
Iniciadores: // y /*
// This is starts a comment,

and will persist until you
return to the original indentaton level.
h1
color: red
Esto dará estilo a los elementos h1 con el color rojo .
Lo mismo se puede hacer con el iniciador /* :
/* This is starts a comment,

and will persist until you
return to the original indentaton level.
h1
color: red
Así que ahí lo tienes! Las principales diferencias entre los comentarios en SCSS y SASS !
Comparación entre SCSS y SASS
• SCSS sintaxis de SCSS parece más a una sintaxis de CSS pero la sintaxis de SASS es un poco
diferente de SCSS pero ambas producen exactamente el mismo código CSS .
• En SASS no estamos terminando las propiedades de estilo con punto y coma ( ; ) pero en
SCSS estamos terminando las propiedades de estilo con ( ; ).
• En SCSS usamos paranthesis {} para cerrar las propiedades de estilo pero en SASS no
usamos paranthesis .
• Indentation es muy importante en SASS . Definirá las propiedades anidadas en la class o id
del elemento.
• En scss podemos definir múltiples variables en una sola línea, pero en SASS no podemos
hacerlo.
para sintaxis de bucle
Con el lanzamiento de sass 3.3 y la versión plus, la sintaxis de condiciones de @if y else se hizo
igual. Ahora podemos usar expresiones no solo con scss sino también con sass .
sintaxis sass

.item-#{$i} { width: 2em * $i; }
}
Compilado para
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
sintaxis de scss
.item-#{$i} { width: 2em * $i; }
}
compilado para
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
Lea SCSS vs Sass en línea: https://riptutorial.com/es/sass/topic/2428/scss-vs-sass
Capítulo 15: Variables
Sintaxis
• $ nombre_variable : valor ;
Examples
Hablar con descaro a
Las variables se utilizan para almacenar un valor una vez que se utilizará varias veces a lo largo
de un documento Sass.
Se usan principalmente para controlar cosas como fuentes y colores, pero se pueden usar para
cualquier valor de cualquier propiedad.
Sass usa el símbolo $ para hacer de algo una variable.
$font-stack: Helvetica, sans-serif

$primary-color: #000000
body
font-family: $font-stack
color: $primary-color
SCSS
Al igual que en Sass, las variables SCSS se utilizan para almacenar un valor que se utilizará
varias veces a lo largo de un documento SCSS.
Las variables se usan principalmente para almacenar valores de propiedad de uso frecuente
(como fuentes y colores), pero se pueden usar para cualquier valor de cualquier propiedad.
SCSS usa el símbolo $ para declarar una variable.
$font-stack: Helvetica, sans-serif;

$primary-color: #000000;
body {
font-family: $font-stack;
color: $primary-color;
}
Puede usar !default cuando declare una variable si desea asignar un nuevo valor a esta variable
solo si aún no se ha asignado:
$primary-color: blue;
$primary-color: red !default; // $primary-color is still "blue"
$primary-color: green; // And now it's green.
Alcance variable
Las variables existen dentro de un alcance específico, como en JavaScript.
Si declara una variable fuera de un bloque, puede utilizarse en toda la hoja.
$blue: dodgerblue;
.main {
background: $blue;
p {
background: #ffffff;
color: $blue;
}
}
.header {
color: $blue;
}
Si declara una variable dentro de un bloque, solo se puede usar en ese bloque.
.main {
$blue: dodgerblue;
background: $blue;
p {
background: #ffffff;
color: $blue;
}
}
.header {
color: $blue; // throws a variable not defined error in SASS compiler
}
Las variables declaradas a nivel de hoja (fuera de un bloque) también se pueden usar en otras
hojas si se importan .
Localizar variables con la directiva @ at-root
La directiva @ at-root se puede utilizar para localizar variables.
$color: blue;
@at-root {
$color: red;
.a {
color: $color;
}
.b {
color: $color;
}
}
.c {
color: $color;
}
se compila a:
.a {
color: red;
}
.b {
color: red;
}
.c {
color: blue;
}
Interpolación
Las variables se pueden utilizar en la interpolación de cadenas. Esto le permite generar

dinámicamente selectores, propiedades y valores. Y la sintaxis para hacerlo, una variable es
#{$variable} .
$className: widget;
$content: 'a widget';
$prop: content;
.#{$className}-class {
#{content}: 'This is #{$content}';
}
// Compiles to
.widget-class {
content: "This is a widget";
}
No puede, sin embargo, usarlo para generar dinámicamente nombres de mixins o funciones.
Variables en SCSS
En SCSS, las variables comienzan con el signo $ y se configuran como propiedades CSS.
$label-color: #eee;
Solo están disponibles dentro de los selectores anidados donde se definen.
#menu {
$basic-color: #eee;
color: $basic-color;
}
Si se definen fuera de los selectores anidados, entonces se pueden usar en todas partes.
$width: 5em;
#menu {
width: $width;
}
#sidebar {
width: $width;
}
También se pueden definir con la bandera !global , en cuyo caso también están disponibles en
todas partes.
#menu {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width;
}
Es importante tener en cuenta que los nombres de las variables pueden usar guiones y guiones
bajos indistintamente. Por ejemplo, si define una variable llamada $label-width , puede acceder a
ella como $label_width , y viceversa.
Lea Variables en línea: https://riptutorial.com/es/sass/topic/2180/variables
Creditos
S.
Capítulos Contributors
No
Empezando con Angelos Chalaris, Benolot, Christopher, Community, Kartik

1
sass Prasad, Rohit Jindal, SamJakob, Stewartside
Actualizar la versión
2 Schlumpf
de Sass
aisflat439, alexbea, Amy, Christopher, Devid Farinelli, GMchris,

3 Anidamiento
Hudson Taylor, John Slegers, MMachinegun
Akash Kodesia, allejo, Angelos Chalaris, GMchris,

4 Bucles y Conditones
MMachinegun, ScottL
Compass CSS3
5 Schlumpf
Mixins
6 Convertir unidades SuperDJ
7 Extender / Herencia Euan Williams, GMchris, user2367593
8 Funciones Euan Williams, GMchris, Hudson Taylor, Pyloid
9 Instalación Angelos Chalaris, Pyloid, Stewartside
10 Los operadores Angelos Chalaris, Hudson Taylor, Pyloid
Akash Kodesia, Angelos Chalaris, GMchris, Hudson Taylor,

11 Mixins
Ninda, Roxy Walsh
Partiales e
12 Angelos Chalaris, Hudson Taylor, MMachinegun
Importaciones
13 Scss utiles mixins Kindzoku
75th Trombone, Everettss, Jared Hooper, MMachinegun,

14 SCSS vs Sass
Muzamil301, Pyloid, Robotnicka, Rohit Jindal
Daniyal Basit Khan, evuez, GMchris, Hudson Taylor, jaredsk,

15 Variables
Pyloid, Stewartside, yassh

Sass Es PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Sass Es PDF

Hochgeladen von

Copyright:

Verfügbare Formate

sass

Capítulo 1: Empezando con sass 2

Herramientas de línea de comandos 2

Capítulo 2: Actualizar la versión de Sass 6

¿Qué tan profundo debe anidar? 9

Anidando con @ at-root 9

El selector padre (&) 10

Capítulo 4: Bucles y Conditones 14

Directiva condicional (si) 15

Cada bucle con mapas / valores de lista 17

Capítulo 5: Compass CSS3 Mixins 18

Instalación utilizando Ruby 18

Usando CSS3 con brújula 19

Capítulo 6: Convertir unidades 21

Capítulo 7: Extender / Herencia 22

Extender una clase 22

Extenderse de clases múltiples 22

Capítulo 10: Los operadores 28

Capítulo 11: Mixins 30

Crea y utiliza un mixin. 30

Mixin con argumento variable. 30

Capítulo 12: Partiales e Importaciones 34

Capítulo 13: Scss utiles mixins 36

Flechas de puntero css3 puro con borde de contorno 36

Ejemplo de puntero de información sobre herramientas 37

Capítulo 14: SCSS vs Sass 38

HABLAR CON DESCARO A: 38

Incluyendo una mezcla 39

Comentario de una sola línea 40

Comparación entre SCSS y SASS 41

para sintaxis de bucle 42

Capítulo 15: Variables 44

Hablar con descaro a 44

Localizar variables con la directiva @ at-root 45

¿Por qué SASS?

Versión Fecha de lanzamiento

3.4.22 (Actual) 2016-03-28

Herramientas de línea de comandos

sudo gem install sass

Finalmente, puedes verificar que has instalado SASS con sass -v .

Supongamos el siguiente escenario: Tiene dos hojas de estilo: _variables.scss y layout.scss .

sass-lang.com dice lo siguiente acerca de los parciales: Puedes crear archivos

Esto daría como resultado algo como lo siguiente:

SASS soporta dos tipos de comentarios:

• Comentarios multilínea: abarcan varias líneas y generalmente se usan para mostrar

Lea Empezando con sass en línea: https://riptutorial.com/es/sass/topic/2045/empezando-con-sass

Puedes verificar la versión de Sass usando sass -v

Actualizar todas las gemas ruby gem update

Actualizar solo Sass gem update sass

Puedes verificar la versión de Sass usando sass -v

Actualizar todas las gemas ruby sudo gem update

Actualizar solo Sass sudo gem update sass

Lea Actualizar la versión de Sass en línea: https://riptutorial.com/es/sass/topic/10599/actualizar-la-

// CSS output of the last rule

@media (max-width: 480) {

// will not work

@media (max-width: 480) {

// BIG NO-NO, don't do this

¿Por qué es la !important -rule es una mala idea

¿Qué tan profundo debe anidar?

Anidando con @ at-root

Por ejemplo, podrías hacer algo como esto:

Eso compilaría a esto: