Solución al reto

Resumen

En esta clase te voy a mostrar cómo solucionar el reto que te propuse en la clase anterior. Lo primero que vamos a hacer es definir los elementos de HTML.

Juan C Felizzola

student•

Mientras suben los archivos se los dejo acá:

styles.sass

// Librerias, settings y variables
@import 'lib/_variables.sass'

// Elementos base
@import '_tablas.sass'
@import 'base/_botones.sass'
@import 'base/_tipografia.sass'

// Components
@import 'components/_grids.sass'

// Esto va de último
@import 'components/_utilities.sass'

_variables.sass

/*---------- $COLORS -----------*/
    

// Branding colors

$color-brand: #ea83ee
$color-secondary: rgb(219, 216, 121)

$color-black: rgb(0,0,0)
$color-darkblack: #4d4d4d
$color-grey: #bfbfbf
$color-white: rgb(255,255,255)

// Texturas
$color-alert: rgb(252,228,207)
$color-error: rgb(218,79,73)
$color-info: rgb(66,104,221)
$color-success: rgb(91,183,91)


// Tipografía
$basefont: 'Quicksand', sans-serif
$basefontsize: 16px

$buttoncolor: $color-white
$buttonbackgroundcolor: $color-brand

_tablas.sass

table tr:hover
  background-color: $color-secondary

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/styles.css">
  <title>SASS</title>
</head>
<body>
  <h1>Platzi Styguide</h1>
  <section>
    <h2>Botones</h2>
    <input type="submit">
  </section>
  <section>
    <h2>Tipografía</h2>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci nam dolor in quidem! Consectetur hic quam, veritatis aut, expedita aliquid beatae asperiores voluptas nobis vitae doloremque, sunt laboriosam id quo?</p>
  </section>
</body>
</html>

Los otros no contienen nada por ahora, entonces sólo es crearlos.

leonardo rodriguez

student•

Muchas gracias por el aporte 😉

Johan Marcel Fernandez Castillo

student•

Super, gracias. 😁

Hernando Rincón

student•

Las metodologías para construir y mantener la arquitectura de CSS están orientadas a la organización, reutilización y mantenimiento del código y de las hojas de estilo CSS dentro de un proyecto de forma escalable, a través de la nomenclatura de clases y la división del código en el desarrollo. Entre las distintas metodologías, se destacan tres, por ser las más ampliamente difundidas.

OOCSS
Object Oriented CSS
Retoma los principios de la programación orientada a objetos para hacer clases comprensibles y reutilizables, evitando la duplicación de código.
Sitio oficial:
Autora: Nicole Sullivan, 2008

SMACSS
Scalable and Modular Architecture for CSS
Se enfoca en cinco secciones o categorías de código como cimiento de cualquier proyecto con CSS: Base, Layout, Module, State, Theme.
Sitio oficial:
Autor: Jonathan Snook, 2011

+BEM
Block, Element, Modifier
Propende por que los nombres de clases y la organización se orienten a la función que cumplen, para lo cual plantea una sintaxis propia en los nombres de clases, como:

.block
.block--modifier
.block__element
.block__element--modifier

Sitio oficial:
Autor: Soportado por la firma Yandex Tech.

Este es un buen artículo en Medium sobre la utilización de las tres metodologías.

Daniel Páez

student•

Esto que compartiste acà es oro amigo, me hacia falta el entender una manera de estructurar el css

Harold David Avila Sabogal

student•

Brutal aporte tremenda información muchas gracias

Jonathan Salazar

student•

Sass nos ofrece su propio sistema de comentarios para tener nuestro código bien documentado, enlace: https://sass-lang.com/documentation/syntax/comments

Christian Velázquez

student•

Gracias.

Platzi Team

student•

Gran Aporte, Gracias

Cristian Florez

student•

Hay algunos repositorios en GitHud Con su sistema de archivos ya creados ejmplo: https://github.com/HugoGiraudel/sass-boilerplate

Emmanuel García

student•

Buen ejemplo!

Mario Alejandro Cortez Salinas

student•

¿Existe algún estándar de la organización de las carpetas?

Juan Castro

teacher•

¡Claro que si! Solo buscando “sass folder structure best practice” en google encuentras muy buenos resultados: How to structure a Sass project, Aesthetic Sass 1: Architecture and Style Organization, Sass Guidelines, entre muchísimos otros.

Ahora, los mejores programadores siguen esta guía para organizar y escalar los archivos y carpetas de sus aplicaciones: Scalable file structure for React and other projects. Te la recomiendo por encima de todas las anteriores.

Harold David Avila Sabogal

student•

gracias

Jose L. Figueroa

student•

Así importé mi ejrcicio:

@import "clean"; @import "variables";

/* Templates */ @import "templates/header"; @import "templates/blog";

Sebastian Marin

student•

Me parece super la organizacion de los archivos.

Luis Alejandro Vera Hernandez

student•

En que diseño se esta basando para poner los colores y fuentes? Hay algun repositorio?

Ricardo Ayala Montes

student•

Creo que esta muy repetitivo (crear varios archivos iguales, cambiando comentarios). Lo interesante sería que explicará las buenas practicas en la estructura o ya tenerlos hechos.

Gerardo Nava Pereda

student•

No es mejor usar camelCase en lugar de snape-case?

Victor Jaramillo

student•

Hola, en mi opinión es cuestion de gustos, ambos son estándares sumamente probados y avalados por muchos años de uso, lo q deberías considerar al momento de usarlos es, en mi opinión cuál se adapta mejor a ti y cómo sacar el máximo provecho de ellos x ejemplo podrías usar uno de ellos para la declaración de funciones y otro para declarar variables, recuerda q al final lo importante es hacer un buen código y q sea entendible 😄

Victor Alejandro Alvarez Tallada

student•

Cada lenguaje tiene su convención de como nombrar cada cosa (funciones, variables, etc) Me parece que en caso de css o sass la convención seria kebab-case.

Aunque e visto que css es donde “se lo toman mas relajado”, y a veces depende mucho del equipo de trabajo para llegar a un acuerdo cómodo para todos.
También existen unas metodologías, que ayudan en esto:

BEM me parecer es la que mas se usa y es sencilla de entender. 😉

Michael Garcia

student•

Algo que yo haría digamos para los elementos html, seria ponerlos todos dentro de un archivo llamado _base.scss, usando variables dentro del archivo _variables.scss e importarlo en styles.scss.

Daniel Páez

student•

Dejo la captura de mi estructura de archivos

Para crear mi estructura me fundamente en los siguientes:

Como indica el profe separar la base html del resto
Para la parte de "interface" lo subdivi en tantos componentes como pude de manera eficiente
- Notaras si hiciste el curso de jquery a js de Leonidas que mi sass lo monte sobre Platzi Video, es intencional :) para generar sinergias en mi aprendizaje

Dejare mi codigo en

Rabi Leonel Leon Chan

student•

¿Cual es el repositorio del proyecto ?

Jorge Cruz Perez

student•

En el video esta, saludos :): https://github.com/Wakkos/platzi-scss

Luis Alejandro Vera Hernandez

student•

Como hizo para agarrar una parte de la variable agregar la palabra color de un solo golpe?

Luz Sthephany Granados Castro

student•

Hola Luis 😊, pues en mi caso que tengo Windows, para poder utilizar el multicursor en Visual presionas el shortcut Ctrl + alt + (flecha arriba o abajo) sin embargo si quieres ver los shortcuts que tienes en tu visual predeterminados, puedes ir a File - preferences - Keyboard shortcuts o Ctrl + K Ctrl + S. Espero te sirva esta info! 🚩📌✔👍

Luis Alejandro Vera Hernandez

student•

Gracias Sthepha, revisare la parte de los shortcuts.

bruno guerra solano

student•

buenas comunidad, pregunta si yo envio los datos de este proyecto y coloco un git ingnor para los documentos de sass, imaginemos que una persona descarga mi repositorio puede compilar su sass en le mismo documento css descargado

Cristofher Jumbo Jimenez

student•

