Estructura de CSS

Resumen

La primera ventaja que se nos ocurre es que podemos organizar nuestro Sass. Lo clave es que podemos separar nuestro código en archivos. Ya no tenemos que revisar un archivo muy amplio, sino que podemos hacer modificaciones a un solo archivo, lo que nos hace el trabajo mucho más fácil.

Juan C Felizzola

student•

Para organizar e importar archivos usamos @import

@import "nombre_archivo.scss"

La forma de nombrar los archivos que van a ser importados es con un _ al inicio

@import "_nombre_archivo.scss"

Fabricio Micheli

student•

es necesaria colocar la extensión del archivo con la sentencia @import?

César Daniel Bañuelos Gómez

student•

No, únicamente la ruta (en caso de que esté en una carpeta diferente a la del archivo que importa) y el nombre de archivo son necesarios.

Ejemplo para importar el archivo ‘patterns.scss’ que se encuentra dentro de la carpeta ‘common’:

// Archivo: common/patterns.scss
@import "common/patterns";

Gerardo Nava Pereda

student•

Posible Estructura de Carpetas:
Base
Component
Mixins
Layout
Vendor

[](BEM + Atomic Design - Worth Loving)

Gianfranco Correa

student•

gracias por el link de BEM, me sirvió mucho! (y)

Teofilo Rosales Gama

student•

Para compilar en Visual studio code :
Live Sass Compile

Jorge Lopez

student•

Excelente ¡

Roger Carlos Ariel Alba

student•

Es más en el momento que detecta que estas escribiendo SASS te lo ofrece.

Emmanuel Ferreyro

student•

Conozco 2 maneras de hacer @import para el archivo que queremos gestionar por medio de preprosessing y mantener nuestro código limpio y ordenado.

**1- Un archivo para cada @import; ** (haciendo un doble espaciado cuando cambia la carpeta)

@import 'base/_mixins';
@import 'base/_funciones';

@import 'layout/_navbar';
@import 'layout/_footer';

@import 'components/_botones';
@import 'components/_tablas';

** 2- un @import para cada carpeta **

@import
	'base/_mixins';
	base/_funciones';

@import
	'layout/_navbar';
	'layout/_footer';

@import
	 'components/_botones';
	 'components/_tablas';

NOTA: Existe una tercera manera denominada globbing, pero no la soporta SASS por ser altamente peligrosa para mantener el orden del código. Basicamente busca 1 import por carpeta ( ej, @import 'base/*';)

Juan Jiménez

student•

Interesante dato, muchas gracias :)

Andrés Felipe García Rendón

student•

muchas gracias

Juan Felipe Latorre Salavarrieta

student•

No es muy claro el desarrollo de la idea y toca verlo demasiadas veces para entenderlo por favor mejorenlo para la comunidad

Jesus Federico David Herrera

student•

Por ahora solo esta explicando que es buena practica tener

Carpeta Scss - con un solo archivo style.scss que va a incluir a todos los archivos scss que tu hagas. } Es decir puedes tener un archivo _header.sccs _main-.sccs styles.sccs -> contendra a estos dos. Hasta aqui es la ventaja de usar los prepro.

Sergio Toshio Minei

student•

Estructura de CSS

Una ventaja que trae Sass es el poder organizar mejor nuestros archivos. Esto lo podemos lograr separando nuestros estílos en múltiples archivos. De tal modo, ya no tenemos que revisar un archivo muy amplio, sino que podemos separar nuestros estilos en varios módulos haciendo el trabajo mucho más fácil.

Para organizar e importar archivos usamos @import.

La forma de nombrar los archivos que van a ser importados es con un _ al inicio.

@import "_nombre_archivo.scss"

Pueden ver el resumen completo del curso aquí

Harold David Avila Sabogal

student•

Muchas gracias por la información

Tomas Salina

student•

Encontré una forma muy buena para organizar un proyecto con sass...

Aqui el link

Xavier Alexandro Basir Jeffrey

student•

En lo personal siento que es más cómodo trabajar con las mismas herramientas sin importar el sistema operativo, por eso les aviso que actualmente Prepos está disponible para MAC, Windows y Linux

