Quantcast
Channel: feelRiviera
Viewing all articles
Browse latest Browse all 41

Less: Lenguaje CSS dinamico

$
0
0

Hace unos días pensaba una forma de reducir redundancias a la hora de escribir CSS buscando la compatibilidad con multiples navegadores, como esquematizar etiquetas a modo de funciones y como bien dicen cuando piensas algo es muy factible que alguien ya lo haya hecho y para muestra un botón

.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
@val: @x @y @blur rgba(0, 0, 0, @alpha);

box-shadow: @val;
-webkit-box-shadow: @val;
-moz-box-shadow: @val;
}
.box { @base: #f938ab;
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0, 0, 5px, 0.4) }
}

y tan simple como agregar un par de etiquetas en el header

<link rel=“stylesheet/less” type=“text/css” href=“styles.less”>
<script src=“less.js” type=“text/javascript”></script>

Podemos olvidarnos de tener que hacer mil clases y despues anidarlas en cada class.


Viewing all articles
Browse latest Browse all 41

Trending Articles