Introducción a Sass
Clase 23 de 42 • Curso de Preprocesadores CSS
Contenido del curso
Jhonatan Celis Rincón
student•
hace 6 años
Jair Neri
student•
hace 6 años
Wilson Delgado
student•
hace 6 años
Clase 23 de 42 • Curso de Preprocesadores CSS
Contenido del curso
Jhonatan Celis Rincón
Jair Neri
Wilson Delgado
Deymer Hernandez
Julio César Patiño Alvarez
Wilson Delgado
Sergio VO
Jorge Cruz Perez
Andres Tuiran Mendoza
Jorge Cruz Perez
Usuario anónimo
Benjamin Ponce Chanca
Christian Velázquez
Stiven Jiménez
Manuel Alejandro Aguilar Téllez Girón
Stiven Jiménez
Carlos Enrique Rojas Falcone
César Palma
Paolo Joaquin Pinto Perez
Anfernee Valera
Efraín Hernández García
Jhonatan David Ibarra Lavado
Addi Alberto Salazar Espinosa
Diego Alvaro Parra Abad
Xiomara Alejandra Hernández Arzola
Fernando Vela Vargas
Aloy Foxy
Jose Morales Varon
Wandy Rafael Santana Evangelista
Daniel Esteban Santos Mendez
Fabian Flores
Jeiner Alexis Bustos Quipo
Camilo José Mezú Mina
Diego Lozano
Sergio Garcia
Franklin Peñafiel
hector luis vargas medina
Maricruz Pizaña Solano
Segundo Juan
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.
Ty me salvaste de estamparme con este detalle en la practica n.n'
gracias!
Si quieres compilar Sass directamente desde VS Code instala la extensión => Live Sass Compiler.
Gracias excelente aporte.
super aporte
Para los que están acostumbrados a usar la terminal pueden hacer lo siguiente:
Instalar sass
npm install -g sass
Compilar de sass a css
sass --watch ejercicio-sass.scss ejercicio-sass.css
![2020-09-11 18_43_48-● nota.txt - platzi-games-sass-practica - Visual Studio Code [Administrador].png](https://static.platzi.com/media/user_upload/2020-09-11%2018_43_48-%E2%97%8F%20nota.txt%20-%20platzi-games-sass-practica%20-%20Visual%20Studio%20Code%20%5BAdministrador%5D-9a9f7b89-20d5-4f03-9ead-866db3a89a56.jpg){kind=small}
Excelente gracias, soy ·#teamTerminal, jaja :)
Una pregunta, cada vez que quiera cambiar algo en el preprocesador tengo que iniciar el comando en la terminal?
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:
En mi caso no tengo la etiqueta main, pero igual cuando se compilaba a HTML había un error en la estructura y con tu ejemplo lo arreglé.
Es verdad, había un pequeño error. Tu solución demuestra el aprendizaje de "include & extend"
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/
¿Por qué Less tendrá tan poco nivel de satisfacción? Es el primero que aprendí hace unos momentos xD Veré qué tal Sass para poder responderme esa misma pregunta. Espero. >.<
cuando termines de ver sass y stylus lo vas a descubrir. todo es cuestión de gustos ami me gusta más sass y stylus
Espero no ser el único al que se le viene esta imagen a la cabeza cuando oye "SASS"
no esperé esta referencia xd
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.
si no lo hacen desde la carpeta les tocará colocar toda la ruta y no es nada corta si partes desde el home ~
Descubrí esta extensión para compilar Sass esde VSCode
por ahora la anidación se parece a less
De acuerdo contigo!
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.
Este curso esta haciendo que me rompa la cabeza y eso me encanta
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
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 :)
Como buena práctica se recomienda no abusar de las anidaciones.
De momento es el Preprocesador que mas me gusta de CSS.
Me pasa igual, no más con el detalle que cuando se pone el ampersand para anidar cuando se compila no genera el anidamiento de clases de css nativa que en Less si, y quedaba así: .selector .selector__hijo Sass pone directo .selector__hijo, ese detalle me gusto, siento que ahorra codigo de verdad.
Si quiero aprender a compilar desde la terminal, ¿En cuál curso se aprende eso?
Hola.
Puedes tomar el curso de terminal y línea de comandos.
Lee la documentacion de sass
El profesor mencionó que para los iconos usábamos un ‘CDN’, Un CDN es una Red de distribución de contenidos. Los CDN se usan ampliamente para entregar hojas de estilo y archivos Javascript (activos estáticos) de bibliotecas como Bootstrap, jQuery, etc.
excelente aporte, tienen una gran cantidad de ejemplos
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
Muchas gracias, Hector
osea ya no se necesita prepro?