SASS, Responsible Layout y Mobile First Design
Una pequeña introducción a SASS, junto con el mundo del Responsive y el paradigma de Mobile First
Primero y principal ¿Qué es SASS?
Sass es un lenguaje de hojas de estilo que se compila en CSS. Permite usar variables, herencia, mixins, funciones y más, todo con una sintaxis totalmente compatible con CSS. Sass ayuda a mantener bien organizadas las hojas de estilo grandes y facilita compartir diseños dentro y entre proyectos.
En otras palabras, Sass es CSS en donde se pueden usar variables, herencia, mixins, funciones etc, y al final todo sera compilado a CSS. Siguiendo esa misma idea hablemos un poco de estas características.
Primero y principal se debe decir que existen dos tipos de sintaxis dentro de Sass así como dos tipo de extensiones.
.scss es un tipo donde se respeta mas la sintaxis original de css, en cuanto a las { } para abrir y cerrar los elementos, así como los ; para el bloque de cada linea y .sass que no necesita estas dos reglas sino que es por pura indentación.
Por ahora usemos la extensión .scss para estar todos en la misma pagina.
Variables
Esto no un concepto en el que estemos desubicados, las variables aquí son utilizadas para almacenar o guardar información que sera utilizada a través de toda tu hoja de estilo, lo único que cambia en este caso es, nuevamente, la sintaxis. Se pueden almacenar colores, fuentes y cualquier valor que se te ocurra, que pueda ser re-utilizable. las variables en Sass deben ser declaradas al inicio del archivo, por no decir que deben ser declaradas de primero, y van precedidas por un signo de dolar ($) como se muestra a continuación.
Anidamiento
Sass te permite anidar, o tener una clara herencia con tus selectores de css, de una manera que sigue la misma estructura visual de tu HTML. Ten cuidado de sobre utilizar el anidamiento o herencia, ya que puede resultar en una sobre-calificación de CSS que puede hacer difícil de mantener y es generalmente considerado una mala practica.
Partials
Puedes crear archivos de Sass parciales que contengan pequeños snippets de CSS que pueden ser incluidos en otros archivos de Sass. Esta es una gran forma de modularizar tu CSS y ayudar a escribir código fácil de mantener. Un partial es simplemente un archivo de Sass nombrado de esta manera, _nombreModulo.scss el ‘_’ le comunica a sass que es un archivo del tipo partial y que no debe compilarlo a css a menos que este dentro de un archivo que no es partial. Para usar un partial la directiva @import.
Mixins
Algunas cosas son un poco tediosas de escribir, especialmente con CSS3 y los muchos prefijos que existen. Un Mixin te permite agrupar declaraciones de css que quieran ser reutilizadas. Incluso pueden pasarse valores para hacer el mixin mucho mas flexible, en este caso son como una función cualquiera que posee parámetros.
Extensión y Herencia
Este es uno de los features más útiles de Sass, usando @extend se puede compartir un set de propiedades de CSS de un selector a otro.
Responsible Layout
En pocas palabras y para no extenderse responsive layout es realmente un diseño que se adapta a cualquier pantalla o al menos lo intenta, porque el problema es que por la gran cantidad de tamaños de pantallas en teléfono, “phablets”, tablets, laptops, televisores, pantallas etc. es muy difícil poder adaptarse de buena manera a todas ellas, lo importante es que tu sitio web se pueda adaptar a la mayor cantidad de ellas.
Para que tu pagina este optimizada para diferentes dispositivo debe incluir la etiqueta meta viewport en el encabezado del documento html, esta etiqueta da al navegador instrucciones sobre como controlar las dimensiones y el ajuste a escala de la pagina, la misma incluye el atributo ‘content=’ con lo siguiente width=device-width para hacer el ancho de la pantalla en pixeles independientes del dispositivo y initial-scale=1 para establecer una relación de :1 entre los pixeles CSS y los pixeles independientes del dispositivo.
Al final quedaría de la siguiente manera.
Para poder lograr todo esto usaremos una herramienta de css llamada media queries. Un media query es una regla que solo se cumple si un cierto numero de condiciones se cumplen. Por ejemplo si una pantalla mide 900px y tenemos un botón de color rojo y queremos que cuando la pantalla tenga 600px o menos, el botón se vuelva de color azul y cuando la pantalla sea mayor a 900px el mismo botón se vuelva de color verde. Loco ¿no? ¿cómo hacemos esto? pues usamos un Media Query.
Si se fijan en la imagen anterior tenemos 3 llamados al elemento button de mi html, y estamos usando la regla @media, screen, max-width y min-width, estos dos últimos indicando un numero en pixels. Este numero se refiere tal cual como dice la propiedad a la cantidad de ancho en pixeles de la pantalla.
Cuando especificamos un max-width le estamos diciendo a nuestro bloque que cuando se cumpla, TODO lo que este desde 0 hasta el valor colocado en max-width incluido, cumplirá las condiciones que coloquemos dentro. Y lo mismo va para el min-width, TODO lo que este desde el valor especificado hasta los valores que alcance la pantalla cumplirá las condiciones que están dentro.
Pero los media queries son más que solo max width y min width también existe una propiedad llamada orientation que tal cual dice se refiere a la orientación del dispositivo. Esta propiedad no fue especificada en el ejemplo anterior debido a que por defecto esta propiedad tiene el valor de ‘portrait’ que se refiere a que el height o altura es mayor o igual al width o ancho del dispositivo.
El otro valor posible para orientation es ‘landscape’ que se refiere a que el width o ancho es mayor que el height o alto del dispositivo, esta propiedad es útil si necesitas tener un comportamiento distinto en el modo landscape del dispositivo.
Coloquemos un ejemplo siguiendo la nota del botón, ahora quiero que el botón sea de color amarillo y tenga menos de 800px y quedaría de la siguiente manera.
Aquí podemos ver que usamos más de una propiedad en la regla @media y esto es completamente posible.
Por ultimo al momento de referirnos a un media query, hay una especie de standard en cuanto a los valores que se les atribuye a cada tipo de pantalla o dispositivo y se llaman Breakpoints y son los siguientes:
- Teléfonos móviles en portrait → min-width: 320px — max-width: 480px
- Tablets en portrait → min-width: 760px — max-width: 1024px
- Laptops y desktops en adelante → min-width: 1200px
- Pantallas mucho mas grandes → min-width: 1824px
Mobile First
Esto es una filosofía introducida en el 2010 por el CEO de Google, Eric Schmidt, donde comenta que los diseñadores deberían enfocarse en crear o construir vistas desde el punto mas pequeño es decir, los teléfonos móviles y desde ahí ir subiendo hasta llegar a una pantalla más grande, como todo paradigma u opinion tiene sus pros y contras.
Pros:
- Móvil es popular: hoy en día los usuarios están mas inclinados a ver solo la versión móvil de los sitios web, por ende se debería enfocar en esta aplastante realidad.
- Contenido Clave: en un sitio móvil el contenido es priorizado sobre cualquier otra cosa, simplemente no hay suficiente espacio en 320 x 480 pixeles para información innecesaria.
- Menos código == Menos bugs: empezar a desarrollar desde móvil significa que el código comienza mucho más simple, por el hecho de que no son tantas cosas que manejar.
Contras:
- Todo es diferente: mobile first no es fácil o sencillo en términos de diseño, es necesario un equipo bien organizado para manejar con todo lo orientado a móvil.
- Los clientes quieren wireframes: por lo general los clientes se enfocan en un demo que se ve en desktop (dependiendo del caso) por lo que si se le entrega un wireframe enfocado en móvil el cliente puede tender a confundirse.
