Mixins Paramétricos

Clase 9 de 13 • Curso de Less 2018

Teofilo Rosales Gama

student•

falsa alarma logre solucionarlo con un plugin Easy LESS
para que compile en la carpeta css tube que hacer una configuracion de trabajo en un settings.json aqui les mando la conf:

{
    "less.compile": {
        "out": "../\\css\\",
        "sourceMap": true
    }

}

Nelson Alayón

student•

Yo creo que a Daniel Martinez le ha tocado trabajar con diseñadores fastidiosos

Daniel Valderrama Mendoza

student•

que falla :(, es por eso que los Sistemas de Diseño deberían tener mayor importancia

Fernando Galdós

student•

Intenso

Teofilo Rosales Gama

student•

cuando intento compilar el padding me sale :

.container {
  padding: 12px * 2;
}

estos son mis archivos:

variables.less

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

@color-border: @color-brand;

@color-grey: #737373;
@buttonbg: @color-brand;
@buttontxt: #ffffff;

@color-alert: rgb(210,0,0);
//constantes
@page-max-width: 2014px;
@padding: 12px;
@superpadding: @padding * 2;

layout.less

.container {
  padding: @superpadding;
}

styles.less

@import "lib/_variables.less";
@import "lib/_mixins.less";

@import "base/_tipografia.less";
@import "base/_botones.less";

@import "layout/_layout.less";

uso el progrma koala

Angélica Rocha

student•

genial el poder de los Mixins :D

Jeremy Palomino

student•

el mixin .max-width lo hacia así:

.max-width(@porcent: 100%) {
	width: @porcent;
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem;
}

section {
	.max-width(60%)
}

Jose Daniel Barría Reyes

student•

Para mejor organizacion, se crea un parcial de mixins

Jose Daniel Barría Reyes

student•

ejemplo de mixin que me gusto
_mixin.less:

.max-width(@maxwidth:@page-max-width){
//declaramos el parametro maxwidth con page-max-width por defecto
	max-width: @max-width;
}

_layout.less:

.container--landing{
    .max-width(80%);
}

_variables.less :

@page-max-width: 1024;

Harold David Avila Sabogal

student•

Muchas gracias

Andrés David Loaiza Zamudio

student•

Tema importante de este preprocesador!

Raycris Maldonado

student•

El profesor se equivoco en la parte de la creacion del Max-width de la variable. Por favor reemplazarla por @Max-width: 1024; en vez de poner @Max-width: 2014;

Gutierrez Diego

student•

Lo veo algo complicado la verdad, imagino que es cuestión de práctica.

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

@color-border: @color-brand;

@color-grey: #737373;
@buttonbg: @color-brand;
@buttontxt: #ffffff;

@color-alert: rgb(210,0,0);
//constantes
@page-max-width: 2014px;
@padding: 12px;
@superpadding: @padding * 2;

Mixins Paramétricos

Cómo funciona Less

¿Dónde aprender CSS con preprocesadores?

Qué aprendrás sobre preprocesadores

Qué aprenderás sobre Less

Instalación de Less

Tutorial y Reto

Variables: Definición y ejemplos

Anidaciones

Mixins

Mixins Paramétricos

Solución del reto

Funciones de Less

Ejemplo de funciones con Less

Controles de Flujo