A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Introducci贸n a Stylus

30/42
Recursos

Es el preprocesador CSS m谩s reciente de los tres. Fue creado por TJ Holowaychuk (ex programador de Node.js) y escrito en JADE y Node.js.

Aportes 50

Preguntas 8

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

馃搶Aqu铆 les dejo una extensi贸n de Vscode que colorea la sintaxis de Stylus
https://marketplace.visualstudio.com/items?itemName=sysoev.language-stylus
si eres como yo que para no confundirte necesitas que la sintaxis este coloreada entonces te va a encantar esta extensi贸n

Para los que quieran compilar desde la terminal hacemos lo siguiente:

<h3>Instalar Stylus en la terminal</h3>
npm install -g stylus
<h3>Compilar de Stylus a Css [deben estar en la carpeta /css]</h3>
stylus -w ejercicio-stylus.styl

-w hace que espere los cambios para poder compilar automaticamente.

T煤 no eliges al preprocesador. El preprocesador te elige a ti. :鈥)

la verdad es que uno se acostumbra a los corchetes y las comas

Excelente curso, lo estuve esperando por mucho tiempo, finalmente esta aqui, pero solo por hacer la aclaracion, en el minuto 3:20 habla sobre la facilidad que tiene stylus de no necesitar abrir y cerrar los bloques de codigo y que lo diferencia de Less o Sass. Haciendo hincapie en que estos dos no tienen esta opcion, realmente no se de Less, lo he utilizado poco, pero Sass por su parte si tiene esta facilidad, y viene realmente a ser SASS como tal, y no SCSS.

Para quienes usen VSCode, deben instalar el plugin de stylus para que todo vaya genial.

Dato curioso por si les sirve 馃槃

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 este post anterior.

Quiz谩 es la costumbre pero se me hace mas legible y amigable ver todo el bloque de CSS con sus llaves corchetes etc

Diferencio mucho mejor un bloque de otro. En un archivo mucho mas largo solo con la identaci贸n me cuesta mas.

Por ahora creo que me quedo con stylus, aunque va a tocar cambiar el chip de los {] y ; mientras iba escribiendo el c贸digo los pon铆a autom谩ticamente, inclusive le pas贸 al profesor en algunas l铆neas jajaja.

No puedo ver el c贸digo tan pobre jaja. No me gusta sin corchetes y sin punto y coma

Principiantes (yo soy uno de ellos 馃槂):

viendo less : Me gusta less鈥
viendo sass: ya no me gusta less, mejor usare sass鈥
viendo stylus: ya no me gusta less ni sass, ahora me gusta stylus鈥

En VSCode yo instal茅 esta extensi贸n para tener colores en nuestro c贸digo de Stylus

Me gusta la sintaxis de este preprocesador

Aqui les dejo documentaci贸n sobre Stylus
https://stylus-lang.com/

Me gusta m谩s Sass; y tambi茅n me gusta usar corchetes y punto y coma xD
Como al profesor que no deja de usarlos ahahhah

En stylus no es necesario la puntuaci贸

Tambien los 鈥:鈥 dos puntos son opcionales, ej:
width 100px

la extencion del archivo de stylus es .styl adem谩s su sintaxis es diferente a los dem谩s pre-procesadores porque no utiliza llaves ni punto y coma. Hay que poner atenci贸n a la identaci贸n del archivo.

Wow siento mucho m谩s ordenado trabajar con esta herramienta, y la verdad se mira mucho m谩s limpio el c贸digo.

Que interesante se ve Stylus, para mi SASS sigue estando en mi TOP.

Stylus otro preprocesador de CSS, m谩s reciente segun la fecha de lanzamiento de este curso.
Me parece interesante que rompa los esquemas de usar {} y ;.
Voy a seguir estudiandolo para ver hacia d贸nde crece y que ventajas tiene esa divergencia.

cuando empece este curso no me gustaban los preprocesadores pero tengo que admitir que son geniales

Wow esta sintaxis me recuerda a python, y es preferencia personal pero con eso ya se gano un lugar en mi coraz贸n 鉂

esta muy interesante Stylus

Qu茅 simpleza y belleza la de stylus.

Personalmente me gusta usar los corchetes y el punto y como me parece que es una forma de establecer l铆mites y de que yo tenga m谩s control sobre mi c贸digo

Si agregan

outline: none

al final de &__input, no les va a salir el cuadrado azul to feo del input 馃槂

Se que apenas es la primera clase, pero yo ya casi acabo con Sass
.

Diferencias de Stylus con Less y Sass

  • En stylus no son necesarios los punto y coma ;
  • Tampoco son necesarios las llaves {}

.

Similitudes de stylus con los otros preprocesadores

  • Las anidaciones se hacen igual, con el ampersand &

En algunas secciones de los c贸digos de Pug est谩n mal seccionados, deben reemplazar de la siguiente manera:

  • ejercicios-stylus.pug
