Condicionales

Resumen

Reto: Inteta hacer un grid para utilizarlo en un proyecto de 12 columnas con la directiva for.
Como en cualquier lenguaje de programación tenemos la direcitva if para condiciones que se cumplen o no.

Yomar Esteban Miranda Sarmiento

student•

Aquí les comparto un resumen que fui realizando a lo largo del curso.

Manuel Sandoya

student•

¡Buenísimo resumen! Gracias por compartirlo.

Mario Alejandro Cortez Salinas

student•

Mil gracias

Hernán Arica

student•

le falto muchísimo al curso!!! para empezar no hay un proyecto construido paso a paso, nos titraron el proyecto ya terminado como sin nada un choclo de codigo.. no me gusto nada...

Joel Bello

student•

Aprendí algunas cosas, pero estoy de acuerdo contigo.

Kevin Naranjo

student•

curso pre procesadores ahí se hace un proyecto con sass para que practiques

Juan C Felizzola

student•

Buen curso! Faltó un ejercicio práctico. A esperar el de Less a ver por cuál me decido.

Jesús Mur Fontanals

student•

La verdad es que si faltó la maquetación de un pequeño sitio para ver en la práctica los conocimientos.

German Luis Guillermo Fica

student•

Tal cual

Gonzalo Pimentel

student•

Bueno no era lo que me esperaba del curso... vengo de tomar el curso de PreProcesadores CSS y encuentro este curso muy vago.... solo aprendí la utilidad del placeholder % y no mucho mas... Aparte me confundía mucho la manera en que el profe organiza su código, también crea como 20 variables de colores lo cuál no es recomendable, a lo mucho deberían a ver 3 o 4 colores...

Sabino Fernández

student•

Me siento igual que tú, me esperaba un curso con un proyecto grande para explorar todas las funcionalidades, posibles errores y soluciones a estos, de SASS. Se habló mucho de PlatziMusic pero nunca la vimos. Totalmente decepcionado con este curso.

Rodrigo Rodriguez

student•

Siento lo mismo que tu , tambien tome el curso de preprocesadores antes de este, y me gusto mas el anterior.

Never Andrés Aparicio Hernandéz

student•

esta mil veces mejor y mas explicado el curso de preprocesadores

Juan Pablo Cifuentes Téllez

student•

En mi opinión, de no haber sido por el curso previo de procesadores, muchos temas hubieran quedado algo confusos, aun así, hay que buscar información externa para acabar de entender los temas.

Fernando Pioli Martínez

student•

En mi opinión, creo que el curso se pareció más a una serie de charlas que a un curso. Es decir, al no exponer un proyecto, todo queda medio como en la teoría. Falto el "Vamos a probar esto juntos" , quedo en un "probalo, te deseo suerte".

Ricardo Ramirez

student•

de acuerdo pagamos por tener esos detalles, ralizar un proyecto, para esa gracia miro en youtube tutoriales y ya.

Sergio Toshio Minei

student•

$background-color: black;

@if $background-color == black {
  p {
    text-color: white;
  }
}
@else {
  p {
    text-color: black;
  }
}

Pueden ver el resumen completo del curso aquí

Luís Hernández

student•

¡Excelente curso! como siempre Wakkos muy claro y con ejemplos sencillos.

En mi opinión la mejor forma de seguir aprendiendo Sass es poniéndolo en practica siempre.

Jhean Pacheco

student•

Para alguien que ya ha usado o tiene conocimientos de Sass el curso es un buen complemento, pero para alguien que esta aprendiendo desde cero debería ser más práctico. Se recomienda cursar primero el curso de Preprocesadores para tener unas mejores bases.

Platzi Team

student•

Este comentario me del compañero FerMP Me identifica totalmente

"En mi opinión, creo que el curso se pareció más a una serie de charlas que a un curso. Es decir, al no exponer un proyecto, todo queda medio como en la teoría. Falto el “Vamos a probar esto juntos” , quedo en un “probalo, te deseo suerte”."

Esta mas abajo por si algo,

Never Andrés Aparicio Hernandéz

student•

creo que los vídeos debieron ser mas extensos con mas ejemplos, toca profundizar mas por otro lado.

Kevin Naranjo

student•

curso pre procesadores ahí se hace un proyecto con sass para que practiques

Miguel Angel Lozano Alvarez

student•

El curso no esta completo, ya estaba nos dieron el proyecto ya hecho no el cual no realizamos, solo nos dio un pequeño repaso del curso de preprosedores. Me quede algo confundido en este curso en preprosesadores entendí mejor

Juan Gaybre Flores

student•

Terminé el curso con las mismas conclusiones.

Karen Gómez

student•

De acuerdo con vos, se hablo de un proyecto y se envió un proyecto que no se trabajo, entonces el contenido se volvió muy vago e inconcluso.

Anthony Damián López Pedrozo

student•

Aquí el reto amigos :D SCSS:

<$columns: 100%/12;

.wrapper {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.row {
  display: flex;
}

@for $i from 1 through 12 {
  .col-#{$i} {
    width: $i * $columns;
  }
}>

CSS:

<.wrapper {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.row {
  display: flex;
}

.col-1 {
  width: 8.3333333333%;
}

.col-2 {
  width: 16.6666666667%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.3333333333%;
}

.col-5 {
  width: 41.6666666667%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.3333333333%;
}

.col-8 {
  width: 66.6666666667%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.3333333333%;
}

.col-11 {
  width: 91.6666666667%;
}

.col-12 {
  width: 100%;
}>

Luis Abdel Rangel Castro

student•

$columns: 100%/12;

.wrapper {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.row {
  display: flex;
}

@for $i from 1 through 12 {
  .col-#{$i} {
    width: round($i * $columns);
  }
}

David Daniel Castillo Nava

student•

Bueno solo agregue unas 12 columnas y sus offset.

@for $i from 1 to 13 {
  .col-#{$i} {
    width: #{($i/12)*100};
  }
  .col-offset-#{$i} {
    margin-left: #{($i/12)*100};
  }
}

Héctor Eduardo López Carballo

student•

Comparto mis apuntes! Repositorio en GitHub

Concuerdo con muchos compañeros: este curso era más de repaso, pero estoy satisfecho con ello. Solo recordé los conceptos que se ven en el Curso de Preprocesadores

Fabricio Micheli

student•

Hola! estuve probando todo esto para el GRID con Sass. Aquí va lo que obtuve:

Primero, el código SASS, comentado:

/* SASS Document */
$grid-space: 3%;
$fila-padding: 20px;
$col-color: #DDD;

/*Container Principal*/
.wrapper{
	width:95%;
	max-width: 1200px;
	margin:0 auto 0 auto;
}

/*Clase para "limpiar" el float de cada fila*/
.fila:after{
	display:block;
	clear:both;
	content:'';
	margin-bottom: $fila-padding;
}

/*El bucle for que crea todos los tipos de columnas y sus anchos correspondientes*/
@for $i from 1 through 12{
	.col-#{$i}{
		background-color: $col-color;
		float:left;
		margin-right: $grid-space;
		box-sizing: border-box;
		width:(100%/(12/$i))-($grid-space*(12-$i)/12);
	}
}

/*Clase que resetea en 0 el margen derecho de la última columna de la fila*/
[class^="col-"]:last-child{
	margin-right:0%;
}

/*Estilo para visualizar mejor los ejemplos del grid*/
[class^="col-"]{
	padding:10px;
	text-align: center;
}`

La salida… CSS:

@charset "UTF-8";
/* SASS Document */
/*Container Principal*/
.wrapper {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto 0 auto; }

/*Clase para "limpiar" el float de cada fila*/
.fila:after {
  display: block;
  clear: both;
  content: '';
  margin-bottom: 20px; }

/*El bucle for que crea todos los tipos de columnas y sus anchos correspondientes*/
.col-1 {
  background-color: #DDD;
  float: left;
  margin-right: 3%;
  box-sizing: border-box;
  width: 5.58333%; }

.col-2 {
  background-color: #DDD;
  float: left;
  margin-right: 3%;
  box-sizing: border-box;
  width: 14.16667%; }

.col-3 {
  background-color: #DDD;
  float: left;
  margin-right: 3%;
  box-sizing: border-box;
  width: 22.75%; }

.col-4 {
  background-color: #DDD;
  float: left;
  margin-right: 3%;
  box-sizing: border-box;
  width: 31.33333%; }

.col-5 {
  background-color: #DDD;
  float: left;
  margin-right: 3%;
  box-sizing: border-box;
  width: 39.91667%; }

.col-6 {
  background-color: #DDD;
  float: left;
  margin-right: 3%;
  box-sizing: border-box;
  width: 48.5%; }

.col-7 {
  background-color: #DDD;
  float: left;
  margin-right: 3%;
  box-sizing: border-box;
  width: 57.08333%; }

.col-8 {
  background-color: #DDD;
  float: left;
  margin-right: 3%;
  box-sizing: border-box;
  width: 65.66667%; }

.col-9 {
  background-color: #DDD;
  float: left;
  margin-right: 3%;
  box-sizing: border-box;
  width: 74.25%; }

.col-10 {
  background-color: #DDD;
  float: left;
  margin-right: 3%;
  box-sizing: border-box;
  width: 82.83333%; }

.col-11 {
  background-color: #DDD;
  float: left;
  margin-right: 3%;
  box-sizing: border-box;
  width: 91.41667%; }

.col-12 {
  background-color: #DDD;
  float: left;
  margin-right: 3%;
  box-sizing: border-box;
  width: 100%; }

/*Clase que resetea en 0 el margen derecho de la ├║ltima columna de la fila*/
[class^="col-"]:last-child {
  margin-right: 0%; }

/*Estilo para visualizar mejor los ejemplos del grid*/
[class^="col-"] {
  padding: 10px;
  text-align: center; }

Espero que les interese! Saludos a todos.

Diego Ortiz

student•

¿Ese formato [class^="col-"] es para referirse a todas las clases que comiencen col- ? ¿Es css puro? ¿Hay algún curso aquí que lo mencione?

Diego Ortiz

student•

Ya que esta parte del código es común a todas las clases:

background-color: $col-color;
float:left;
margin-right: $grid-space;
box-sizing: border-box;

Lo podríamos optimizar con un placeholder con algo como:

%col {
	background-color: $col-color;
	float:left;
	margin-right: $grid-space;
	box-sizing: border-box;
}

Y más adelante en la directiva @for hacer un @extend %col;

Camilo Alexander Velandia Velandia

student•

esta bien el curso, pero deberia haber un proyectos mas interesante y practico

Kevin Naranjo

student•

curso pre procesadores ahí se hace un proyecto con sass para que practiques

Carlos Morales

student•

El curso estuvo flojo en comparación de otros que he tomado, el profe explico muy bien el contenido, el problema fue la estructura de este, el curso debe mejorarse ya que como bien explica el profesor, es una herramienta muy poderosa que requiere practica, haber tenido un proyecto para practicar y desarrollar el contenido hubiese sido maravilloso, tal cual hacen en otras clases.

Roger Carlos Ariel Alba

student•

Hola Carlos,

Gracias por el feedback, ¿sabías que tenemos un curso con todos los preprocesadores?

Puedes verlo aquí. Con un proyecto para cada uno de los preprocesadores e integrado al final.

Saludos

Carlos Morales

student•

Hola Carlos,

Gracias por el dato, saludos!!

Felipe Carrión

student•

Quedo con la impresión que este curso fue rescatado de algún curso mas largo. Los conceptos quedan en el aire y no se ve aplicado nunca al proyecto del que habla. Lo tome mas como un curso de repaso de lo que se ve en el curso de preprocesadores(lo recomiendo un monton)

Christian Velázquez

student•

Gracias al profesor Daniel Martínez, por el curso. Efectivamente faltó una estructura (comprender mejor). Para ser honesto, aprendí mucho en el curso de Preprocesadores; este curso me ayudó a mejorar, comprender algunos "detalles".

<.wrapper {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.row {
  display: flex;
}

.col-1 {
  width: 8.3333333333%;
}

.col-2 {
  width: 16.6666666667%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.3333333333%;
}

.col-5 {
  width: 41.6666666667%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.3333333333%;
}

.col-8 {
  width: 66.6666666667%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.3333333333%;
}

.col-11 {
  width: 91.6666666667%;
}

.col-12 {
  width: 100%;
}>

/* SASS Document */
$grid-space: 3%;
$fila-padding: 20px;
$col-color: #DDD;

/*Container Principal*/
.wrapper{
	width:95%;
	max-width: 1200px;
	margin:0 auto 0 auto;
}

/*Clase para "limpiar" el float de cada fila*/
.fila:after{
	display:block;
	clear:both;
	content:'';
	margin-bottom: $fila-padding;
}

/*El bucle for que crea todos los tipos de columnas y sus anchos correspondientes*/
@for $i from 1 through 12{
	.col-#{$i}{
		background-color: $col-color;
		float:left;
		margin-right: $grid-space;
		box-sizing: border-box;
		width:(100%/(12/$i))-($grid-space*(12-$i)/12);
	}
}

/*Clase que resetea en 0 el margen derecho de la última columna de la fila*/
[class^="col-"]:last-child{
	margin-right:0%;
}

/*Estilo para visualizar mejor los ejemplos del grid*/
[class^="col-"]{
	padding:10px;
	text-align: center;
}`

