Share
Me parece particularmente interesante cuando otros desarrolladores comparten sus trucos y consejos de flujo de trabajo. Puede ser de gran ayuda echar un vistazo al mundo del desarrollo de otra persona y descubrir qué herramientas están usando para hacer su propia vida más fácil..
Bueno, hoy te mostraré una parte de mi propio flujo de trabajo, específicamente cómo usar Sass y Compass cuando desarrolles un tema de WordPress. En lugar de simplemente explicar la configuración y las herramientas necesarias, pensé que sería mejor comenzar desde cero y mostrarle exactamente lo que se necesita para comenzar a desarrollar un tema de WordPress que utiliza Sass y Compass..
Espero que este artículo le resulte interesante y espero compartir una pequeña parte de mi flujo de trabajo con usted: lo aliento a que haga lo mismo..
Después de mucha experimentación, esta es la mejor herramienta para el soporte multiplataforma de Sass y Compass. Esta es una aplicación única de la barra de menús que puede compilar archivos Sass en CSS (también tiene la recarga en vivo). No es gratis, pero a $ 10.00 lo he encontrado más que valioso..
En el interés de proporcionar una solución para todos lectores, independientemente de la plataforma, este tutorial proporcionará la configuración de la aplicación mencionada anteriormente. Por supuesto, hay otras alternativas, pero tenga en cuenta que las cosas pueden necesitar una configuración ligeramente diferente a la que se ve aquí..
los _s tema es un tema sin diseño perfectamente adecuado para los desarrolladores. Como se indica en su sitio web "Soy un tema destinado a la piratería, así que no me uses como tema principal". - Suena perfecto para nosotros. Diríjase a su sitio web, tema _s, y use el comando 'Generar' en su página de inicio para descargar una compilación personalizada. Simplemente puedes descargar el tema directamente desde GitHub, pero luego deberías buscar manualmente todas las instancias de _s Dentro del tema y reemplazarlos con su propio prefijo. Usar 'Generar' hace esa parte por ti automáticamente.
Una vez que haya descargado su compilación personalizada, descomprima el directorio del tema en wp-contenido / temas. Para este tutorial utilicé el generador para crear el tema. wp-tuts y la estructura del directorio ahora debería verse así:
Ahora puede seguir adelante y activar el tema desde el Panel de administración..
En el directorio raíz del tema, tendremos una carpeta llamada hablar con descaro a. Aquí es donde pondremos todos nuestros .scss archivos. Compass.app observará ese directorio y compilará todo en un solo style.css Archivo que vive en la raíz del tema..
Estas son las configuraciones que funcionarán bien con WordPress:
/ * config.rb en la raíz del tema. * / css_dir = "/" sass_dir = "sass" output_style =: comprimido
Ok tenemos nuestro hablar con descaro a carpeta y nuestro config.rb Ambos sentados en la raíz de nuestro tema. Ahora estamos listos para desgarrar el archivo CSS del tema y crear archivos individuales que serán más fáciles de construir / mantener en el futuro.
Una de las ventajas de usar cualquier preprocesador de CSS es la capacidad de dividir nuestro CSS en muchos archivos pequeños. Esto ayuda enormemente a nuestro flujo de trabajo, ya que podemos organizar nuestro código en partes relacionadas que son más fáciles de mantener y trabajar. Entonces, en lugar de tener todo en un solo archivo CSS gigante, podemos tener un archivo separado que es solo para restablece. Entonces también podríamos tener un archivo separado que solo maneja el menú, un archivo para medios de comunicación, etc. etc. Podemos tener tantos .scss archivos como queramos, y después de la compilación, todos se comprimirán en una sola style.css.
Si nos fijamos en el style.css El archivo que viene incluido con el tema que descargamos, verá que el autor ha incluido comentarios para separar el contenido en secciones como esta:
/ * = Contenido ---------------------------------------------- - * / .sticky .hentry margin: 0 0 1.5em;
Usaremos esos comentarios como una guía para dividir esta hoja de estilos en partes separadas. .scss archivos.
Dentro de hablar con descaro a directorio, crea un archivo llamado estilo.scss - Este es el archivo que usaremos para importar todos los demás archivos. Además, esta es la única scss archivo que NO será prefijado con un guión bajo ("_"). Esto le dice a nuestro compilador que este archivo se debe convertir en un archivo CSS real.
Ahora corre por el style.css archivo y para cada sección comentada, cree un nuevo archivo en el hablar con descaro a carpeta prefijada con un guión bajo y tiene la extensión de archivo .scss. Copia el contenido de esa sección en el archivo recién creado..
Por ejemplo, donde se ve esto en el style.css, crearías un archivo llamado _navigation.scss y ponerlo dentro de la hablar con descaro a carpeta:
/ * = Navegación ---------------------------------------------- - * / .site-content [class * = "navigation"] margin: 0 0 1.5em; desbordamiento: oculto; [class * = "navigation"] .previous float: left; ancho: 50%; [class * = "navigation"] .next float: right; text-align: right; ancho: 50%; / * Termina siendo sass / _navigation.scss * /
Después de recorrer toda la hoja de estilos, tu hablar con descaro a El directorio ahora debería verse así. (Darse cuenta de estilo.scss es el único archivo que no tiene prefijo con un guión bajo, todo lo demás se considera un parcial, y no será compilado en un archivo CSS separado.)
Ahora que hemos puesto todo el CSS en archivos SCSS separados, ahora debemos importarlos a la estilo.scss archivo y también añadir la información del tema.
/ *! Nombre del tema: wp-tuts URI del tema: http://underscores.me/ Autor: Underscores.me URI del autor: http://underscores.me/ Descripción: Descripción Versión: 1.0 Licencia: Licencia pública de GNU Licencia URI: licencia. Etiquetas de txt: * / @import "reset"; @import "global"; @import "menu"; @import "contenido"; @import "asides"; @import "media"; @importar 'navegación'; @import 'comentarios'; @importar 'widgets'; @import 'scroll';
Asegúrese de que estos archivos se importen en el mismo orden en que apareció el CSS en el documento original. Puedes ver que empezamos con Reiniciar Y añada el resto en el orden correcto. Todavía tienes que pensar en el orden en que se definen las reglas en el CSS final!
Importante: También tenga en cuenta que el signo de exclamación (
Accentsconagua
!) en la primera línea. Esto le dice al compilador no para despojar a este importante comentario. Necesitamos hacer esto porque antes configuramos la opción. output_style =: comprimido (en el config.rb expediente). Esto significa que todos los espacios en blanco y los comentarios se eliminarán de la versión compilada. Esto es una gran cosa y ciertamente quieres que eso suceda, ¡pero no aquí! Si este comentario fue eliminado por el compilador, WordPress no reconocería este tema. Hemos hecho todo el trabajo manual, ahora es el momento de poner en funcionamiento la automatización. Sigue adelante y borra el style.css Archivo desde la raíz del tema ya que ya no lo necesitamos. Ahora, si ha seguido con éxito todos los pasos anteriores, entonces debería poder abrir Brújula.app y elige Ver una carpeta. Seleccione el directorio raíz de su tema (en nuestro caso, es el wp-tuts carpeta dentro de wp-contenido / temas)
Después de un breve retraso, debería ver una nueva style.css archivo que se ha generado. Ábrelo, y deberías ver una versión reducida. Esto es una indicación de que todo funcionó como se esperaba..
En este punto, hemos convertido el CSS base del tema en fragmentos de código pequeños y manejables, y ahora veremos cómo usar Compass con nuestro proyecto..
Compass es un marco que proporciona muchas funciones poderosas para facilitarte la vida al crear CSS. Porque estamos usando Brújula.app, Podemos incorporar la funcionalidad proporcionada por Compass simplemente importando el módulo requerido en nuestro estilo.scss expediente. Por ejemplo, si desea los módulos CSS3 de Compass, simplemente haga esto:
/ * Haga que esta sea la primera importación que haga, entonces estará disponible para todos los archivos. * / @import "compass / css3";
Eso es realmente, ahora puede dirigirse al sitio web de Compass y cuando esté listo para usar cualquiera de sus funciones en su proyecto, sabrá exactamente cómo hacerlo..
Ahora tiene todo lo que necesita para comenzar a usar Sass y Compass al crear temas en WordPress. A continuación, veremos un par de ejemplos muy simples de cómo usarlos y mientras este tutorial es no Una introducción a Sass y Compass, los siguientes ejemplos deberían ayudar a los principiantes a reconocer aún más los beneficios de usar un preprocesador CSS..
Como ahora estamos aprovechando la potencia de un preprocesador, podemos ser más eficientes al escribir CSS y evitar repetirnos a nosotros mismos. Una de las cosas que tengo en cada proyecto de WordPress es una _vars.scss archivo donde guardaría cualquier cosa que sea específica del proyecto en variables. De esa manera, puedo referirme a los nombres de las variables en muchos archivos, y si tuviera que cambiar algo, solo tendría que hacerlo en un solo lugar..
/ * Ejemplo de los tipos de cosas que podría poner en _vars.scss * / $ brand-color: # 56483B; $ default-padding: 24px;
Para usarlos en toda tu colección de .scss archivos, solo @importar como cualquier otro archivo en estilo.scss, pero solo asegúrate de que sea la primera, o justo después Reiniciar estaría bien también Una vez que lo hayas importado, usa las variables como esta:
/ * Dentro de cualquier archivo importado DESPUÉS de _vars.scss, puedes usar todas tus variables * / .logo color: $ brand-color
A menudo, muchas personas solo usarán Compass por sus habilidades de prefijo de proveedor. Yo caigo en esa categoría y aquí hay un pequeño ejemplo para mostrar por qué:
/ * Sin Brújula * / * -moz-box-sizing: border-box; -webkit-box-dimensionamiento: cuadro de borde; tamaño de caja: caja de borde; / * Con Compass * / * @include box-sizing (border-box);
Espero que este tutorial haya sido útil para mostrar un flujo de trabajo simple pero efectivo al usar Sass y Compass dentro de WordPress. Los dos ejemplos que di al final son los fundamentos absolutos de usar Sass y Compass, y debe examinar ambos por separado para aprovecharlos al máximo..
Dicho esto, seguirás mejorando mucho tu flujo de trabajo con lo que has aprendido aquí. Al usar estas herramientas para dividir CSS en archivos pequeños, usar variables para reducir la repetición y eliminar la necesidad de escribir los prefijos de los proveedores, estará en su camino hacia un mejor flujo de trabajo de desarrollo.