extend head.pug
block body
		.buscador: form: input(type="text" placeholder="Playstation" class="buscador__input")
		header.encabezado--con-filtros
			h2 20 Resultados para "Playstation"
			.filtros
				span Filtrar Por
				a(href="#" class="fa fa-th-large")
				a(href="#" class="fa fa-bars")
		main
			section.contenido
				+caja("apex.jpg", "Video", "Apex Legends Temporada 2: un nuevo trailer muestra cambios al mapa", "Dos nuevos trailers de Apex Legends muestran lo que nos espera en la Temporada 2 del battle royale de Respawn.")
				+caja("crash.jpg", "Video", "Ya salio la rese帽a de Crash Team Racing Nitro Fueled", "Veinte a帽os despu茅s del lanzamiento del original, Crash Team Racing ha recibido un remake total que logra mantener todos los aspectos originales.")
				+caja("ff.jpg", "Video", "Final Fantasy XIV recibir谩 una serie live-action en televisi贸n ", "Final Fantasy XIV Online recibir谩 una adaptaci贸n aTV de parte de Square Enix con Sony Pictures Television y Hivemind.")
  • head.pug
mixin caja(imagen, category, title, summary)
	.caja
		a(href="#",class="caja__imagen"): img(src="../images/"+imagen)
		.caja__contenido
			span.caja__categoria=category
			h3=title
			p=summary
		+estadistica

mixin estadistica
	.estadistica--articulos: ul
		li
			i.fas.fa-share
			span 275
		li
			i.fas.fa-eye
			span 275
		li
			i.fas.fa-comment-alt
			span 12

doctype html
html
	head
		title PlatziGames
		meta(charset='utf-8')
		meta(http-equiv='X-UA-Compatible', content='IE=edge')
		meta(name='viewport', content='width=device-width, maximum-scale=1.0, user-scalable=no')
		link(rel="stylesheet",href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Oswald:400,500,600,700&display=swap" )
		link(rel='stylesheet', href='../css/ejercicio-stylus.css')
		script(src='https://kit.fontawesome.com/552ebddad2.js')
	body
		block body

Por si a alguno de ustedes les sudece el siguiente error:

La soluci贸n es, como describe el error, con el tema de la indentaci贸n. En mi caso escrib铆 un par de l铆neas donde voy guardando mis apuntes, y se me hizo f谩cil copiar y pegar ese pedazo de c贸digo. S贸lo tuve que volver a indentar correctamente esas dos l铆neas que hab铆a hecho copy & paste y listo.

Me hab铆a enganchado con less, pero stylus me hace sentir muy c贸modo con su sintaxis

Si pasamos los valores de las propiedades sin : (dos puntos), css tambi茅n entiendo lo que stylus quiere decir鈥

*
  box-sizing border-box
  
body
  margin 0
  font-family 'Lato', sans-serif

.buscador
  width 100%
  height 250px
  padding 100px
  background-image url('../images/cover.jpg')
  background-size cover
  text-align center
  &__input
    width 75%
    height 60px
    padding 20px
    border none
    border-radius 30px
    font-size 25px

Perfecto 馃槃 vamos bien!

interesante stylus 馃槃

Para iniciar, articulo b谩sico sobre Stylus de Platzi: https://platzi.com/blog/como-instalar-stylus/

Vaya, cada ves la ponen mas complicada entre cual elegir, claro que hay que conocer los tres y manejarlos lo mejor posible, gran clase, vamos

Dilema entre stylus y sass jaja

Como en los otros pre-procesadores aqu铆 tambi茅n se puede trabajar con anidaciones. se escribe as铆: &__input y todos los estilos que pertenecen al input se colocan identados

Acostumbrarse al punto y coma(馃槈 en este va a ser muy complejo jajaja

Ya no se cual escoger todas est谩n interesantes.

Ahora cual escojo jaja

stylus no necesita de 鈥:鈥 ni de ; 馃槃

*
  box-sizing border-box

body 
  margin 0
  font-family 'lato', sans-sereif

.buscador
  width 100%
  height:250px
  padding    100px```

鉂 Enamorado de Stylus.

no me esta gustando mucho stylus, creo que prefiero SASS

Iniciando con Stylus

En la anidacion, no es necesario que usemos el &__, podemos hacerlo asi:

.buscador
	width: 100%
	height: 250px
	padding: 100px
	background-image: url("../images/cover.jpg")
	background-size: cover
	text-align: center
	input 
		width: 75%
		height: 60px
		padding: 20px
		border: none
		border-radius: 30px
		font-size: 25px```

No se ve dif铆cil, ya voy a comenzar con el proyecto. Hasta ahora no veo dif铆cil los procesadores de Css. 鉁咅煉湆馃

Aunque amo python me siento raro escribiendo css sin los parentesis jajaj