Hablemos de variables, herencia, anidamiento, operadores y más

Para los que se hayan confundido o quieran saber la diferencia entre extend y el include es la siguiente:
Los Mixins de Sass, hacen algo parecido a lo que hemos visto con Extend. Encapsulan varias líneas de código que posteriormente podemos llamar dentro de un selector.
Sin embargo, los Mixins incorporan una novedad. Permiten pasarles un argumento que podrá tener un valor distinto cada vez que lo usemos.
Me explico. Los Mixins se crean de la siguiente manera:

@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}

.box { @include border-radius(10px); }

Fuente: https://www.espai.es/blog/2018/04/sass-mixins-extend/

Les comparto que actualmente CSS ya también permite tener variables nativas, solo que la sintaxis es un poco más larga.

Para declarar las variables:

:root {
	--color-gris: #BDBDBD;
	--fuente: Helvetica, sans-serif;
	--borde: 1px solid black;
}

y para usarlas:

.button {
	background: var(--color-gris);
	font-family: var(--fuente);
	border: var(--borde);
}

De acuerdo a caniuse.com, el 92% de los dispositivos en internet soportan esta función nativa de CSS 😃

Les dejo las notas de la clase:
VARIABLES:
Definimos la variable con $nombreDeVariable:

$blanco : #fff;

Para usar nuestra variable por ejemplo en las etiquetas ancla:

	a {
	color: $blanco
}

ANIDAMIENTO:
Para usar una regla de estilos dentro de otra:

.login__container—register {
font-size: 14px;
	a {
		color: $blanco;
		font-weight: bold;
		text-decoration: none;
	}
}

En vez de como las teníamos antes:

.login__container—register {
font-size: 14px;
 }
.login__container—register a {
	color: $blanco;
	font-weight: bold;
	text-decoration: none;
}

HERENCIA EN SASS:
Definimos una regla de estilos:

.flex {
display: flex;
align-items: center;
}

Y para heredarla a otra regla o elementos:

.header {
@extend .flex
background-color: #000;
heigth: 100px;
width: 100%;
}

MIXINS
Se define el mixing con: @mixin nombre (sin punto precediendo el nombre)

@mixin flex {
display: flex;
align-items: center;
}

Para aplicarlo: donde se quiera incluir se pone @include nombre;

.header {
@include flex;
background-color: #000;
heigth: 100px;
width: 100%;
}

Los mixins tienen otra característica muy poderosa, que es la capacidad de recibir parámetros, tal como una función de JS; además de agrupar las declaraciones CSS, como lo explica Estefany en la clase.

Un buen ejemplo es crear un mixin para declarar las propiedades de un borde:

@mixin bordes-iguales($width, $style, $color){
	border:$width $style $color;
}

Para implementarlo, hacemos lo siguiente:

.selector {
	@include bordes-iguales(2px, solid, red);
}

Al compilar nuestro código, esto se traduciría en:

.selector {
	border: 2px solid red;
}

A este mixin que acabo de crear se le pueden declarar otras propiedades adicionales para hacerlo más útil, como por ejemplo un border-raduis que sea igual en todos sus lados para darle estilo a elementos como nuestros botones. El mixin quedaría así:

@mixin bordes-iguales($width, $style, $color, $radius){
	border:$width $style $color;
	border-radius: $radius;
}

Y lo llamamos de la misma manera, pero considerando que ahora tenemos un parámetro más:

.selector {
	@include bordes-iguales(2px, solid, red, 10px);
}

Al compilar nuestro código, esto se traduciría en:

.selector {
	border: 2px solid red;
	border-radius:10px;
}

Esto se puede aplicar para familias tipográficas, o efectos de transformación, para definir anchos y altos de un elemento, paddings, márgenes, etc., etc…

Les recomiento el siguiente enlace para que puedan experimentar con sus mixins y ver el resultado final de éstos: https://www.sassmeister.com

El uso de variables en este caso es particularmente útil cuando estás trabajando sobre una interfaz que puede sufrir cambios con el tiempo y no será necesario ir línea a línea revisando dónde se utilizó un valor (por ejemplo si se usó el mismo color +100 veces y se desea cambiar), será tan fácil como cambiar el valor de la variable y se reflejará el nuevo valor en todos los lugares donde fue implementada.

Durante el proyecto del curso utilice variables (en los archivos css)

