Espaciado

Lo bonito de este curso es que soy un bebe de luz🤗

Increíble esta clase!

MAS PARECE UN CURSO DE SASS

Me parece que hubiera sido mejor mostrar cómo se genera el código css para ver lo que explicaba Rulótico. Aquí muestro la comparación entre el código SASS (son 56 líneas) y el CSS (son 204)
SASS:

@import "../tokens/spacing.scss";

@mixin constructor($num) {
    padding: $num;
    &_margin{
        margin: $num;
    }
    &_top{
        padding-top: $num;
        &_margin{
            margin-top: $num;
        }
    }
    &_bottom{
        padding-top: $num;
        &_margin{
            margin-bottom: $num;
        }
    }
    &_left{
        padding-top: $num;
        &_margin{
            margin-left: $num;
        }
    }
    &_right{
        padding-top: $num;
        &_margin{
            margin-right: $num;
        }
    }
}

.spaced{
    padding: $space;
}

.space{
    @include constructor($space)
}

.space_2{
    @include constructor($space*2)
}

.space_3{
    @include constructor($space*3)
}

.space_4{
    @include constructor($space*4)
}

.space_5{
    @include constructor($space*5)
}

css:

.spaced {
  padding: 10px;
}

.space {
  padding: 10px;
}

.space_margin {
  margin: 10px;
}

.space_top {
  padding-top: 10px;
}

.space_top_margin {
  margin-top: 10px;
}

.space_bottom {
  padding-top: 10px;
}

.space_bottom_margin {
  margin-bottom: 10px;
}

.space_left {
  padding-top: 10px;
}

.space_left_margin {
  margin-left: 10px;
}

.space_right {
  padding-top: 10px;
}

.space_right_margin {
  margin-right: 10px;
}

.space_2 {
  padding: 20px;
}

.space_2_margin {
  margin: 20px;
}

.space_2_top {
  padding-top: 20px;
}

.space_2_top_margin {
  margin-top: 20px;
}

.space_2_bottom {
  padding-top: 20px;
}

.space_2_bottom_margin {
  margin-bottom: 20px;
}

.space_2_left {
  padding-top: 20px;
}

.space_2_left_margin {
  margin-left: 20px;
}

.space_2_right {
  padding-top: 20px;
}

.space_2_right_margin {
  margin-right: 20px;
}

.space_3 {
  padding: 30px;
}

.space_3_margin {
  margin: 30px;
}

.space_3_top {
  padding-top: 30px;
}

.space_3_top_margin {
  margin-top: 30px;
}

.space_3_bottom {
  padding-top: 30px;
}

.space_3_bottom_margin {
  margin-bottom: 30px;
}

.space_3_left {
  padding-top: 30px;
}

.space_3_left_margin {
  margin-left: 30px;
}

.space_3_right {
  padding-top: 30px;
}

.space_3_right_margin {
  margin-right: 30px;
}

.space_4 {
  padding: 40px;
}

.space_4_margin {
  margin: 40px;
}

.space_4_top {
  padding-top: 40px;
}

.space_4_top_margin {
  margin-top: 40px;
}

.space_4_bottom {
  padding-top: 40px;
}

.space_4_bottom_margin {
  margin-bottom: 40px;
}

.space_4_left {
  padding-top: 40px;
}

.space_4_left_margin {
  margin-left: 40px;
}

.space_4_right {
  padding-top: 40px;
}

.space_4_right_margin {
  margin-right: 40px;
}

.space_5 {
  padding: 50px;
}

.space_5_margin {
  margin: 50px;
}

.space_5_top {
  padding-top: 50px;
}

.space_5_top_margin {
  margin-top: 50px;
}

.space_5_bottom {
  padding-top: 50px;
}

.space_5_bottom_margin {
  margin-bottom: 50px;
}

.space_5_left {
  padding-top: 50px;
}

.space_5_left_margin {
  margin-left: 50px;
}

.space_5_right {
  padding-top: 50px;
}

.space_5_right_margin {
  margin-right: 50px;
}
/*# sourceMappingURL=spacing.css.map */

Me parece un curso muy completo, el saber separar por carpetas los estilos al principio es muy confuso e incluso definir nombres y reglas por default.

Esto combinado con el curso de preprocesadores es MAGIA

SUPER CLASE

Sistema de diseño es un conjunto de reglas a utilizar para un producto o proyecto que puede cambiar.

Muy buena aplicación de los mixins

Si de pronto alguien se siente perdido en este punto del curso, recomendaría tomar los curso de preprocesadores y sass, les ayudara bastante

Muy flayera esta clase, después del curso de Preprocesadores Css elegí Sass también hice el curso y ando estudiandolo bastante, me gusto esta manera de aplicar los mixins.

Pienso que hubiera sido más rápido compilar ese código y mostrar como quedo en css jajaja y muy recomendable ver el curso de Sass para entender los mixin, mandar parámetros y la diferencia con las funciones.

Un sistema de diseño es un conjunto de reglas. Eso si se me quedo bien grabado en la mente.

Que bueno haber llevado el curso de Preprocesadores y Sass antes de este curso sino fácil andaría un poco perdido.

f