No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Introducci贸n a Sass

23/42
Recursos

Sass (Syntactically Awesome StyleSheets) es una extensi贸n de CSS que a帽ade caracter铆sticas muy potentes y elegantes a este lenguaje de estilos.

Sass es basado en Ruby a diferencia de Less y Stylus que se basan en Javascript.

Aportes 53

Preguntas 8

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Sass nos permite usar variables , reglas anidadas , mixins y funciones.
La raz贸n de que en SASS usemos la extensi贸n 鈥.scss鈥 es porque esta nos permite usar una sintaxis muy parecida a css.
La otra opci贸n es usar SASS con la extensi贸n 鈥.sass鈥 la 煤nica diferencia es que con esta extensi贸n podremos omitir las llaves 鈥榹}鈥 y los punto y coma 鈥;鈥 despu茅s de cada valor, esta sintaxis interpretar谩 los atributos y valores por medio de la identaci贸n.

Si quieres compilar Sass directamente desde VS Code instala la extensi贸n => Live Sass Compiler.

Para los que est谩n acostumbrados a usar la terminal pueden hacer lo siguiente:

<h1>Instalar sass</h1>
npm install -g sass
<h1>Compilar de sass a css</h1>
sass --watch ejercicio-sass.scss ejercicio-sass.css

Para los que seguimos los pasos del curso y descargamos los archivos de los enlaces del mismo hay un error en el html:

El body esta vac铆o y el main esta fuera del html, como lo se帽alo en la imagen.
La soluci贸n que yo hice en el archivo ejercicio-sass.pug fue cambiar el include por el extend y usar el tag block, como lo muestro:


Tengo muchas ganas de aprender sobre Sass. Escuch茅 que, es el mejor鈥

Al parecer Sass es un buen preproceador para aprender
https://2019.stateofcss.com/technologies/pre-post-processors/

Aqu铆 les dejo documentaci贸n sobre sass
https://sass-lang.com/documentation
Platzi tiene todo un curso de sass
https://platzi.com/cursos/sass/

Espero no ser el 煤nico al que se le viene esta imagen a la cabeza cuando oye 鈥淪ASS鈥

Si desean sass solo para este proyecto:

npm install sass -D  

luego para que este compilando en tiempo real cada cambio:

npx sass --watch ejercicio-sass.scss ejercicio-sass.css

IMPORTANTE: deben correr este comando desde la carpeta donde esta el archivo scss 贸 sass, en este caso hago: cd css y despu茅s el comando.

Descubr铆 esta extensi贸n para compilar Sass esde VSCode

por ahora la anidaci贸n se parece a less

Les comparto mi c贸digo utilizando la extensi贸n .sass en lugar de scss

*
    box-sizing: border-box
body
    margin: 0
    font-family: 'Lato', sans-serif
main
    display: flex
    width: 100%
    height: 100%
.perfil
    width: 50%
    padding-top: 50px
    &__avatar
        display: block
        margin: 0 auto
        border-radius: 50em
    &__nombre
        text-transform: uppercase
        text-align: center
        font-size: 20px
    &__titulo
        text-transform: uppercase
        text-align: center
        font-weight: 700
        font-size: 12px
    &__boton
        display: block
        width: 100px
        height: 40px
        margin: 15px auto
        padding-top: 15px
        border-radius: 20px
        text-decoration: none
        text-transform: uppercase
        text-align: center

Me parece excelente que haya una mini-secci贸n para cada preprocesador, esto te permitir谩 elegir el que m谩s se acomode a tu gusto o necesidad.

De momento es el Preprocesador que mas me gusta de CSS.

Hola. Os dejo una hoja resumen de SASS:

https://devhints.io/sass

Saludos!

Actualmente existe un pluging en VScode para compilar Sass, es muy f谩cil de usar y te ahorra tener que usar programas externos: https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
y funciona perfecto con live server que ya lo deben conocer

Como buena pr谩ctica se recomienda no abusar de las anidaciones.

tenia muchas ganas de prender sass hab铆a escuchado demasiado de sets preprosesador, la verdad no sabia que era

Hasta ahora, Sass funciona igual que Less en cuesti贸n de anidaciones.

Sass es mi fav 鈾

Alguno tiene el archivo de zeplin que usa el profe?

Excelente comienzo, vamos bien

Buenas, chicos y chicas, quiero compartirles este dato que me pareci贸 muy 煤til y que todos debemos de seguir y saber como programadores, al trabajar con Sass es preferible y muy recomendado que estructures tus archivos y carpetas de una forma modular y organizada, lo mas importantes para un programador es que su c贸digo est茅 organizado
Cuando trabajes con Sass podr谩s estructurar tus archivos de la siguiente forma

Esta es la Estructura Simple
La estructura simple es conveniente para un proyecto peque帽o como una sola p谩gina web. Para ese prop贸sito, necesita crear una estructura m铆nima. Aqu铆 hay un ejemplo:

  • base.sass : contiene todos los reinicios, variables, combinaciones y clases de utilidad

  • layout.sass : todo el c贸digo Sass que maneja el dise帽o, que es el contenedor y los sistemas de cuadr铆cula.

  • components.sass : todo lo que es reutilizable: botones, barras de navegaci贸n, tarjetas, etc.

  • main.sass 鈥 el parcial principal debe contener solo las importaciones de los archivos ya mencionados
    Otro ejemplo de la misma estructura simple es el siguiente:

  • core.sass : contiene variables, reinicios, mezclas y otros estilos similares

  • layout.sass 鈥 est谩n los estilos para el encabezado, el pie de p谩gina, el sistema de cuadr铆cula, etc.

  • components.sass : estilos para cada componente necesario para ese proyecto, incluidos botones, modales, etc.

  • app.sass 鈥 importaciones
    Este es el que yo personalmente suelo usar para mis proyectos m谩s peque帽os y simples.
    Hay otra estructura que se llama Estructura 7-1 que se suele usar en proyectos mas grandes y complejos
    Aqui puedes ver mas detalles https://www.webdesignerdepot.com/2020/12/2-smartest-ways-to-structure-sass/

