Ir al contenido principal

Ventajas de usar un preprocesador CSS (Sass)

Los preprocesadores CSS son útiles en proyectos grandes con miles de líneas de CSS, se trata de evitar redundancia de código, dificultades de estructuración y que realizar cualquier pequeño cambio sea complicado.

Un preprocesador CSS nos hace mucho más fácil resolver estos problemas. El preprocesador CSS tiene su propia sintaxis, su propia estructura y no respeta el estándar de CSS.

Para que su código no estándar funcione lo que hace es generar un fichero CSS compatible con todos los navegadores basándose en el código del preprocesador. Tú trabajas en su lenguaje y luego la web integra el fichero generado.

Hay diferentes preprocesadores: Sass, Less and Stylus. El más utilizado con diferencia es Sass. La tercera versión de Sass se llama SCSS y también es muy utilizada.

¿Cuales son las ventajas de Sass?

Variables
Permiten almacenar valores para reutilizarlos luego.

$box-width: 200px;     // asignamos valor de 200px
$box-height: 200px;    // asignamos valor de 200px

.box-1 {
   width: $box-width;  // usamos las variables
   height: $box-height;
   background: red;
}

.box-2 {
   width: $box-width;
   height: $box-height;
   background: yellow;
}


Anidación
Permite agrupar las propiedades de una manera más eficiente. No es bueno tener más de tres niveles.

.container {
    background:red;
    color:white;

    .hello {
        padding-left:50px;
    }
}


Mixins
Agrupan declaraciones de CSS para poder luego reutilizarlas.

$font-color: red;

@mixin my-font($font-color) {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-style: italic;
  color: $font-color;
}

p {
  @include my-font;
}


Importaciones
Permite importar CSS desde ficheros.

// Tu fichero principal de Sass

@import 'fichero';
@import 'otrofichero';

.class {
  // Tú código
}


En fin, como podéis ver todo son ventajas, pero siempre que tengáis muchos estilos, para una web pequeña no merece la pena.






Comentarios

Entradas populares de este blog

MySql: Como multiplicar dos campos fila a fila y sumar el resultado en una misma SELECT

Aquí va un ejemplo de sql básico.

Imaginemos que tenemos una tabla llamada productos_carrito_compra con dos campos: cantidad (con la cantidad de cada producto) y precio (con el precio de cada producto). Necesitamos saber cual es el precio total acumulado en el carrito de la compra, ¿Cómo podríamos obtener esa cantidad sin tener que recurrir a PHP?

Pues así: SELECT SUM(cantidad*precio) as resultado FROM productos_carrito_compra

Videojuegos:Xinput y DirectInput

Desde hace algún tiempo muchos de los juegos de PC que compro en Steam no funcionan con mi gamepad para PC compatible con PS3, he estado investigando un poco y he encontrado la razón.

A día de hoy hay dos tipos de drivers para gamepad en Windows, xInput y DirectInput, xInput es más moderno que DirectInput, está basado en las especificaciones de XBOX360 y es muy utilizado en los juegos que tienen también versión para esta consola.

DirectInput es más antiguo que xInput, son los drivers de gamepad para Windows de toda la vida, tienen más limitaciones técnicas y están cayendo en desuso.

En mi caso lo que hago para mi gamepad es instalar un emulador de drivers de XBOX360 para que mi gamepad me sirva, a veces da errores o se cuelga con el motor del vibrador (por ejemplo con las arañas en Castlevania Lords of Shadow) o no funciona bien en algunas ocasiones (por ejemplo en Batman Origins con el botón de investigar pruebas en el modo detective). Vamos, que no es la solución perfecta. Si queré…