Como aplicar mixins SASS en un formulario básico

Comparteme!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone

Antes de empezar a explicar el contenido de este post les recomiendo tener buenos conocimientos acerca de los fundamentos básicos CSS Para comprender mejor este material. Si aun no tienen una buena base de CSS sigan practicando hasta que tengan buen dominio sobre el, así se les hará muchas mas fácil al momento de elegir un preprocesador para utilizar todos estos componentes y mixins.

Comencemos, En este articulo explicare como estructuro personalmente mi carpeta de estilos, como distribuyo los archivos y como utilizar los mixins asimismo como los implemento en los proyectos. Lo que mas me gusta de los mixins es que te ahorran mucho tiempo y son muy fácil de usar, ademas de los beneficios en cuanto a rendimiento de velocidad, cosa que cualquier desarrollador agradece

Estructura de archivos

estrutura de carpeta estilos

por lo general, siempre creo una carpeta con el nombre de ‘styles’ o ‘estilos’ en la cual guardo solo los archivos en los que yo trabaje.

dentro de la carpeta SASS estructuro los archivos de forma en la cual el archivo maestro el cual importa todos los parciales siempre este en la raíz, este se diferencia de los demás ya que el nombre del archivo no tiene el underscore por delante. por lo general, creo otra carpeta para los mixins así mantengo una mejor organización.

Archivo  _variables.sass

variables

 

Aprovechare este archivo para explicar algunas cosas básicas, SASS nos da la posibilidad de crear archivos mas pequeños los cual nombra como “parciales”. Se coloca un piso (underscore) y así SASS evita procesarlos. Los archivos parciales solo se procesan cuando son llamados por un archivo maestro.

Como ven en la imagen, el único archivo procesado es el maestro “app.sass” el cual hace el llamado a los parciales con la directiva @import.

MIXINS

mixins

Estos archivos son hojas de estilos reusables, cualquier cantidad de veces que los necesites, pueden contener reglas CSS , condiciones e incluso argumentos como si fueran funciones. a continuación, muestro los mixins que utilice para realizar un formulario de contacto básico utilizando el preprocesador SASS y sus funciones.

linear-gradient

body

En principio como se ve en la imagen, use la sintaxis de SASS para crear un mixin con el carácter “=” en lugar de @mixin en cual creo básicamente una función a la cual le paso argumentos en este caso uso 2 para definir los colores que se degradaran. La segunda función tiene una sola variación que es el angulo en como se repartirá la degradación.

buttons form-btn

El mixin de los botones es bastante útil ya que se usan mucho en las paginas web. Esto te ahorra mucho tiempo ya que solo tienes que cambiarle unas pocas propiedades para personalizarlo.

box-shadow

backform

Otra función de SASS es la interpolación, en este caso la use para crear una función de box-shadow. Como se ve en la imagen, la variable “$inset” por default esta vacía, y uso la interpolación para que escribe el contenido como un string en caso de que este vacía no me genere ningún error.

form-inputs inputs

Por ultimo, el mixin para las etiquetas tipo input. También bastante para darle uniformidad a la pagina de una forma sencilla.

Comparteme!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone

Deja un comentario

A %d blogueros les gusta esto: