Anidaciones

Resumen

Gracias a las anidaciones podemos añadir propiedades a través de la sintaxis de Stylus. Además, esto nos permite referenciar al padre.

Stuard Gerardo Carrillo Gonzalez

student•

Anidaciones

Con stylus tenemos acceso a hacer anidaciones interesantes.

sub

Hacemos referencia a todos los elementos que estén dentro de las etiquetas padres

body, .light-theme
  background lightyellow
  color #2c2c2c

  .primer-hijo
    margin-bottom 24px

child

Con el uso de “>” hacemos referencia a los hijos directos del elemento padre

body, .light-theme
  background lightyellow
  color #2c2c2c

  > .primer-hijo
    margin-bottom 24px

reference

Con el uso de “&” hacemos referencia al nombre del elemento padre

.psudoe-element
  width 300px

  &:before
    content 'hola'
  
  .ie-8 &
    &:before
      content 'ciao'

NOTA: No anidar mas de 3 veces

ejemplo de modulación

.btn
  background white
  color black
  border-radius 3px

  &-alert
    background red
    color white

  &-warn
    background orange
    color white

Harold David Avila Sabogal

student•

Muchas gracias pro tu aporte que buena información

Nathaly Stefani Riaño Bejarano

student•

Gran resumen! 👌

Yomar Esteban Miranda Sarmiento

student•

Cabe destacar que no es necesario usar : ; {}

.pseudoelement
	width 300px
	&:before
		content "Hola Mundo!"
	.ie-8 &
		&:before
			content 'Good Bye'

body
	background teal
	font-size .9em	
	.primerhijo
		margin-bottom 24px
	> .primerhijo
		font-size 18px
		
.btn
	border-radius 5px
	&--alert
		background red

Harold David Avila Sabogal

student•

Gracias

jerel posada

student•

no es necesario, pero es buena practica utilizarlo, y adicionalmente te da mas estructura. por otro lado es mas legible leer con ; {} que sin ellos.. Me refiero es que en 6 meses ni siquiera vas a entender que diablos hace esas líneas de código..

Alexander Valencia

student•

hasta el momento la sintaxis de Stylus es igual a la de SASS

Freddy Córdova Arana

student•

es verdad

Ricardo Oriel Cuan Sánchez

student•

en Stylus puedes no usar llaves, dos puntos y los punto y coma

Haciéndolos muy similar a Python

David Aguilera

student•

Hola compañeros, pues al parecer yo me confundi un poco con todo el procedimiento, quiero pensar que solo fui yo. la verdad me confundio un poco el saber que usar, es decir usar visual studio code. o prepros. tambien me confundio si se podia utilizar visual code. para procesar los archivos stylus. no critico pero concidero que no fue muy claro wakkos en ese sentido. "ojo" , no estoy criticando solo pienso que me confundio un poco. si no estoy mal, el procedimiento es el siguiente, por favor corrijanme si estoy mal.

1.- se usa ide, visual code, atom, sublime, etc. para crear archivos estandar, html, carpetas etc. para el proyecto.

2.- se usa prepros solo para generar el archivo styl, el cual crear el archivo css normal que usa el index.

cabe comentar que al crear el ejercicio de wakkos, en visual studio, tuve que descargar un pluggin para poder crear archivos styl. tambien que al momento de guardar el ejercicio me marco un error por no poner {}. tenia que ponerlas si no , no me dejaba guardar, una vez guardado se crea el archivo stylus. ya minificado. la verdad no me aparecio como se muestra con wakkos.

agradeceria la retroalimentacion compañeros, saludos y espero que sirva el comentario para algun compañero que le paso lo mismo.

Carlos Mario Mora Restrepo

student•

Hola. Puede ser un tema de gustos. Como lo indicas es viable, pero personalmente no soy amigo de tener que abrir varias herramientas para hacer algo que saldria listo por comandos.

La opcion que yo uso es usar vscode para editar y tener un proceso en linea de comandos monitoreando el archivo .styl por medio de stylus (paquete de nodejs) para compilarlo cada vez que guarde y enviar el resultado al .css.

saludos

Emmanuel García

student•

¿Cuándo puedo saber que es una buena idea anidar y cuándo no?.

Erik Elyager

student•

Eso te lo da la práctica, como consejo: yo no me pasaría de tres niveles de anidación.

Wilson Orlando Capacho Carmona

student•

También esta ligado a como estructures el contenido

Eduardo Reyes

student•

En Stylus podemos prescindir de las : y ;

Naldo Duran

student•

Jonatan Padilla

student•

Las identaciones nos ayudan a tener el mismo resultado pero con menos lineas codigo.

Harold David Avila Sabogal

student•

Bastante útil

Felipe Hernández

student•

Anidaciones (Nesting) son un recurso muy útil, sin embargo puede causarnos problemas si anidamos muchos elementos ya que puede comprometer la reusabilidad.

Harold David Avila Sabogal

student•

Buen dato

Andrés Campuzano Garzón

student•

Esta interesante para proyectos pequeños/medianos.

Marcial Ambriz

student•

Que recomiendas para los proyectos grandes?

Juan Camilo Moreno

student•

Y para proyectos grandes también te serviría.

Sebastian Gutierrez

student•

Buenos dias

tengo una pregunta alguien sabe en vscode como puedo arreglar este pequeño problemilla

Eric Rodríguez

student•

Tengo el mismo problema, ojala alguien pueda ayudar. Saludos.

Norma Constanza Giraldo Reyes

student•

A mi me pasó lo mismo y estaba usando Prepross para compilar, con lo cual lo único que hay que hacer es quitarle el check a la opción Minify css. Ya que lo que está haciendo es simplificar el css.

Jhonatan David Ibarra Lavado

student•

sigamos :D

Platzi Team

student•

Mala practica mas de tres anidaciones, interesante tip

Andrés David Loaiza Zamudio

student•

Genial las anidaciones

Fernando Galdós

student•

Impresionante

Karen Paola Torres Archbold

student•

Con esto me queda claro que los preprocesadores se parecen mucho entre si pero con unas pequeñas diferencias.

Juan C Felizzola

student•

Para referenciar al padre usamos &

.pseudoelement
	width 300px
	&:before
		content "Hola Mundo!"
	.ie-8 &
		&:before
			content 'Good Bye'

body
	background teal
	font-size .9em	
	.primerhijo
		margin-bottom 24px
	> .primerhijo
		font-size 18px
		
.btn
	border-radius 5px
	&--alert
		background red

Anidaciones

Introducción al curso

Qué aprenderás sobre Stylus

Introducción a Stylus

Compilación e instalación

Cómo funciona Stylus

Sintaxis

Anidaciones

Reto: Instalación con Grunt

Herramientas de Stylus

Variables

Solución del reto y añadir HTML

Cómo escapar caracteres con Stylus

Estructura de CSS y propuesta de reto

Mixins

Mixins Paramétricos

Funciones internas

Condicionales

Directiva for