Ir al contenido principal

Como usar LESS

Imagen
De
LESS sirve para hacer código CSS de una manera mas divertida.
Para instalarlo sólo debemos descargar el archivo less de su página web http://lesscss.org/

Instalación

<link rel="stylesheet/less" type="text/css" href="mi_archivo.less" />
<script src="less.js" type="text/javascript"></script>
Importante:
  • La etiqueta LINK tiene como atributo rel a "stylesheet/less"
  • Nuestro archivo LESS debe tener como formato less (mi_archivo.less).

Variables

Podemos usar variables para guardar datos que vamos a usar después.
El codigo less que vamos a ver a continuación se compila y se transforma automaticamente en el codigo css que se muestra en el cuadro del lado derecho.

Codigo lessCodigo css
@color : #ddd;
@medida : 2px;

.cuadro{
    background : @color;
    border: @medida solid black;
}
==> 
.cuadro{
    background : #ddd;
    border: 2px solid black;
}
Usted dirá ¿Para que usar Less si voy a escribir más código? , bueno te diré que usar less para un código tan pequeño como el cuadro anterior no tiene sentido. Less debería usarse para códigos mas grandes para que así el mantenimiento se haga de manera sencilla tan sólo cambiando las variables, por ejemplo si tenemos la variable @color : #fda y la usamos al menos unas 50 veces en nuestro código, sólo tendríamos que cambiar el valor de la variable @color a por ejemplo @color : #efd y se cambiarán automáticamente también las 50 veces que uso la variable @color


Mixins

Podemos usar clases enteras dentro de otras clases sólo llamando a esa clase que queramos utilizar, también podemos usarla como funciones que lleven argumentos tal como veremos a continuación.

Ejemplo 1: Podemos usar clases en otras clases

Código Less que Ud. escribeCodigo Css que se genera
.franz{
    background  : red;
    border      : 1px solid black;
    color       : green;
    display     : block;
    font-size   : 18px;
}

.cuadro{
    height  : 60px;
    .franz; 
}

.escritorio{
    height  : 200px;
    .franz; 
}









.franz{
    background  : red;
    border      : 1px solid black;
    color       : green;
    display     : block;
    font-size   : 18px;
}

.cuadro{
    height  : 60px;
    background  : red;
    border      : 1px solid black;
    color       : green;
    display     : block;
    font-size   : 18px; 
}

.escritorio{
    height  : 200px;
    background  : red;
    border      : 1px solid black;
    color       : green;
    display     : block;
    font-size   : 18px;
}

Ejemplo 2 : Podemos tambien usar clases con argumentos.


Código Less que Ud. escribe Codigo Css que se genera 
.redondeado (@radius: 4px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

.silla{
    background : red;
    .redondeado;
}

.mesa{
    background : green;
    .redondeado(6px);
}
 
.silla{
    background : red;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}

.mesa{
    background : green;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
}
wrgwrg

Nested Rules

Podemos crear estilos a un selector hijo simplemente creando los estilos dentro del selector padre.

Código Less que Ud. EscribeCódigo Css que se genera
#padre{
    label{
        font-size : 16px;
    }
    span{
        text-align : center;
        a{
            color : red;
            &:hover {
                color : orange 
            }
        }
    }
}
 
#padre label{
    font-size : 16px;
}

#padre span{
    font-size : text-align : center;
}

#padre span a{
    text-decoration : none;
}

#padre span a:hover{
    color : orange
}

Comentarios

Publicar un comentario

Entradas populares de este blog

Validar campo de texto sólo letras, números con javascript

De
En algunos casos necesitaremos que el usuario ingrese solamente letras en un campo de texto, impidiendo así el ingreso de números y caracteres especiales. Gracias a Javascript y HTML esto puede ser posible.   Método 1:  Podemos utilizar el atributo onkeypress devolviendo el valor de false, si es que se escribe un caracter distinto a la cadena que hemos definido (para el ejemplo es " áéíóúabcdefghijklmnñopqrstuvwxyz").   Método 2: Pasos a seguir: Crear una lista con todas las letras permitidas (a,b,c ... etc). Crear una lista de teclas especiales tales como (BackSpace , flecha izquierda, flecha derecha, Supr) estas son teclas permitidas aparte de las teclas permitidas en el primer paso.     Entendiendo el código En la línea 4 la sentencia String.fromCharCode(key) obteniene el caracter presionado por el usuario que añadiendo la sentencia toLowerCase() convertiríamos la letra a minúscula. Con esto guardamos la letra presionada por el usuario en la variabl
109 comentarios
Read more »

La propiedad Disabled en Javascript

De
Como atributo de un elemento HTML Ejemplo: "Solo añadiendo el atributo disabled". < input type = "button" value = "Desactivado" disabled /> < input type = "text" disabled /> < input type = "button" value = "Boton normal" /> Demostración: El botón y el campo de texto están desactivados Manipulando Disabled usando Javascript Ejemplo 1: Utilizando el "id" del campo de texto en este caso "miText". < script type = "text/javascript" > function Desactivar () { document . getElementById ( 'miText' ) . disabled = true ; } < /script > < input type = "button" value = "Desactivar" onclick = "Desactivar()" / > < input type = "text" id = "miText" / > Demostración: Dándole clic al botón se desactiva el campo de texto. Ejemplo 2:Utilizando el event
2 comentarios
Read more »

Validar campo de texto con javascript

De
Obligar al usuario a introducir un valor en un campo de texto perteneciente a un formulario se puede hacer de la siguiente manera con javascript. Código < script type = "text/javascript" > function validar () { //obteniendo el valor que se puso en campo text del formulario miCampoTexto = document . getElementById ( "miCampo" ) . value ; //la condición if ( miCampoTexto . length == 0 ) { return false ; } return true ; } </ script > < form action = "mipagina.php" onsubmit = "return validar()" > < input type = "text" id = " miCampo " name = "miCampo" > < br > < input type = "submit" value = "Enviar" > </ form > miCampoTexto.length -> indica el número de caracteres del texto introducido En esta validación los usuarios deben llenar los campos
8 comentarios
Read more »