//Asi declare las variables de colores
:root {
   --gris-oscuro: #232931;
   --gris-claro:#393e46;
   --verde-pistacho:#4ecca3;
   --blanco-crema:#eeeeee
  }

//Así las utilice 
.header{
    background-color: var(--gris-oscuro);
    color: var(--blanco-crema);
}

Para los que como yo se preguntan cuando utilizar Mixin y cuando Herencia, encontré en esta página una explicación sencilla. Espero que también les sirva. https://www.ombushop.com/blog/diseno-web/mixins-vs-herencia-en-sass.html

Para que compile automáticamente en vs-code se debe instalar “Live sass compiler” y luego darle click en “Watching” que esta en el menu inferior de vs-code (después de haber sido compilado como la profe nos indico)

Aja, acá hay un error. Si debes compilar SASS para llevarlo a CSS, porque el navegador no entiende de SASS. Entonces los cambios que ella realizó obviamente no van a afectar en nada.

A menos que lo haya hecho y editaron el video.

Me di a la tarea de hacer el reto con SASS, y este fué el resultado…

$white: #fff;
$green: #21c08b;
$violet: #ab88ff;
$font: 16px 'Muli', sans-serif;
@mixin flex($direction, $horizontal, $vertical){
  display: flex;
  flex-direction: $direction;
  justify-content: $horizontal;
  align-items: $vertical;
}

* {
  margin: 0;
  padding: 0;
}

h2 {
  font-weight: normal;
}

body {
  margin: 0;
  font: $font;
}

.header {
  @include flex(initial, space-between, center);
  width: 100%;
  height: 80px;
  background-color: $green;

  .header__img {
    width: 200px;
    margin: 10px 0 10px 10px;
  }
}

.login {
  background-image: linear-gradient($green, $violet);
  @include flex(column, center, center);
  padding: 0 30px;
  min-height: calc(100vh - 200px);
}

.login__container {
  @include flex(column, space-around, initial);
  width: 300px;
  min-height: 700px;
  border: 2px solid $white;
  border-radius: 40px;
  padding: 60px 68px 40px;
  color: $white;
  background-color: rgba(255,255,255,.1);

  .login__container--form {
    @include flex(column, center, center);
  }
}

.input {
  background-color: transparent;
  outline: none;
  border: none;
  border-bottom: 2px solid $white;
  color: $white;
  font: $font;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 20px;
  width: 100%;
}

.input::placeholder {
  color: $white;
}

.button {
  font: $font;
  letter-spacing: 1px;
  width: 100%;
  padding: 15px;
  margin-bottom: 10px;
  border: none;
  outline: none;
  border-radius: 25px;
  color: $white;
  background-color: rgba(255,255,255,.2);
  cursor: pointer;
}

.login__container--remember-me {
  @include flex(initial, space-between, initial);
  width: 100%;
  font-size: 14px;

  a {
    text-decoration: none;
    color: $white;
  }

  a:hover {
    text-decoration: underline;
  }
}

.login__container--social-media {
  width: 100%;
  font-size: 14px;

  div {
    @include flex(initial, flex-start, center);
    margin: 8px 0;

    img {
      width: 30px;
      margin-right: 10px;
    }
  }
}

.login__container--register {
  font-size: 16px;

  a {
    font-weight: bold;
    text-decoration: none;
    color: $white;
  }

  a:hover {
    text-decoration: underline;
  }
}

.footer {
  @include flex(initial, initial, center);
  height: 100px;
  width: 100%;
  background-color: $violet;

  a {
    color: $white;
    cursor: pointer;
    font-size: 14px;
    padding-left: 30px;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }
}

@media only screen and (max-width: 600px) {
  .login__container {
    background-color: transparent;
    border: none;
    padding: 0;
    width: 100%;
  }

  .footer {
    @include flex(column, initial, flex-start);
  }
}

Si usas varios archivos sass podes ponerlos todos en una carpeta y decirle a sass que mire ese directorio, cuando modificas alguno de los archivos, este los compila y guarda el archivo.css en otra carpeta que se le indica despues de los : en el comando que agrego abajo.
Como ejemplo en mi proyecto tengo una carpeta llamada styles/sass/ aquí adentro los archivos sass
Y sass guarda los archivos en una carpeta llamada public/css
Comando para correr en la terminal:

sass --watch /directorio/de/archivos/sass:public/css