Cundo uno compila Sass, normalmente se suele indicar un archivo donde crear el css. La verdad es que esta interesante la pregunta por que o puede sobreescribir los datos o aniadirlos al archivo css. Tendria que probarlo y decirte hahaah Saludos.

Jesus Federico David Herrera

student•

Si estas ignorando la carpeta SCSS estas diciendo a GIT que no suba a tu repositorios los archivos SASS. Por ende solo tendras el CSS compilado, en caso de que lo hayas hecho. Para que otra persona pueda compilar tus archivos SASS debes subir esa carpeta. Si envias tu CSS solamente cuando la otra persona compile su SASS sobreescribira lo que la otra persona tenga como archivos SASS. Espero que haya sido entendida mi respuesta.Saludos.

Esau Rosales

student•

¿Como evito que se compilen todos los archivos? Al principio del curso, vi que debia evitar que se compilaran todos los archivos del css excepto el principal, pero no se como hacerlo, se compila aunque utilice “_”

Roger Carlos Ariel Alba

student•

hola!

Cómo lo estas haciendo?

Yo lo estoy haciendo desde la terminal y sin ninguna instrucción adicional no compilas los que tienen "_".

Ahora si estas usando algun software a lo mejor debes revisar los settings.

Saludos!

Andres Evaristo Ruiz Gonzalez

student•

le pone un guion bajo _ al principio del nombre del archivo

Reynaldo Francisco Moreno Briceño

student•

Una mejor manera de hacerlo es crear dentro de nuestra carpeta sass, una carpeta llamada "componentes", y dentro de ella crear una archivo de nombre "_globales.scss" alli podemos declarar variables, tipografias, mixins, funciones.

Luego en nuestro archivo "style.scss" que es nuestro principal donde importamos, llamamos de primero a nuestro archivo "globales.scss".

Asi cargamos de primero todas nuestras variables, mixins, funciones, y tipografias, para evitar errores.

Jorge Alberto Alvarez Sone

student•

¿Saben por qué me bota el error?

Valeria Sánchez Betancourt

student•

Creo que es porque falto un punto y coma al final de

@import: "../components/grids";

Jorge Alberto Alvarez Sone

student•

Gracias ya lo había solucionado , fue pequeño error por no revisar bien mi codigo. Gracias de todas maneras :)

Teresa Carbajal Herrera

student•

Luis Felipe Medina Rodriguez

student•

que pena lo de los colores es una extension? se ve genial

Eden Rodrigo Verdugo Garcia

student•

como se hace para ponerle el texto color a todas las variables en vs code?

Enrique Alfaro Cubero

student•

Amigo con la tecla alt presionada vas clicliando en los lugares donde quieres escribir a la vez

// Librerias, settings y variables
@import 'lib/_variables.sass'

// Elementos base
@import '_tablas.sass'
@import 'base/_botones.sass'
@import 'base/_tipografia.sass'

// Components
@import 'components/_grids.sass'

// Esto va de último
@import 'components/_utilities.sass'

/*---------- $COLORS -----------*/
    

// Branding colors

$color-brand: #ea83ee
$color-secondary: rgb(219, 216, 121)

$color-black: rgb(0,0,0)
$color-darkblack: #4d4d4d
$color-grey: #bfbfbf
$color-white: rgb(255,255,255)

// Texturas
$color-alert: rgb(252,228,207)
$color-error: rgb(218,79,73)
$color-info: rgb(66,104,221)
$color-success: rgb(91,183,91)


// Tipografía
$basefont: 'Quicksand', sans-serif
$basefontsize: 16px

$buttoncolor: $color-white
$buttonbackgroundcolor: $color-brand

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/styles.css">
  <title>SASS</title>
</head>
<body>
  <h1>Platzi Styguide</h1>
  <section>
    <h2>Botones</h2>
    <input type="submit">
  </section>
  <section>
    <h2>Tipografía</h2>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci nam dolor in quidem! Consectetur hic quam, veritatis aut, expedita aliquid beatae asperiores voluptas nobis vitae doloremque, sunt laboriosam id quo?</p>
  </section>
</body>
</html>

Solución al reto

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