Share
No voy a ocultarlo: amo a Sass. En este artículo voy a compartir mis recomendaciones para trabajar con Sass a diario y en proyectos reales..
Aquí hay un complemento increíble que te ahorrará mucho tiempo. Abra el control de paquetes en texto sublime, busque Hayaku y hacer una instalación rápida. Ahora puedes escribir tu CSS más rápido y con accesos directos. Aquí hay unos ejemplos:
// Escriba esto y presione la pestaña mt10 // Resultado margin-top: 10px; // O este df // Pantalla de resultados: flex;
Particularmente para su flujo de trabajo Sass, hay una carpeta que debemos ignorar al buscar en Sublime Text. La carpeta en cuestión es .sass-cache, Porque esto solo es necesario para el proceso de compilación. Además, nunca debe editar nada en esta carpeta, así que haga su vida más fácil y escóndala!
prensa CMD-, para obtener el userconfig de su editor e insertar las siguientes líneas:
"folder_exclude_patterns": [".sass-cache"]
Tener una estructura de proyecto sólida es muy importante, especialmente si trabajas en equipo.
Uso tres secciones diferentes (un enfoque de SMACSS por Jonathan Snook): _base, _layouts y _módulos. Una configuración global es ideal para colocar en el _base carpeta. Para cada tipo de diseño, crea un archivo único y lo coloca en la carpeta _layouts. Piense, por ejemplo, en un diseño básico, la cuadrícula o tal vez un archivo para el diseño de impresión.
Es posible dividir un sitio web en diferentes tipos de módulos como pestañas, botones, acordeones, etc. Ningún módulo debe ser "consciente" del diseño a su alrededor. Estos entonces pertenecen a la _módulos carpeta.
Normalmente, la estructura de mi proyecto se ve así:
scss / | - _base / | | - _config.scss | | - _presets.scss | | - _headings.scss | | -… | - _layouts / | | - _l-base.scss | | - _l-grid.scss | - _modules / | | - _m-buttons.scss | | - _m-tabs.scss | - application.scss stylesheets / | - application.css
A menos que use Sass 3.3 o Node-Sass, probablemente necesitará la siguiente función para simular Sass Maps. Los mapas de Sass le permiten definir conjuntos de claves con valores asociados. En este caso, puede utilizar la función, insertar la clave y luego obtendrá el valor correspondiente. Aquí hay un ejemplo rápido:
// Función: simular matrices asociativas // Autora: Hugo Giraudel // Fuente: http://hugogiraudel.com/2013/08/12/sass-functions/#mapping @function match ($ haystack, $ needle) @each $ item en $ haystack $ index: index ($ item, $ needle); @if $ index $ return: if ($ index == 1, 2, $ index); @return nth ($ item, $ return); @falso retorno; // Usage $ list: a b, c d, e f; $ valor: coincidencia ($ lista, e); // devuelve f
Aquí hay algunos mixins que probablemente necesitará en cada proyecto. Vamos a empezar con algunas cosas más simples como construir una columna con sass
Una grilla es absolutamente indispensable en tu proyecto. Con este ayudante (un mixin que he nombrado columna) Es más fácil crear el ancho de una columna. Se espera dos valores: el número de la columna ($ col) Y las columnas máximas ($ max-cols) en su cuadrícula, el valor predeterminado es 12.
// Calcular el ancho de una columna // El valor predeterminado de las columnas máximas es 12 @mixin col ($ col, $ max-cols: 12) ancho: (100% / $ max-cols) * $ col; // Uso .element @include col (3); // Resultado .elemento ancho: 25%;
El tiempo ha pasado que solo necesitamos valores de píxel. Donde sea posible estos días trato de usar em o movimiento rápido del ojo. Ambas son unidades relativas de medida, la diferencia entre ellas es que em se basa en el valor de su contenedor principal y movimiento rápido del ojo se basa en el tamaño de fuente de la raíz (la html elemento).
// Mixin @mixin font-size ($ sizeValue: 1.6) font-size: ($ sizeValue * 10) + px; tamaño de letra: $ sizeValue + rem; // Uso .element @include font-size (1.8); // Resultado .element font-size: 18px; tamaño de fuente: 1.8rem;
Incrustar fuentes manualmente a través de CSS3 no es fácil, porque hay muchos formatos para diferentes tipos de navegadores. Una mezcla es la solución perfecta para esto. Esta mezcla se llama Perfil delanteroY se espera dos valores. El primero es el nombre de la familia de fuentes y el segundo es la ruta a los diferentes formatos de archivo de la fuente. Lea más sobre estos diversos formatos en la Red de desarrolladores de Mozilla.
Accentsconagua
// Mixin @mixin font-face ($ name, $ url) @ font-face font-family: # $ name; src: url ('# $ url .eot'); src: url ('# $ url .eot # iefix') formato ("embedded-opentype"), url ('# $ url .ttf') formato ('truetype'), url ('# $ url .svg ## $ nombre ') formato (' svg '), url (' # $ url .woff ') formato (' woff '); @contenido; // Uso @include font-face ('icons', '… / fonts / icons / iconfont'); // Result @ font-face font-family: iconos; src: url ("... /fonts/icons/iconfont.eot"); src: url ("... /fonts/icons/iconfont.eot#iefix") formato ("embedded-opentype"), url ("... /fonts/icons/iconfont.ttf") formato ("truetype"), url "... /fonts/icons/iconfont.svg#icons") formato ("svg"), url ("... /fonts/icons/iconfont.woff") formato ("woff"); Jayden Seric hizo un gran trabajo con su mezcla para incluir íconos. Aquí tenemos una mezcla llamada iconocon dos parámetros: $ posición para los pseudo-elementos, entonces el booleano $ icon que se establece en cierto o falso. Crear una variable llamada $ iconos, Definir el nombre del icono (clave) y el valor.para ello:
// Autor: Jayden Seric // Fuente: http://jaydenseric.com/blog/fun-with-sass-and-font-icons @mixin icon ($ position: 'before', $ icon: false) &: # $ position @if $ icon content: match ($ icons, $ icon); @contenido; // Uso // Cree una variable con todos sus íconos // Nombre, íconos de valor de contenido $: ('marca de verificación "a', 'menos" b', 'más' c '); // Incluir elemento mixin .element @include icon ('before', 'checkmark'); // Resultado .element: before content: "a";Estoy muy agradecido por esta combinación de Snugug: es una excelente manera de configurar sus puntos de interrupción globales y la mejor parte es que le da a cada punto de ruptura su propio nombre. Diferenciar las cosas con nombres es mucho mejor que con píxeles. Esto también le brinda una buena visión general de todos los anchos utilizados y un lugar central para cambiar el comportamiento.
// Use mixin by Snugug // URL: https://gist.github.com/Snugug/2493551 // Defina sus puntos de interrupción y dé a cada uno un nombre $ puntos de interrupción: ('small' 481px, 'medium' 600px, 'large '769px); // Uso .element background: red; @include responder-to ('medium') background: blue; // Resultado .element background: red; @media screen y (min-width: 600px) .element background: blue; El manejo de variables en un front-end escalable es a menudo una pregunta filosófica. En mi caso tengo un flujo de trabajo que me conviene. Primero creamos una paleta de colores con todos los colores disponibles y les damos nombres de identificación normales..
$ luz gris: # f2f2f2; $ gris: #ccc; $ gris oscuro: # 7a7a7a; $ rojo: # d83a3a; $ verde: # 40b846;
Después de que tengamos una buena paleta con todos los colores disponibles, debemos señalar los colores corporativos o principales del proyecto. Con este paso es posible crear un tema completamente nuevo para el proyecto sin perder tiempo adaptando los colores en sus archivos completos.
$ corp-color: $ rojo! por defecto; $ corp-color-dark: oscurecer ($ corp-color, 10%) por defecto; $ corp-color-segundo: $ verde! por defecto; $ corp-color-segundo-oscuro: oscurecer ($ corp-color-segundo, 10%)! predeterminado;
Configure alguna configuración básica como el tamaño de fuente global, las familias de fuente o el color de fuente básico en un archivo de configuración, por ejemplo, en un archivo llamado _config.scss, que está en tu carpeta _BASIC.
// Fuente $ base-font-size: 1.7! Por defecto; $ base-font-family: Helvetica, Arial, sans-serif! default; $ base-font-color: $ grey! predeterminado; // Cuadro / Borde $ base-borde-radio: 3px! Predeterminado; $ border-radius-rounded: 50%! predeterminado; $ base-border-color: $ grey! predeterminado;
Hay muchos sistemas de redes en el mundo, pero la red de PureCSS es, en mi opinión, una de las mejores. Seguí la idea, hice algo de magia con Sass que me permitió crear clases de columna rápidamente y construir una cuadrícula para viewports pequeños, medianos y grandes..
Es muy fácil cambiar el comportamiento de respuesta de un elemento. Usted define el comportamiento una vez para el módulo, pero si tiene otro comportamiento en algún momento, entonces crea un modificador como .m-texto-con-activo - grande
// Defina columnas máximas y el espacio entre cada columna $ max-cols: 2; $ ancho del canal: 25px;
// Nombre: Default-Grid @for $ suma de 1 a $ max-cols @for $ i de 1 a $ suma .lu - # $ i - # $ suma @include col ($ i, $ suma); // Nombre: Small-Grid @ for $ suma de 1 a $ max-cols @for $ i de 1 a $ sum .lu - small - # $ i - # $ sum @include responder-to ('small') @include col ($ i, $ sum); // Nombre: Medium-Grid @ para $ suma de 1 a $ max-cols @for $ i de 1 a $ suma .lu - medio - # $ i - # $ suma @include responder-to ('medium') @include col ($ i, $ sum); // Nombre: Large-Grid @ para $ suma de 1 a $ max-cols @for $ i de 1 a $ suma .lu - grande - # $ i - # $ suma @include responder-to ('large') @include col ($ i, $ sum); // Uso Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
En el dispositivo móvil obtendrá una columna de ancho completo, más allá de 480px viewport, una media columna y más de 768px una tercera columna.
La mayoría de los sitios web (declaración de barrido) tienen un contenedor centrado. Sin embargo, este no es siempre el caso, por lo que es útil crear un ayudante:
// Nombre: Contenedor restringido .l-restringido margen izquierdo: auto; margen derecho: auto; padding-left: $ prevent-spacing; derecho de relleno: $ prevent-spacing; ancho máximo: $ max-wrapper-width;
Si no usa flexbox como el motor de diseño de su elección, entonces usará flotadores. Es imperativo limpiar los flotadores, porque de lo contrario se puede arruinar todo el diseño..
.l-group: after content: "; clear: both; display: table;
Donde veo un espaciado consistente en un diseño de diseño, utilizo clases de ayuda para mantener las mediciones verdaderas.
// Nombre: Distancia-Pequeño // Descripción: Ayuda para crear distance-top .l-distance-small margin-top: 20px; // Nombre: Distancia-Medio // Descripción: Ayuda para crear distance-top .l-distance-medium margin-top: 40px;
¿Prefiere un generador de fuentes en línea o utiliza una interfaz de línea de comandos para generar fuentes? Prefiero una solución en línea, la herramienta de mi elección es fontastic.me. Hay una gran visión general de todas sus fuentes, puede elegir cómo se debe asignar la asignación de caracteres o clases..
Ahora comencemos a crear clases para tus íconos. No te mostraré los estilos básicos de cada ícono. Puede manejarlo usted mismo, pero esto puede ayudarlo con la configuración básica de los iconos..
// Nombre: Array con nombre e íconos de valor de contenido $: ('marca de verificación "a', 'menos" b', 'más' c '); $ prefijo:' icono-- '! Predeterminado; // Nombre: Bucle // Descripción: Cree para cada ícono una clase propia con contenido correcto. Configuración para íconos en _config.scss. // Use el mixin para la creación de íconos que se encuentra en la parte superior del artículo @each $ icon en $ icons $ name : nth ($ icon, 1);. # unquote ($ prefix) # $ name @include icon ('before', $ name); // Resultado .icon - checkmark: before content : 'a'; .icon - minus: antes de contenido: 'b'; .icon - más: antes de contenido: 'c';¿Sabes lo que quiero decir? Cuando comencé a trabajar como desarrollador de CSS, creé todo en función de la página del diseñador, pero ¿qué sucede si necesita un módulo en otro sitio? Debido a esto, es importante construir módulos cerrados sin el diseño a su alrededor..
Crea un archivo para tu módulo y ponlo en la carpeta. _módulos. En la parte superior del archivo tiene un área de configuración, donde define colores u otros aspectos que afectarán el tema..
Bajo la configuración definirás el módulo con todos los estilos. Usa bien los comentarios, para simplificar el módulo..
@charset 'UTF-8'; // 1.Config $ accordion-bgcolor: $ gray-light! Default; $ accordion-alternative-bgcolor: $ gray-dark! default; $ accordion-fontcolor: $ corp-color! default; // 2.Base // Nombre: Acordeón predeterminado .m-accordion background: $ accordion-bgcolor; color: $ acordeon-fontcolor; // Nombre: Acordeón alternativo .m-accordion - alternative background-color: $ accordion-alternative-bgcolor;
Siéntase libre de bifurcar el repositorio que contiene todo el código que se ve en este artículo. Espero que te ayude a construir un front-end mejor escalable en proyectos del mundo real. Por favor, comparte tus pensamientos e ideas conmigo en los comentarios..
