Introducción a Sass

Clase 23 de 42 • Curso de Preprocesadores CSS

Resumen

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.

Jhonatan Celis Rincón

student•

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.

Jair Neri

student•

Ty me salvaste de estamparme con este detalle en la practica n.n'

Wilson Delgado

student•

gracias!

Deymer Hernandez

student•

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

Julio César Patiño Alvarez

student•

Gracias excelente aporte.

Wilson Delgado

student•

super aporte

Sergio VO

student•

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

Jorge Cruz Perez

student•

Excelente gracias, soy ·#teamTerminal, jaja :)

Andres Tuiran Mendoza

student•

Una pregunta, cada vez que quiera cambiar algo en el preprocesador tengo que iniciar el comando en la terminal?

Jorge Cruz Perez

student•

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:

Usuario anónimo

user•

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é.

Benjamin Ponce Chanca

student•

Es verdad, había un pequeño error. Tu solución demuestra el aprendizaje de "include & extend"

Christian Velázquez

student•

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

Stiven Jiménez

student•

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/

Manuel Alejandro Aguilar Téllez Girón

student•

¿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. >.<

Stiven Jiménez

student•

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

Carlos Enrique Rojas Falcone

student•

Espero no ser el único al que se le viene esta imagen a la cabeza cuando oye "SASS"

César Palma

student•

no esperé esta referencia xd

Paolo Joaquin Pinto Perez

student•

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.

Anfernee Valera

student•

si no lo hacen desde la carpeta les tocará colocar toda la ruta y no es nada corta si partes desde el home ~

Efraín Hernández García

student•

Descubrí esta extensión para compilar Sass esde VSCode

Jhonatan David Ibarra Lavado

student•

por ahora la anidación se parece a less

Addi Alberto Salazar Espinosa

student•

De acuerdo contigo!

Diego Alvaro Parra Abad

student•

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.

Xiomara Alejandra Hernández Arzola

student•

Este curso esta haciendo que me rompa la cabeza y eso me encanta

Fernando Vela Vargas

student•

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

Aloy Foxy

student•

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 :)

Jose Morales Varon

student•

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

Wandy Rafael Santana Evangelista

student•

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

Daniel Esteban Santos Mendez

student•

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.

Fabian Flores

student•

Si quiero aprender a compilar desde la terminal, ¿En cuál curso se aprende eso?

Jeiner Alexis Bustos Quipo

student•

Hola.

Puedes tomar el curso de terminal y línea de comandos.

Camilo José Mezú Mina

student•

Lee la documentacion de sass

Diego Lozano

student•

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.

Sergio Garcia

student•

Hola. Os dejo una hoja resumen de SASS:

https://devhints.io/sass

Saludos!

Franklin Peñafiel

student•

excelente aporte, tienen una gran cantidad de ejemplos

hector luis vargas medina

student•

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

Maricruz Pizaña Solano

student•

Muchas gracias, Hector

Segundo Juan

student•

osea ya no se necesita prepro?