PDF de programación - Seminario taller de LESS

<<>>
Imágen de pdf Seminario taller de LESS

Seminario taller de LESSgráfica de visualizaciones

Publicado el 11 de Junio del 2019
544 visualizaciones desde el 11 de Junio del 2019
1,3 MB
17 paginas
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
  • Links de descarga
http://lwp-l.com/pdf16087

Comentarios de: Seminario taller de LESS (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad