En esta nueva lección del curso de Sass a Fondo aprenderemos cómo trabajar con mixins. La directiva mixin te permite definir snippets o bloques de código que puedes reusar en cualquier parte de un documento de Sass. Estos bloques de código pueden contener cualquier número de propiedades con sus valores, selectores, puede también contener estructuras de control, y además pueden aceptar argumentos que cambian su resultado dándote mucha flexibilidad para crear partes de código reusable.
Regístrate para ver ésta y cientos de lecciones exclusivas.
Hoy en la lección 4, aprendemos la sintaxis para definir y utilizar variables en Sass. Las variables, como en cualquier otro lenguaje de programación, son pequeñas piezas de información almacenadas con un identificador, que podemos reutilizar a lo largo de nuestros proyectos, lo cual nos da mucha flexibilidad y facilidad para trabajar con colores, medidas, fuentes y otros detalles de manera consistente.
Regístrate para ver ésta y cientos de lecciones exclusivas.
Elixir es la herramienta oficial de Laravel para el manejo de assets dentro del framework.
Elixir provee una clara y fluida API para definir tareas básicas de Gulp en tus aplicaciones de Laravel. Elixir soporta muchas de los comunes pre-procesadores para CSS y JavaScript, incluyendo herramientas para pruebas.
Cuando ejecutamos «npm install» por primera vez en un proyecto de Laravel, se instalan las dependencias definidas en el archivo package.json ubicado en la raíz del proyecto. Hoy aprenderemos a crear un nuevo proyecto desde cero utilizando npm y a cómo configurar Elixir para compilar fácilmente los assets de tu aplicación. Ésta es una solución muy útil a la hora de trabajar con maquetado de proyectos o sitios estáticos (solo front-end). Ver post
Hoy aprendemos a trabajar con las diferentes formas de anidar elementos en Sass. Haciendo uso de esta característica en diferentes atributos del lenguaje, nos permite escribir menos, y crear código más conciso y mejor estructurado que ademas es más fácil de entender y queda mejor organizado. También nos ahorra muchísimo tiempo al trabajar con proyectos grandes donde debemos escribir estilos para muchos componentes distintos.
Una vez que te acostumbres a anidar en Sass, te preguntarás cómo habías trabajado tanto tiempo antes sin usarlo.
Regístrate para ver ésta y cientos de lecciones exclusivas.
En esta lección aprenderemos cómo trabajar con archivos en Sass a través de los distintos modos de compilación para modificar el tipo de archivo que obtenemos, y también veremos cómo controlar la generación de sourcemaps usando el compilador, para así tener control total del archivo CSS final y a la vez tener flexibilidad para encontrar errores o inspeccionar el código en el navegador.
Por otro lado, aprendemos cómo Sass extiende la regla @import para darnos la ventaja de usar archivos parciales y a través de algunos ejemplos veremos cómo los parciales nos ayudan a organizar mejor el código.
Regístrate para ver ésta y cientos de lecciones exclusivas.
Sass ha estado disponible ya por más de diez años y muchos grandes proyectos se han hecho basados en Sass, incluyendo otros proyectos similares como lo son Less y Stylus, y también una cantidad de frameworks y herramientas que son posibles gracias a estos. Con este curso vas a aprender Sass a fondo, desde lo más básico hasta las características más avanzadas.
Hoy en día es muy fácil empezar a usar Sass, pero una de las características más importantes de este lenguaje, es que todas las cosas que veremos en este curso, son opcionales. Tú puedes decidir cuando usar cada cosa, ya que en Sass, a diferencia de otros pre-procesadores, podemos escribir CSS tradicional y funciona perfectamente. Además, ten en cuenta que Sass te ayuda a ti a desarrollar pero como siempre se compila a CSS tradicional, no es necesario que instales nada extra en tu servidor. Ver post
En un tutorial anterior hablamos sobre la configuración básica de Elixir en nuestros proyectos de Laravel, ahora vamos a instalar la versión Sass del framework de diseño Bootstrap 3 en un proyecto usando esta herramienta. Sass es un preprocesador de CSS que nos ayuda estructurar de una forma mucho más fácil y conveniente todo el código de diseño del proyecto, ademas a diferencia del CSS convencional, Sass nos permite utilizar, entre otros complementos, variables para definir valores constantes que podemos reutilizar en desarrollo, es allí donde está la mayor ventaja de usar esta versión de Bootstrap, ya que una vez instalado el framework podemos hacer uso de las variables o funciones del mismo. Ahora por medio de Laravel Elixir y Gulp podemos compilar los archivos Sass y convertirlos en archivos CSS y además el crear versiones de éstos.
Ahora que hemos aprendido cómo utilizar los diferentes métodos que forman parte del desarrollo de RWD, vamos a comenzar a aplicarlos de forma práctica.
Para los ejemplos que presentaremos usaremos el enfoque mobile-first que significa pensar y diseñar para móviles primero. La idea de este enfoque es asegurar que el contenido mostrado es el mismo en todos los tamaños de pantalla, asegurando que el contenido esté bien formateado y optimizado para móviles primero, y luego adaptarlo a pantallas más grandes. Con más de 50% de usuarios móviles en promedio a través de muchos países del mundo, no es de extrañar que esta metodología sea la más aceptada en el mundo de RWD.
Este tutorial esta hecho para aprender a hacer RWD manualmente, para entender bien cómo funciona y cómo controlar cada aspecto del mismo, por lo tanto no se usará ningún framework como Bootstrap o Foundation, los cuales explicaremos más adelante.
En los últimos años, han habido debates sobre si RWD es la mejor solución para soportar la gran cantidad de dispositivos disponibles actualmente. Algunos piensan que tener un sitio especializado para dispositivos móviles es mejor ya que permite optimizarlo y presentar la información específicamente diseñada para pantallas pequeñas.
A lo largo de esta serie, hemos tratado de explicar la mayoría de características de Sass. Con lo que tenemos, es posible comenzar a elaborar librerías o componentes de alta calidad, siguiendo buenas prácticas y haciendo uso de todo lo aprendido.
Hoy, vamos a realizar un artículo mucho más práctico, crearemos un Grid system. Es fundamental estar al día con la serie Aprende Sass, los invito a revisarla para refrescar conceptos.
Styde usa cookies para guardar tus preferencias y para seguimiento anónimo AceptarLeer más
Privacy & Cookies Policy
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