Compartan esto a sus amigos frontend 馃槂

Resumen de la clase:

Sass es un preprocesador de CSS que a帽ade caracter铆sticas muy potentes y elegantes a CSS que veremos en las pr贸ximas clases.
De momento solo se menciona que esta basado en el lenguaje Ruby y que se trabajara con CSS puro.

width: 100% no es necesario cuando se usa display: flex

Si quieren que sass compile en tiempo real les recomiendo colocar en su terminal:

sass -w ./<input directory>:./<output directory>

**Ejemplo:
**

sass -w ./sass:./css

no parece 贸ptimo usar medidas absolutas en casi todo

馃槃 John Wick es una de mis peliculas favoritas 馃槃 estos preprocesadores estan muy interesantes, pensaba que era muy dificil de aprender 馃槂

Hasta ahora, lo he estado haciendo con algunas de las cosas que ya vimos en clases pasadas.
.

less>sass

Sass es completamente compatible con todas las versiones de CSS. Esto para que se pueda utilizar sin problemas con cualquier biblioteca CSS disponible.

He trabajado con Sass y me parece una herramienta con superpoderes, espero poder seguir aprendiendo mas trucos con ella. Buen video!!!

Hasta hora la misma base de less vamos a continuar.

Introduccion


Sass (Syntactically Awesome StyleSheets) es una extensi贸n de CSS que a帽ade caracter铆sticas muy potentes y elegantes a este lenguaje de estilos.

Sass es basado en Ruby a diferencia de Less y Stylus que se basan en Javascript.

  • Creamos un archivo llamado ejercicio-sass.scss. Lo primero que trabajaremos es el anidamiento.
*{
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: 'Lato',sans-serif;
}

main {
    display: flex;
    width: 100%;
    height: 100vh;
}

.perfil {
    width: 50%;
    padding-top: 50px;
		// el signo & indica que este elemento comienza con el mismo nombre de clase
		// es equivalente a escribir .perfil__avata
	 // Todo esta dentro de .pefil por que son estilos de elementos hijos de esa clase
	// Luego SASS cuando compila lo organiza 
    &__avatar{
        display: block;
        margin: 0 auto;
        border-radius: 50%;
    }
    &__nombre {
        text-transform: uppercase;
        text-align: center;
        font-size: 20px;
    }
    &__titulo{
        text-transform: uppercase;
        text-align: center;
        font-weight: 700;
        font-size: 12px;
    }
    &__boton{
        display: block;
        width: 100px;
        height: 40px;
        margin: 15px auto;
        padding-top:15px;
        border-radius: 20px;
        text-decoration: none;
        text-transform: uppercase;
        text-align: center;
    }
}

Super cool.

Excelente Comienzo 馃榾

&__siguienteClase

Much铆simas ganas de empezar con Sass

Continuemos 馃槂

Aun no he visto Sass! pero si he tocado styluss y less! por ahora me va gustando Styluss! es el python de la programacion :3

soy yo o siendo que se repite el modulo anterior 馃き馃槜

Me imagino que hizo todas esa instrucciones ya analizando el dise帽o de como lo iba hacer.

siento como si ya lo hubiera vivido

Tengo error en la anidacion, a alguen mas le sucede?

Excelente, vamos por m谩s! 馃槃

Entonces en esta clase solo hemos dado las anidaciones que son posibles de acortar gracias al metodo BEM con el &__elemento.

Cabe destacar que para utilizar sass en VSC, se debe nombrar al archivo con scss o bien sass.

Saludos compas!

me estan gustando mucho los preprocesadores de CSS creo que son muy utiles y ayudan a hacer un c贸digo mas limpio.

Estos son los Preprocesadores de CSS mas usados a hoy segun State of CSS

En tiempos de coronavirus, aprender es lo mejor 馃槂

SAAS muy interesante

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: 'Lato', sans-serif;
}

main {
	display: flex;
	width: 100%;
	height: 100vh;
}

.perfil {
	width: 50%;
	padding-top: 50px;
	&__avatar {
		display: block;
		margin: 0 auto;
		border-radius: 50em;
	}
	&__nombre {
		text-transform: uppercase;
		text-align: center;
		font-size: 25px;
	}
	&__titulo {
		display: block;
		text-transform: uppercase;
		text-align: center;
		font-weight: 700;
		font-size: 12px;
	}
	&__boton {
		display: block;
		width: 100px;
		height: 40px;
		margin: 15px auto;
		padding-top: 5px;
		border-radius: 20px;
		text-decoration: none;
		text-transform: uppercase;
		text-align: center;
	}
}```

Un descubrimiento que me ha sorprendido a bien es el programa prepos. Siempre prefiero la consola pero en un proceso de aprendizaje donde tengo que memorizar bastantes comandos (y mi memoria es cortita) no viene nada mal este programa. Probablemente si no fuese porque es hiper s煤per mega f谩cil de usar no lo har铆a pero es que es demasiado simple como para no usarlo鈥

Para los que quieran llevar el curso de la mano de la documentaci贸n oficial de Sass ac谩 esta el link https://sass-lang.com/