Platzi Team

student•

El prefijo '( _ )' en los archivos .scss sirve para indicarle al compilador que no cree un archivo .css. Gran clase

Jhonatan David Ibarra Lavado

student•

exacto amigo :D

Luis Fernando Pedroza Taborda

student•

Excelente punto. Christian.

Francisco Imanol Suarez

student•

Podriamos tener en nuestro package.json un script para ejecutar la compilacion automatica.

    "sass": "sass --watch <RUTA DEL ARCHIVO SCSS> <RUTA DE SALIDA.CSS>"

De esta manera cuando ejecutemos npm run sass compilara nuestro archivo a .css y quedara pendiente a cambios del archivo SCSS

Perla Godinez Castillo

student•

https://www.javatpoint.com/sass-tutorial

Aarón Fabricio Santa Cruz Valdez

student•

En resumen sass te ayuda a mantener tu código organizado ya que todo se modulariza.

Andrea Paola Parra Martínez

student•

Vas demasiado rápido. Es una pasada por encima de

María José Ledesma

student•

¡Hola pao! Puedes manejar la velocidad del video.

¡Nunca pares de aprender! (Y practicar) 🦄

Stiven Jiménez

student•

te recomiendo que tomes el curso de preprocesadores https://platzi.com/clases/preprocesadores/ en este curso explican de manera más detallada y "lenta". no solo sass, también explican less stylus y pug que es un preprocesador de html

Omar Villafuerte

student•

Quienes adoran Visual Studio Code acá les dejo la referencia de está extensión SCSS IntelliSense

Héctor Aguilar Mogollan

student•

siempre es importante saber como funciona CSS antes de aprender el preprocesador para saber en que esta basado, y como es que hace las cosas mas fáciles y funcionales.

Ivan Fuentes González

student•

¿Qué prefijo debo de usar en prepros para que no se compilen los archivos? utilice el "_archivo.scss" pero si lo compilo :C

Alexander Valencia

student•

según entiendo no debería compilarlos, ya intentaste mirar en la configuración del prepros🤔

Jose Armando Acevedo Angarita

student•

Me sucedio lo mismo, la solucion es esta (bueno a mi me funciono) App-Menu>Project Defaul>File Watcher> Path filters>Add y escribes esto: _*

Damaris Quiroz

student•

Si quieres ahorrarte el hecho de descargar Preposs en mi caso que utilizo Windows y ya tienes VS Code entonces:
Live SASS Compiler para VS Code ctrl+P, escribe ext install live-sass.
Reinicias VS Code y haces click abajo “Watch my SASS”

Puedes controlar si quieres que continue rastreando continuamente o simplemente apagarlo por un tiempo mientras escribes el codigo SASS

Daniel Ramos

student•

como puedo cambiar la ubicacion del archivo de compilacion?

Harold David Avila Sabogal

student•

Muchas gracias por la información tremendo aporte

Oscar Lopez

student•

Cuando hablamos de organizar nuestro Sass, me acuerdo de la misma filosofía de React, que todos sus componentes apuntan a un componente principal.

Sebastian Marin

student•

Bastante informacion, toca despacio y repetir videos....

Oscar Lopez

student•

Cuando hablamos de organizar nuestro Sass, me acuerdo de el manejo de componentes con React que apuntan a un componente principal, es decir que estamos hablando de la misma filosofia.

Estructura de CSS

Preprocesador Sass

Qué aprenderás sobre Sass

Introducción al Curso de Sass

Diferencias entre Sass, Stylus y Less

Compilación de código en archivos CSS

Instalación

Estructura de CSS

Variables

Variables

Reto

Solución al reto

Anidaciones

Anidaciones

Mixins

Mixins

Continuando con Mixins

Uso de la directiva `content` (`block` en Stylus)

Extend

Funciones

Funciones

Directiva

Ejemplos de funciones

Reto

Reto - Solución

Controles de Flujo

Listas y directiva each

Ciclos FOR/EACH

Condicionales