@charset "UTF-8";
/* SASS Document */
/*Container Principal*/
.wrapper {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto 0 auto; }

/*Clase para "limpiar" el float de cada fila*/
.fila:after {
  display: block;
  clear: both;
  content: '';
  margin-bottom: 20px; }

/*El bucle for que crea todos los tipos de columnas y sus anchos correspondientes*/
.col-1 {
  background-color: #DDD;
  float: left;
  margin-right: 3%;
  box-sizing: border-box;
  width: 5.58333%; }

.col-2 {
  background-color: #DDD;
  float: left;
  margin-right: 3%;
  box-sizing: border-box;
  width: 14.16667%; }

.col-3 {
  background-color: #DDD;
  float: left;
  margin-right: 3%;
  box-sizing: border-box;
  width: 22.75%; }

.col-4 {
  background-color: #DDD;
  float: left;
  margin-right: 3%;
  box-sizing: border-box;
  width: 31.33333%; }

.col-5 {
  background-color: #DDD;
  float: left;
  margin-right: 3%;
  box-sizing: border-box;
  width: 39.91667%; }

.col-6 {
  background-color: #DDD;
  float: left;
  margin-right: 3%;
  box-sizing: border-box;
  width: 48.5%; }

.col-7 {
  background-color: #DDD;
  float: left;
  margin-right: 3%;
  box-sizing: border-box;
  width: 57.08333%; }

.col-8 {
  background-color: #DDD;
  float: left;
  margin-right: 3%;
  box-sizing: border-box;
  width: 65.66667%; }

.col-9 {
  background-color: #DDD;
  float: left;
  margin-right: 3%;
  box-sizing: border-box;
  width: 74.25%; }

.col-10 {
  background-color: #DDD;
  float: left;
  margin-right: 3%;
  box-sizing: border-box;
  width: 82.83333%; }

.col-11 {
  background-color: #DDD;
  float: left;
  margin-right: 3%;
  box-sizing: border-box;
  width: 91.41667%; }

.col-12 {
  background-color: #DDD;
  float: left;
  margin-right: 3%;
  box-sizing: border-box;
  width: 100%; }

/*Clase que resetea en 0 el margen derecho de la ├║ltima columna de la fila*/
[class^="col-"]:last-child {
  margin-right: 0%; }

/*Estilo para visualizar mejor los ejemplos del grid*/
[class^="col-"] {
  padding: 10px;
  text-align: center; }

Condicionales

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