PDF de programación - Seminario taller de LESS

seminario taller

de

con el soporte de

este documento está publicado bajo licencia

puedes compartirlo, hacer obras derivadas, reconocer la

autoría y compartir bajo la misma licencia

http://creativecommons.org/licenses/by-sa/3.0/es/

copyleftpresentación

introducción

variables

scope

mixins

anidación

operaciones

comentarios

importar

sabores

ejercicios

presentación

quién soy

kitiplá + mecus

metodología

presentación

introducción

variables

scope

mixins

anidación

operaciones

comentarios

importar

sabores

ejercicios

introducción

qué es less

extensión de css

sintaxis como css

exige “compilación”

introducción

qué no es less

lenguaje de programación

entorno de desarrollo

presentación

introducción

variables

scope

mixins

anidación

operaciones

comentarios

importar

sabores

ejercicios

lenguaje
variables

presentación

introducción

variables

scope

mixins

anidación

operaciones

comentarios

importar

sabores

ejercicios

@azul01:
 #5B83AD;

#header{
 color:
 @azul01;}

Resultado:

#header
 {
 color:
 #5B83AD;
 }

lenguaje
scope

//
 <
 gris

@var:
 #ffffff;

@var:
 #dcdcdc;

#header{
 

 
 
 
 
 

 
 
 
 
 #titulo{

 
 
 
 
 
 
 
 
 
 
 

 
 
 
 
 }
}

color:
 @var;

presentación

introducción

variables

scope

mixins

anidación

operaciones

comentarios

importar

sabores

ejercicios

presentación

introducción

variables

scope

mixins

anidación

operaciones

comentarios

importar

sabores

ejercicios

lenguaje
mixins

“...clase que ofrece cierta
funcionalidad para ser heredada
por una subclase...”

http://es.wikipedia.org/wiki/Mixin

presentación

introducción

variables

scope

mixins

anidación

operaciones

comentarios

importar

sabores

ejercicios

lenguaje
mixins

.radius(@radius:
 3px){

 
 
 border-­‐radius:@radius;

 
 
 -­‐khtml-­‐border-­‐radius:@radius;

 
 
 -­‐webkit-­‐border-­‐radius:
 @radius;

 
 
 -­‐moz-­‐border-­‐radius:
 @radius;
}

#caja{
 .radius(5px);
 }

presentación

introducción

variables

scope

mixins

anidación

operaciones

comentarios

importar

sabores

ejercicios

lenguaje
anidación

#sidebar{

 
 padding-­‐top:
 0px;

 

 
 ul
 li{
 width:100%;
 list-­‐style:
 none;


 
 
 
 
 &:hover{cursor:pointer;}

 
 
 
 
 a{color:#000;}

 
 }
 

 
 
 
 
 

 
 a{

 
 
 
 
 color:
 blue;

 
 
 text-­‐decoration:
 none;

  }
}

lenguaje
operaciones

podemos operar con números,
variables y colores

presentación

introducción

variables

scope

mixins

anidación

operaciones

comentarios

importar

sabores

ejercicios

presentación

introducción

variables

scope

mixins

anidación

operaciones

comentarios

importar

sabores

ejercicios

lenguaje
operaciones

@base:
 5%;
@relleno:
 @base
 *
 2;
@otro:
 @base
 +
 @relleno;
@base-­‐color:
 #h1h1h1;

color:
 #888
 /
 4;
background-­‐color:
 @base-­‐color
 +
 #111;
height:
 100%
 /
 2
 +
 @relleno;

@ancho:
 200px
 +
 20; //
 Resultado:
 220px
 

lenguaje
comentarios

/*
 comentario
 en
 
bloque,
 cuando
 usamos
 más
 de
 una
 
línea
 de
 texto*/
 

color:#fff;
 //
 comentario
 en
 línea

presentación

introducción

variables

scope

mixins

anidación

operaciones

comentarios

importar

sabores

ejercicios

lenguaje
importar

@import
 “libreria01”;
 //
 archivo
 less

@import
 “estilos.css”;
 //
 archivo
 css

presentación

introducción

variables

scope

mixins

anidación

operaciones

comentarios

importar

sabores

ejercicios

lenguaje
sabores

ruby / ruby-gem
php
javascript
osx
java
wordpress
symphony
.net

http://lesscss.org
http://leafo.net/lessphp
http://code.google.com/p/lesscss
http://incident57.com/less
http://code.google.com/p/maven-less-plugin
http://wordpress.org/extend/plugins/wp-less/
http://www.symfony-project.org/plugins/sgLESSPlugin
http://www.dotlesscss.org/

presentación

introducción

variables

scope

mixins

anidación

operaciones

comentarios

importar

sabores

ejercicios

ejercicios
configuración

<link
 rel="stylesheet/less"
 href="style.less"
 />
 
 

<script
 src="http://lesscss.googlecode.com/files/
less-­‐1.0.35.min.js"></script>
 
 

presentación

introducción

variables

scope

mixins

anidación

operaciones

comentarios

importar

sabores

ejercicios

presentación

introducción

variables

scope

mixins

anidación

operaciones

comentarios

importar

sabores

ejercicios

ejercicios
en faena

crear una capa y modificar sus
propiedades con variables

crear mixin y modificar bordes
de la capa

trabajar anidación

trabajar operaciones en layaout

trabajar importación