Puede pasar que no modifiques el archivo .scss, guardes y no veas los cambios en el navegador, en ese caso debes compilar sass, desde tu consola de la siguiente manera (cada persona tiene su ruta):

De esa forma conseguiras que modificar el archivo .scss y ver los cambios, el navegar esta leyendo de igual forma y por lo que entiendo el archivo css pero con sass compilando,

Invierte tiempo en aprender bien las funcionalidades de un preprocesador ya que te ayudará a ahorrar mucho tiempo a la hora de escribir y reutilizar código css

Con los @mixin también se pueden crear puntos de ruptura en las pantallas, para adaptar los diseños a la mayor cantidad de dispositivos posibles. Por acá dejo un ejemplo de como trabajo los media queries con SASS.

@mixin v-small {
   @media only screen and (max-width: 576px) {
      @content; 
   }
}

@mixin v-large {
   @media only screen and (min-width: 768px) {
      @content;
   }
}

Luego en el código solo se poner @include y las nuevas propiedades de acuerdo al dispositivo al cual queramos adaptar el diseño.

@include v-large {
         flex-flow: row-reverse;
         align-items: center;
         justify-content: center;
         margin: 3rem 0;
      }

$blanco: $blanco;
$firstcolor: #21C08B;
$secondcolor: #AB88FF;

