Web Design

SASS | ¿Conoces todas las funciones predefinidas?

30 diciembre, 2016 CSS Maquetación Web Sass Web design

Desde hace tiempo, CSS ha quedado “obsoleto” frente a soluciones como SASS y LESS que aportan grandes ventajas como, entre otras, el uso de variables, anidamiento de elementos, elementos reutilizables, compilación, y…funciones predefinidas.

SASS o LESS

Como esto va de gustos y a mi me gusta siempre aportar mi visión, desde el principio me decanté por el uso de SASS en vez de LESS dado que el segundo depende de JavaScript y suelo evitar en la medida de lo posible el abuso de este tipo de dependencias aunque no podemos olvidar que SASS está basado en Ruby. Si queréis conocer a groso modo las diferencias entre ambos y algunas comparaciones, este artículo de KeyCDN es bastante bueno.

Funciones SASS

SASS dispone de una gran cantidad de funciones predefinidas que podemos usar para aumentar la potencia:

  • Funciones RGB
  • Funciones HSL
  • Funciones de opacidad
  • Más funciones de color
  • Funciones de string
  • Funciones numéricas
  • Funciones de listas
  • Funciones de maps
  • Funciones de selectores
  • Funciones introspectivas
  • Otras funciones

Además, también nos permite crear nuestras propias funciones lo que ampliará el abanico de lo que podremos hacer sobre CSS sin necesidad de usar CSS.

Un ejemplo del uso de estas funciones sería crear una gama de colores de nuestro sitio a partir de los colores principales haciendo uso de las funciones RGB, HSL y de opacidad, con lo que podremos variar saturación, opacidad, aclarar, descomponer y mezclar para obtener una paleta de colores rica para nuestro sitio web de una forma muy sencilla.

Si no las conocíais, espero que podáis sacar un gran beneficio de estas funciones y si ya las conocíais, podéis aportar casos de uso interesantes y así podremos ayudar a usar mejores prácticas a la hora de maquetar sitios web.

Enjoy coding!!

CSS | Es posible realizar cálculos entre píxels y porcentajes y mezclar peras con manzanas con calc()

30 diciembre, 2016 CSS Diseño Maquetación Web Web design

poster-wide

Dado el elevado número de veces que me han preguntado algo parecido, voy a escribir este sencillo artículo sobre la función calc() de CSS que todo maquetador web debería conocer.

Escenario

Algo con lo que deberemos lidiar n-mil veces sobre todo cuando estamos maquetando sitios web adaptativos o responsivos, es que tendremos elementos con unas medidas específicas que tenemos que encajar con otros que tienen medidas relativas especificadas con porcentajes y… ahí viene la gran duda, ¿cómo lo solucionamos?

Bajando a la mina

Una posible solución es bajar a la mina y empezar a escribir CSS para controlar al milímetro el comportamiento. Esto, aunque es posible, es muy engorroso y nos quedarán ficheros de estilos que no desearía que mantuviesen ni mis peores enemigos.

En el caso de diseños responsivos o adaptativos, podríamos solucionarlo también poniendo puntos de control con mediaqueries en decenas de resoluciones lo que nuevamente se convierte en un trabajo tedioso y con un resultado feo e imposible de mantener.

Usar calc()

Es aquí donde hace su aparición la función “calc”. Para los más avezados no será algo nuevo, pero para los rezagados o novatos sí que será un descubrimiento que les salvará la vida (admito donaciones xD)

Como indicaba en la escenificación del problema, es muy probable que nos encontremos en la situación de tener que mezclar medidas relativas con porcentajes y medidas. Como ejemplo muy simple, supongamos tener tres columnas, una con 200px de ancho y las otras dos con el mismo ancho, es decir, al 50% del espacio restante de los 200px que sean adaptativas.

El DOM podría ser el siguiente:

        <div id="site-container">
            <div id="column-1" class="column-fixed"></div>
            <div id="column-2" class="column-relative"></div>
            <div id="column-3" class="column-relative"></div>
        </div>

Y los estilos:

            #site-container {
                font-size: 0;
            }
            
            #site-container > div {
                display: inline-block;
                padding: 5px;
                height: 300px;
                box-sizing: border-box;
            }

            #column-1 {
                background: lightblue;
            }

            #column-2 {
                background: blueviolet;
            }

            #column-3 {
                background: #363636;
            }

            .column-fixed {
                width: 200px;
            }

            .column-relative {
                width: calc((100% - 200px) / 2);
            }

Como se puede observar, hay 3 columnas “inline-block” (nótese que el contenedor tiene font-size: 0; para evitar los márgenes que aplican los navegadores). La primera columna tiene un ancho de 200px y las restantes un valor calculado mediante calc((100% – 200px) / 2), lo que resultará en el 50% del espacio resultante de restar los 200px al ancho total.

El resultado sería el siguiente y nos permitiría mantener las columnas de ancho calculado con un valor dinámico en función del ancho disponible resultando en un diseño “adaptativo”.

image

Como veis, ha sido un tip sencillo que nos puede sacar de muchos apuros.

Enjoy coding!!