Ola, somos Arume

Desenvolvemos páxinas web, aplicacións para móbiles, capas de realidade aumentada e aplicacións para Facebook. Apaixónanos a informática e somos uns perfeccionistas incurables; por eso nos nosos proxectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Rexistrarse. Esqueceches o teu contrasinal?

Etiquetas

Saltar as etiquetas

Subscríbete ás RSS

Estás en:

LESS: Usando CSS dinámico

17 Xan 2012 por Jose

Comentarios: 3

LESS

Cando CSS naceu só era unha ferramenta para modificar algúns estilos básicos nunha páxina web. Co tempo os programadores atoparon unha potente ferramenta nesta linguaxe, optimizando o seu uso non só para cambiar estilos senón para ser capaz de controlar toda a parte visual dunha páxina web en calquera dispositivo que nos atopemos. Agora foron un paso máis aló, creando ferramentas de pre-procesado de CSS, que consiste en estendelo para usar variables, regras aniñadas, mixins ou funcións. Entre estas ferramentas atópanse LESS ou SASS.

Neste artigo imos falar de LESS, xa que aínda que as características de ambos son similares, a sintaxe de LESS é máis parecida ó CSS; ademais aínda que ambos se escribiron en Ruby e necesitan instalarse no servidor para ser procesados, os programadores de LESS sacaron Less.js, que se executa no lado do navegador e que só necesita incluír o enlace ó código LESS.

Como empezar

Para poder usar esta ferramenta debemos enlazar o ficheiro con extensión .less e pondo o atributo rel como stylesheet/less:

<link rel='stylesheet/less' type='text/css' href='styles.less' />

Debemos incluír o script descargado less.js:

<script src='less.js' type='text/javascript'></script>

O ficheiro .less debe estar incluído sempre antes que o script.

Variables

Permite crear unha única definición dun valor, e poder aplicalo en calquera regra do documento. Unha variable defínese co símbolo @.

@color-web: #f6f1dd;
#header {background-color: @color-web;}
#footer {background-color: @color-web;}

O resultado en CSS será:

#header {background-color: #f6f1dd;}
#footer {background-color: #f6f1dd;}

Mixins

É habitual repetir as mesmas propiedades varias veces ó longo do documento, vexamos como simplificalo.

.rounded-corners (@radius: 5px) {border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;}
#main-menu li {.rounded-corners;}
#other-rule li {.rounded-corners(8px);}

O resultado en CSS será:

#main-menu li {border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;}
#other-rule li {border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px;}

Regras aniñadas

Para traballar coa herdanza simplemente iremos aniñando os selectores uns dentro doutros, o que facilitará a súa lectura.

#header {
	h1 {font-size: 26px; font-weight: bold;}
	p {font-size: 12px;
		a {text-decoration: none;
			&:hover {border-width: 1px;}
		}
	}
}

O resultado en CSS será:

#header h1 {font-size: 26px; font-weight: bold;}
#header p {font-size: 12px;}
#header p a {text-decoration: none;}
#header p a:hover {border-width: 1px;}

O símbolo & úsase para concatenar un selector co seu pai. Moi útil para casos como o :hover e :focus.

Funcións

A través das funcións podemos modificar dinámicamente o valor dunha propiedade.

@border: #2px;
@color-web: #012;
#header {border: @border solid @color;}
#footer {border: @border * 2 solid @color * 3;}

O resultado en CSS será:

#header {border: 2px solid #012;}
#footer {border: 4px solid #036;}

Conclusións

O feito de que esta ferramenta estea baseada no uso de javascript impide o seu funcionamento para os navegadores que non o utilicen. Para estes casos o CSS non sería visible creando un problema na web. Tamén pode haber programadores que non desexen sobrecargar a web con outro script que provoque que a web cargue máis lento.

Ca chegada de HTML5 os navegadores gardarán este CSS xerado no caché, polo tanto este tempo de carga verase minimizado a unha soa ocasión. Outra solución é utilizar programas como Less.app ou WinLess, que compilan o código CSS e incluílo despois na túa web.

Máis información

Comentarios

3 comentarios. Comentar.

4. Anónimo o 28 Xan 2012 ás 17:23:45

good

5. omar rojas o 20 Mar 2013 ás 21:28:15

hola felicidades por tu aporte a los que deseamos aprender mas sobres diseño web, bueno yo estoy comenzando con Less le he tomado un poco de importancia pero solo he visto que la unica ventaja es de reducir codigo osea es simplemente otra forma de escribir css, ya que comonentas en tus conclusiones que como es un sript de javascript tarda al cargar, pero con html 5 yo no tanto, en fin cual seria otra ventaja si me la pudieras nombrar para seguir con esta herramienta gracias por tu atencion.

6. Juanca o 18 Nov 2015 ás 11:36:50

Existe un motivo para esto y estoy deseando aplicarlo a mi blog de astronomia, se trata de poner dos botones en un gadget en los que el visitante pueda elegir entre:

Vista nocturna cuando está por la noche con el telescopio (estilo con colores teñidos al rojo y negro)

Vista diurna para cuando el visitante no necesita la vista nocturna ( estilo con la vista original del blog y todo su color)

Mientras no encuentro la solución a mi idea, he confeccionado un segundo e incómodo blog, clon del primero y en colores rojo y negro. Lo ideal sería que el visitante pudiera escoger la vista haciendo un clic en el blog y tranformar los estilos usando 2 hojas de estilo .CSS.

El problema es que estoy muy verde y no consigo acabar de hacerlo yo, me han dado los códigos pero no sé como aplicarlos, si alguien puede ofrecerme su ayuda estaría encantado.

He aqui una buena razón para dar uso a las hojas de estilo, gracias!

Comentar

Comentar de forma anónima

Podes comentar poñendo calquera nome ou alcume, exceptuando os nomes de usuarios rexistrados. Máximo de 50 caracteres.

Comentar como usuario rexistrado

Rexistrarse. Esqueceches o teu contrasinal?