.jpg)
Preprocesadores CSS y HTML
Una de las formas más fáciles de escribir código HTML y CSS es usando atajos; función que desempeñan los preprocesadores que usan una sintaxis más refinada y muchas veces completamente diferente al lenguaje original. Veamos algunos de estos útiles preprocesadores y adentrémonos en el mundo de los atajos.
HAML – Un padre para los lenguajes de marcado
HAML es un lenguaje de marcado muy liviano el cual describe el lenguaje XHTML al seguir algunos principios básicos en su implementación; el código a través de HAML debe tener sangrado correcto y la estructura del XHTML resultante debe ser lo suficientemente clara. HAML trajo consigo el desarrollo de SASS; es muy común decir que HAML es a HTML lo que SASS es a CSS. HAML se utilizaba con Ruby originalmente pero también tiene una implementación para PHP.
/* HAML */
!!! 5
%html{lang: 'en'}
%head
%title Hello World
%body
%h2 Hello World, this is HAML
/* HTML Compiled */
<!DOCTYPE html>
<html lang = 'en'>
<head>
<title>Hello World</title>
</head>
<body>
<h2>Hello World, this is HAML</h2>
</body>
</html>
SASS – Hacia la victoria con un CSS más simple
Inspirado en la sintaxis de HAML, SASS es un metalenguaje creado para trabajar muy eficientemente con CSS y se vale de algunas características como las variables, anidación, mixins y propiedades heredadas. SASS cuenta con dos sintaxis diferentes: la más antigua es la sintaxis sangrada que reemplaza muchos elementos como los punto y coma, así como las llaves, por líneas sangradas. La más nueva es SCSS, cuya sintaxis es similar a las implementaciones comunes de CSS y usa elementos que se omiten en la sintaxis sangrada. Ambos tienen varias ventajas:
La sintaxis sangrada. No tiene muchos punto y coma, comas y llaves; su legibilidad es óptima y se ve bastante entendible para cualquier persona al usar sangrías para separar los bloques de código. En resumen, es poco abstracto y más conciso, comparado a las implementaciones más novedosas.
/* SASS Sangrado */
#main
color: blue
font-size: 0.3em
a
font:
weight: bold
family: serif
&:hover
background-color: #eee
La sintaxis Sassy CSS. Sassy es una palabra inglesa para definir frescura en el comportamiento y es lo que SCSS quiere proyectar. Es una opción fresca, muy cercana al CSS original. usa llaves para separar bloques de código, lo cual permite crear una mejor documentación sobre línea, volviéndola muy expresiva.
/* style.scss */
#fixed-header {
font-size: 15px;
background-color: $fixedHeaderBg;
width: 80%;
height: 15px;
padding: 4px 1px;
z-index: 99;
font-family: 'open sans';
ul li {
float: left;
margin-right: 8px;
a {
text-decoration: none;
color: $fixedHeaderText;
}
&.skip-header {
a {
background-color: $fixedHeaderText;
color: $fixedHeaderBg;
padding: 3px 3px;
}
}
}
}
/* style.css */
#fixed-header {
font-size: 15px;
background-color: #ffaa00;
width: 80%;
height: 15px;
padding: 4px 1px;
z-index: 99;
font-family: 'open-sans';
}
#fixed-header ul li {
float: left;
margin-right: 8px;
}
#fixed-header ul li a {
text-decoration: none;
color: #bbb;
}
#fixed-header ul li.skip-header a {
background-color: #000;
color: #fafafa;
padding: 3px 3px;
}
LESS – Una mejora a CSS con doble cara
Less es un lenguaje dinámico de hojas de estilo y al tiempo una extensión para CSS, el cual funciona de manera similar a SASS. Sin embargo, Less es capaz de trabajar tanto del lado del cliente como del lado del servidor al proporcionar variables, anidación, mixins, operaciones y funciones. Se puede compilar en PHP como alternativa al compilador JavaScript.
/* LESS */
#header {
h2 {
font-size: 21px;
font-weight: bold;
}
p {
font-size: 15px;
a {
text-decoration: none;
&:hover {
border-width: 3px
}
}
}
}
/* CSS Compilado */
#header h2 {
font-size: 21px;
font-weight: bold;
}
#header p {
text-decoration: none;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 3px;
}
STYLUS – Haciendo minimalista el código
De manera similar a la sintaxis sangrada de SASS, Stylus simplifica el código al hacer opcional el uso de punto y coma, comas y llaves.
/* Stylus */
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments
body
font 15px Tahoma, sans-serif
a.button
border-radius(7px)
/* CSS Compilado */
body {
font: 15px Tahoma, sans-serif;
}
a.button {
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
HAMLET – Un simple ayudante para HTML
Definido como un lenguaje de plantillas para XHTML, simplifica el código al evitar la regla de cerrar etiquetas y al tener conjuntos de etiquetas estructurales como condicionales, bucles y ciclos condicionales.
/* Hamlet */
$doctype 5
<html>
<head>
<title>#{pageTitle} - My Site
<link rel=stylesheet href=@{Stylesheet}>
<body>
<h2 .page-title>#{pageTitle}
<p>Take a look to this list:
$if null elements
<p>There are no elements to show.
$else
<ul>
$forall Element type cost <- elements
<li>#{type} (#{cost} dollars)
<footer>{copyright}
Bonus track: Deshágase de los prefijos en tus hojas de estilo
Una de las tareas más frustrantes e irritantes a llevar a cabo durante la elaboración de una hoja de estilo es la necesidad de añadir prefijos a ciertas propiedades para hacerlas funcionar correctamente en los distintos navegadores. Esta acción toma bastante tiempo que pudo haberse utilizado para avanzar en otras tareas.
Todo este tedio llegó a su fin gracias a una extensión de JavaScript desarrollada por Lea Verou que añade estos prefijos en segundo plano, únicamente cuando se requieran: -prefix-free es una extensión que funciona en el lado del cliente sin afectar los prefijos ya incluidos, aunque puede causar algunos errores, los cuales pueden solucionarse mediante trucos sugeridos en su documentación.
Esta extensión cumple su función y tiene soporte nativo en Internet Explorer y Firefox; son necesarios algunos ajustes en Opera y Chrome para probar -prefix-free localmente.
Fuentes externas: wwwhatsnew
Imagen de cabecera; adwe
No hay comentarios:
Publicar un comentario