@mixin font_color_14 {
    color: $blanco;
    font-size: 14px;
}
@mixin font_color_16 {
    color: $blanco;
    font-size: 16px;
}
.flex_basic {
    display: flex;
    align-items: center;
}
@mixin flex_complet {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
body {
    margin: 0;
    font-family: 'Muli', sans-serif;
}
header {
    @extend .flex;
    background-color: $firstcolor;
    width: 100%;
    height: 80px;
    justify-content: space-between;
}
.header__img {
    width: 200px;
    margin-top: 10px;
    margin-left: 10px;
}
.login{
    background: linear-gradient($firstcolor, $secondcolor);
    @include flex_complet();
    padding: 0 30px;
    min-height: calc(100vh - 200px);
}
.login__contenedor {
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid $blanco;
    border-radius: 40px;
    color:$blanco;
    padding: 60px 68px 40px;
    min-height: 700px;
    width: 300px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
}
.login__contenedor--form {
    display: flex;
    flex-direction: column;
}
.login__contenedor--form label {
    font-size: 14px;
}
.login__contenedor--remember {
    color: $blanco;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    a {
        @include font_color_14();
        text-decoration: none;
    }
    a:hover {
        @include font_color_14();
        text-decoration: underline;
    }
} 
.login__contenedor--socialmedia > div {
    @extend .flex_basic;
    font-size: 14px;
    margin-bottom: 10px;
}
.login__contenedor--socialmedia > div > img {
    width: 30px;
    margin-right: 10px;
}
.login__contenedor--registro {
    font-size: 14px;
}
.login__contenedor--registro a {
    @include font_color_16();
    font-weight: bold;
    text-decoration: none;
}
.login__contenedor--registro a:hover {
    text-decoration: underline;
}
.input {
    background-color: transparent;
    border-left: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 2px solid $blanco;
    font-family: 'Muli', sans-serif;
    margin-bottom: 20px;
    padding: 0 20px;
    outline: none;
    height: 40px;
}
::placeholder {
    color: $blanco;
}
.boton {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    border: none;
    @include font_color_16();
    cursor: pointer;
    font-weight: bold;
    font-family: 'Muli', sans-serif;
    height: 40px;
    letter-spacing: 1px;
    margin: 10px 0;
}
.footer {
    @extend .flex_basic;
    height: 100px;
    width: 100%;
    background-color: $secondcolor;
}
.footer a {
    @include font_color_14();
    cursor: pointer;
    padding-left: 30px;
    text-decoration: none;
}
.footer a:hover {
    text-decoration: underline;
}
@media only screen and (max-width: 600px) {
    .login__contenedor {
        background-color: transparent;
        border: none;
        padding: 0;
        width: 100%;
    }
    .footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

Así quedó mi código después de agregar SASS:

Y así va quedando la página:

Conceptos interesandes de SASS

Las variables:

$color-main: #FFF000;

El anidamiento:

Con CSS

div .class1 {
	…a
}

div .class2 {
	…b
} 

Con SASS

div {
	.class1 {
		…a
	}
	.class2 {
		…b
	}
}

La herencia de propiedades:

.mensaje {
	…a
}

.mensaje-error {
	@extend mensaje; /* Se incluyen las propiedades de .mensaje, es decir, ...a*/
	…b
}

La adición de propiedades con @mixin e @include:
La diferencia más grande entre @extend y @mixin e @include es que @extend solo permite agregar los valores como fueron creados, mientras que con @mixin e @include se pueden establecer como una función y modificar los valores de las propiedades que van a ser agregadas. Por ejemplo:

@mixin dimension($width, $height) {
	width: $width;
	height: $height;
}

.sidebar {
  @include dimension(300, 600);
}

.navbar {
  @include dimension(800, 400);
}

No tenía ni idea de SASS, parece interesante… habrá que estudiarlo

Para reflejar los cambios utilicen el comando de compilacion de la clase pasada
Esta aplicacion tiene un live server y compila el sass apenas detecta un cambio, super recomendada.
Funciona el Linux, Windows y Macos
https://prepros.io/

un tip para compilarr scss con css instalen los pluggins live server y live sass compailer con 3 clicks compilas facilmente y es facil de configurar

Minuto 2.21: No existió ningún cambio porque no se compiló el archivo, sino se hubiera perdido el color que reemplazaron por $blanco.

Aunque css3 tiene variables css tiene muchas cosas mas

:root {
  --main-bg-color: coral;
}

#div1 {
  background-color: var(--main-bg-color);
}

#div2 {
  background-color: var(--main-bg-color);
}```

¿porque usar pre-procesadores para declarar variables? si se puedes declarar variable sin usar nada externo en CSS.

ejemplo de la declaración de variables con CSS

:root {
–color-principal : #5DD39E;
–letra-principal : ‘Muli’, sans-serif;
}

Hay otras ventajas.?

no creo que la utilizacion de sasssse necesaria en el proyecto , pero como tarea es bueno

Muy exquisita la clase con Sass, esta excelente esta herramienta que no conocia hasta hoy

Muy chevere los de los preprocesadores, quien iba creer que se pudiese aplicar hasta herencia en los CSS.

¿Cuándo usar uno y otro? https://vanseodesign.com/css/sass-mixin-or-extend/

Para ver los cambios que haces con sass.
Abres la terminal y escribes

sass --watch nombre_archivo.scss nombre_archivo.css

así se mantendrá compilando el archivo y solo tendrás que recargar la pagina para ver los cambios.

variables: para usar una variable utilizamos la siguiente sintaxis:
$blanco: valor;

anidamiento: Se utiliza cunado la clase padre también hace parte de clase de los hijos. ejemplo. En vez de usar este código

.inicio {
    background: black;
    font_size:10;
}
.inicio a {
    background: black
    text-decoration: none;
    font_size: 10;
}

Utilizamos este código que es más eficiente:

.inicio {
    background: black;
    font_size:10;
    a{
    text-decoration: none;
    }
}

herencia: Cuando tenemos un código muy repetido podemos separarlo en una clase y luego la podemos reutilizar en otros lugares. Ejemplo:

.flex{
display: flex;
align items: center
}
.header{
    @extend .flex;
}

mixin: son parecidos a las herencia pero podemos tener más funcionalidades como poder pasarle valores a la clase. Ej:
Los mixin pueden recibir argumentos por ejemplo:

<@mixin container($ancho, $alto, $color) {
width: $ancho;
height: $alto;
background-color: $color;
border-radius: 5%;
text-align: center;
margin: 5px;
}>

Los mixin se crean con la siguiente sintaxis:

@mixin flex {
display: flex;
align-items: center;
}
// se lo pasamos a otra  clase con: 
.clase {
    @include flex; 
}

que bonito Sass la verdad crear css es muy tedioso pero programarlo me gusta más

una duda, en que casos es recomendable usar mixin y en que casos es recomendable usar herencia?

me parece perfecto y muy util esto de los procesadores y los quisiera aplicar de ahora en adelante.

pero tengo una duda al estar modificando el archivo .scss tengo que estar ejecutando el comando sass en la terminal para que se compile el .css nuevamente y poder visualizar los cambios en la web?

o estoy haciendo algo mal ya que si solo modifico el .scss y guardo no veo los cambios en mi pagina

¿No se ocupa ejecutar los comandos “sass styles.scss” y despues "sass styles.scss styles.css para ver que funciona correctamente el código en el archivo SCSS?

vaya manera de explicar los conceptos con ejercicios prácticos, explicando el porque de cada caso de uso, me quedo claro cada uno de los puntos tocados en el curso.

Es importante saber el tiempo que se ahorra una persona utilizando un pre-procesador,ahora veo que es necesario aprender a usarlos.

Me quede haciendo el paso a paso del repositorio de Medellin CSS, esta muy interesante este tema de preprocesadores.

Me gustaria saber como se compila el codigo del .scss cada vez que se efectue un cambio?

En lugar de los “extend” es más recomendable usar los placeholders ya que con los “extend” se duplica mucho código innecesariamente y eso puede generar problemas de rendimiento.

Se ve interesante SASS, SIN EMBARGO, debo enfocar mis energías por el momento en aprender JavaScript luego de este curso, y ahí necesito 100% CSS Vanilla.

.sass = código más corto = trabajo mejor realizado.

Adelante…

Que genial este contenido de este modulo no sabia sobre la existencia de la herramienta Sass sin dudas me gusta como se puede estructurar mejor nuestra hoja de estilos ahorrandonos muchas lineas lo implementare en mi portafolio

Todo está genial, estaba muy abrumado, con la info de Teff es solo cuestión de seguir investigando y leyendo y todo sigue fluyendo

Genial, no tenia idea de como funcionaba todo esto

Si ella utilizo herencia y mixin de la misma forma… cual es la diferencia entre los dos entoces?

wow, sass acorta la asignación de los nombres para las pseudoclases, crea variables para poder modificar atributos importantes y propone una forma mas organizada para la creación de las hojas de estilo y su jerarquía, no lo conocía y está fantástico. 😃

El archivo style.scss hay que crearlo nosotros mismos, copiar el contenido del style.css dentro de este y luego ejecutar el sass? Si así fuera el caso, desde el HTML deberia cambiar el enlace y dirigirlo al style.scss?
Lo acabo de hacer de esa manera y al ejecutar en el navegador se pierden todos los estilos. Estoy usando la extensión Live Sass ya que instalarlo como en la clase anterior no podía.
Gracias de antemano!

De la clase pasada había entendido que para usar los archios scss había que “compilarlos” cada vez para convertirlos en archivos css y css.map pero en los ejemplos de este video nunca se corrio el comando “sass /archivo.scss /archivos.css”
¿Alguien me puede explicar por qué o si fue simplemente un error?

Algo que considero un plus al trabajar con SASS son los Partials que nos permite trabajar muy fácil con las metodologías vistas anteriormente, en mi caso ITCSS.

Comparto un articulo interesante donde pueden ver su aplicación:
Understanding ITCSS: Real case using ITCSS in a GhostCMS blog

En el curso de preprocesadores se explica esto un poco más detallado. Nos dice que las variables, así sea color blanco no se le debe poner $blanco= white, si no más bien definir $color-claro: white, ya que si después queremos por ej tener una tonalidad clara pero que no sea blanco podemos cambiarla desde la variable, y así sigue dentro de la palabra descriptiva claro, ejemplo $color-claro: whitesmoke que es un blanco hueso

Como programador, esto de SASS es lo mejor que me ha pasado en la vida. Siempre pensé que a CSS le faltaba este tipo de cosas y manejar toda la hoja de estilos me era difícil.

sass facilita la escalabilidad de nuestro código. Se nota que es esencial para cualquier proyecto.

Un tip que aprendí en el curso de Preprocesadores, es que al momento de crear variables es recomendable utilizar un nombre más genérico para éstas, ya que en un futuro pueden cambiar. Por ej. en vez de colocar $blanco, deberíamos colocar $color-principal o cualquier otro nombre que sirva para identificarlo y así será mucho más fácil modificarlo en el caso de necesitarlo.

Hola amigos, ¿Cual es la diferencia entre Mixin y Herencia (@extend) aparte del como se escriben? Cuando conviene usar mixin y cuando herencia?

en este video sass entendí un poco mejor como funciona el mixin y la diferencia con la herencia, el mixin permite recibir argumentos como cualquier función o metodo en un lenguaje de programación tradicional

Para crear variables tenemos que escribir el primer código por encima de todas las reglas que tengamos. Esto nos sirve para designar valores poco legibles y que vamos a repetir en varias ocasiones:

**@blanco : white** → **@blanco**

Para anidar estilos, es decir cuando queremos aplicar una propiedad a un elemento dentro de otro, para generar especificidad:

.main {
color: #454554
font-size: 16px
	a {
			background: blue
		}
}

Cuando queremos heredar valores. A diferencia de las variables aquí podemos crear reglar completas.

.flex {
display: flex;
align-items: center;
}

.header {
background-color: #21c08b;
height: 100px;
@extend .flex
}

Si pudiera darle like a este video lo haría sin duda. excelente manera de explicar y mostrar ejemplo.

Ojo con esto:
…
@extend .herencia lo que hace es encapsular propiedades y valores estáticos.
…
@include mi-mixin() lo que hace es encapsular propiedades con valor pero también podemos darle un parámetro para que sea algo dinámico los valores.
…
También existen las funciones que generalmente es parte del valor de una propiedad, ese valor depende de un parámetro o puede que no tenga parámetro, lo bueno de las funciones es que podemos agregar lógica de programación para obtener ese valor para x propiedad.

Al comienzo del curso si me parecio que se repetian muchos valores en diferentes partes del codigo, sin embargo con SASS wow hace que sea mas facil de escribir css.

Considero en lo personal que debo estudiar los cursos de preprocesadores y el de Sass, antes de implementarlo a proyectos para así poder integrarlo a la terminal. Ya que no he podido hasta ahora. Sin embargo, no dejo de reconocer lo eficiente que se muestra esta herramienta

Cuando es conveniente usar herencia en sass y cada cuando usar mixins??

porque es obligatorio sass?

Me parece que styled-componentes ha tomado muchas cosa de sass

Buena clase, solo pasaron por encima del tema, pero bien

CSS con super poderes

El repositorio de Github es buen recurso

Hay un pluging de Visual Studio que se llama Live Sass Compiler.

como se documenta ?

Les recomiendo el curso de Preprocesadores de la carrera de Arquitectura Frontend.

“Signo pesos”?

Bueno… a investigar se dijo… 🤓🤓🤓

Que gran aporte, no entiendo por que no se habla mas frecuente de esto cuando se toca el tema de CSS, me costo un poco instalarlo pero se pudo y la verdad si me parece que es una gran ventaja para evitar tantas lineas.

Variables

Las variables en Sass se escribren de la siguiente manera

$nombre_de_variable: valor_de_variable;

Anidamiento

El anidamiento sirve para dar clases a un selector y dentro de ese selector podemos poner otro selector el cuál va tomar los estilos del anterior y además se le puede agregar más estilos:

.selector {
	font-size: 1.6rem;
	.selector2 {
		color: white
	}
}

Esto le pondrá el tamaño de 1.6rem a ambos selectores pero al selector 2 le va poner el color de letra blanco.

Herencia

Si vemos que hay un bloque que se repite varias veces, podemos separarlo en una clase y esa clase llamarla dentro de otro selector para que utilice dicho código

.flex {
	display: flex;
	flex-direction: column;
}

.caja {
	@extend .flex;
	margin: 10;
}

El resultado será que el elemento caja tenga como display: flex y orientado de forma en columna

Que buena manera de evitar tantas líneas de código

No conocia esta herramienta y la verdad me parece demasiado buena. Ahorra código, tiempo y demás! Excelente clase.

mi aporte ???

Una consulta, al yo subir esto a mi servidor, tengo que instalar tambien SASS?

Hay que cambiar la ruta de css en la documentación de html? o sea el link que dice “./styles.css” cambiarlo a styles.scss?

practicando ando…
algunos ajustes sass

gracias por los datos

aprendiendo SASS, de rependte llego y SASS

Buena introducción a sass

Genial.

Muy bueno lo de la herencia !!

Muy útil!!

Muy bueno!

Esta clase es clave (comenzamos), porque, les va ayudar mucho para Javascript.

• Anidación de selectores en Sass | Desarrollo Web

github e39cc8b07b1f431cef19dee1f22c82e56ae1456a

La herencia sirve para bem sobre todo para los modificadores

Love sass 😃

SASS es demasiado poderoso para trabajar los etilos

Sass = Re utilizable !

Genial la mejor forma de trabajar con CSS es usar SASS me ha mejorado mucho la vida

Muy buenos conceptos del preprocesador sass 👍 .

Que excelente !

Muy utilies @extend, @mixin y @include… muchas gracias

Muy interesante sass

Buena explicación de como utilizarlos.