Share
En la primera parte de la serie ofrecí una descripción general rápida de los preprocesadores populares LESS y SASS. También cubrí los marcos con los que generalmente están asociados..
En la segunda parte de la serie realicé una inmersión profunda en MENOS y detallé algunas de sus características. Cubrimos variables, anidación y mixins..
En esta parte de la serie cubriré cómo estructurar lógicamente su .Menos archivos. También cubriré cómo conectarlos todos mediante importaciones y, por último, cubriré la ampliación rápidamente.
Vamos a crear un tema secundario para el tema predeterminado de Twenty Twelve. Para aquellos de ustedes que no están familiarizados con la creación de temas infantiles, lo único que necesitamos para crear un tema infantil es una style.css expediente. Para más información, visite el WordPress Codex..
Primero, queremos navegar a la carpeta de temas dentro de wp-contenido. Deberías ver el dos mil doce Carpeta dentro de aquí. Vamos a crear una nueva carpeta y nombrarla. menos construido. Abre esa carpeta.
Dentro de nuestro nuevo menos construido carpeta vamos a crear una carpeta aquí y nombrela css. Abre esa carpeta.
Dentro de la css carpeta, crea otra carpeta llamada Menos y luego abrirlo también. Dentro de esta carpeta querremos crear un nuevo archivo., style.less. Abrelo.
Para una inspección al azar, asegúrese de tener el siguiente camino ahora para su style.less expediente:
wp-content / themes / lessbuilt / css / less / style.less
Ahora que tenemos el Menos carpeta creada. Estaremos agregando todos nuestros .Menos archivos en esta carpeta.
Lo primero que vamos a querer hacer en nuestro style.less archivo es agregar el código para permitirnos designar que estamos creando un tema secundario. Por favor agregue lo siguiente:
Accentsconagua
/ * Nombre del tema: Menos URI de tema creado: http://wp.tutsplus.com Descripción: Tema infantil para el tema Twenty Twelve Autor: Jason Bradley URI de autor: http://everchangingmedia.com Plantilla: twentytwelve Versión: 0.1.0 * / @import url ("… /twentytwelve/style.css"); Eso es todo lo que necesitamos para empezar. A continuación, crearemos el otro. .Menos archivos y luego atarlos todos juntos de nuevo aquí en style.less.
El primer archivo que voy a sugerir que creemos es un variables.less expediente. Aquí es donde vamos a almacenar todas las variables que usaremos para nuestro tema secundario. Esto será accesible a todos nuestros .Menos archivos en nuestro Menos carpeta.
Abre el nuevo archivo y pega lo siguiente:
// variables.less // Colors @white: #fff; @gray: # 666; @ gris oscuro: # 333; @ luz gris: #eee; @blue: # 4d8b97; @ azul oscuro: # 335c64; // Content @ body-background-color: @gray; @ color del cuerpo: @ luz gris; @ content-background-color: @ gray-dark; // Encabezado @ sitio-título-color: @white; @ site-title-color-hover: @blue; @ site-description-color: @ gray-light; // Links @ links-color: @blue; @ links-color-hover: @ blue-dark; // Navigation @ menu-items-color: @ gray-light; @ menu-items-color-hover: @blue; @ menu-items-color-active: @white; // Posts @ entry-title-color: @white; @ border-color: @gray; // Widgets @ search-form-background-color: @gray; @ search-form-border-color: @gray; @ search-form-text-color: @white;
El siguiente archivo que vamos a crear es un mixins.less expediente. La mayoría de los cambios que vamos a hacer son a los colores del enlace. Voy a crear una mezcla que toma un color de enlace y un color de enlace. Devolverá el estilo basado en lo que se le pasa..
Primero crea un mixins.less expediente. Abre ese archivo y pega lo siguiente en él:
// mixins.less .links (@ link-color: @blue, @ link-color-hover: @ blue-dark) a color: @ link-color; &: hover color: @ link-color-hover;
El siguiente archivo contendrá varios estilos como el cuerpo y los enlaces. Crear un misceláneo archivo luego pegar en el siguiente:
// misc.less body background-color: @ body-background-color; color: @ color del cuerpo; .site background-color: @ content-background-color; .links ();
Se sugiere mantener todos los estilos de navegación juntos para que podamos saber rápidamente dónde ir para editar nuestros menús..
Crear un navegación.a menos archivo y añadir lo siguiente a él:
// navigation.less .main-navigation li .links (@ menu-items-color, @ menu-items-color-hover); .current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor a color: @ menu-items-color-active;
A continuación, vamos a agregar el estilo para el título y la descripción del sitio en el encabezado..
Crear un header.less archivo y añadir lo siguiente a él:
// header.less .site-title a color: @ site-title-color; .site-header h1, h2 .links (@ site-title-color, @ site-title-color-hover); .site-header h2 color: @ site-description-color;
A continuación, querremos añadir un poco de estilo para nuestras publicaciones. Estaremos cambiando el color del título y los colores del enlace de encabezado y pie de página de entrada.
Crear un posts.less archivo y añadir lo siguiente a él:
// posts.less .site-content article border-bottom: 4px double @ border-color; .entry-header .entry-title .links (@ entry-title-color); .entry-header, .entry-meta .links ();
Queremos que nuestros títulos de página también sean blancos. También le sugiero que ponga aquí también las diferencias de estilo que desee para las páginas en comparación con las publicaciones..
Crear un pages.less archivo y añadir lo siguiente:
// pages.less .entry-header .entry-title color: @ entry-title-color;
Quería agregar un borde a la izquierda de la barra lateral, así que voy a agregar eso en un sidebar.less expediente. Crea ese archivo y agrega lo siguiente:
// sidebar.less #secondary border-left: 1px solid @ border-color; relleno-izquierda: 20px;
Queremos que los títulos de los widgets sean blancos y que los enlaces de nuestros widgets coincidan con los otros enlaces de nuestro tema infantil. También quiero cambiar los colores del formulario de búsqueda..
Se sugiere poner cualquier estilo de widgets en widgets.less y mantener el estilo para el contenedor alrededor de ellos en sidebar.less.
Crear un widgets.less archivo y añadir lo siguiente a él:
// widgets.less .widget-area .widget .widget-title color: @ gray-light; .links (); // Buscar formulario #s, #searchsubmit background: @ search-form-background-color; color de borde: @ search-form-border-color; color blanco;
El último archivo que vamos a crear es footer.less. Contendrá cualquier estilo para el pie de página de nuestro tema hijo.
Crear un footer.less archivo y añadir lo siguiente a él:
// footer.less footer [role = "contentinfo"] .links ();
Así que hemos creado todo nuestro individuo. .Menos archivos para dividir nuestros cambios de estilo en una estructura lógica. Debería haber visto que cuando estábamos creando nuestros archivos, estábamos usando las variables que creamos en variables.less en todos nuestros otros .Menos archivos. También hemos utilizado nuestro .campo de golf() mezcla de mixins.less mucho tambien.
La forma en que vamos a conectar todos estos .Menos archivos juntos es mediante el uso de importaciones.
Las importaciones en CSS y LESS son como las de otros idiomas. Le está diciendo a su compilador que quiere que su archivo actual conozca y use otros archivos. Es como importar una biblioteca o un framework que usas en .NET, gemas de Ruby, etc..
La sintaxis para importar un archivo con LESS es como la de CSS. Ya que todos nuestros .Menos Los archivos están en la misma carpeta, usaremos lo siguiente:
@import "filename.less";
Esto le dirá a nuestro compilador MENOS que cuando compile este archivo, también debe usar este otro archivo.
En nuestro style.less archivo, vamos a querer agregar importaciones para cada uno de los .Menos archivos que hemos creado. Esto también asegurará que cualquier .Menos archivo que importas en style.less será conectado también.
Por ejemplo, si importamos variables.less y widgets.less en nuestro style.less archivo, las variables que definimos en variables.less será accesible en widgets.less.
/ * Nombre del tema: Menos URI de tema creado: http://wp.tutsplus.com Descripción: Tema infantil para el tema Twenty Twelve Autor: Jason Bradley URI de autor: http://everchangingmedia.com Plantilla: twentytwelve Versión: 0.1.0 * / // Importar estilos de temas principales @import url ("… /twentytwelve/style.css"); / * / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ CONTENTS / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ // \ / \ / \ / \ 1. Misceláneo - Variables - Mixins - Misc 2. Navegación 3. Encabezado 4. Puestos 5. Páginas 6. Barra lateral 7. Widgets 8. Pie de página * / / * ------------------------------------------ ---------------------------- 1. Miscelánea * / // Variables @import "variables.less"; // Mixins @import "mixins.less"; // Misc @import "misc.less"; / * -------------------------------------------------- ---------------------- 2. Navigation * / @import "navigation.less"; / * -------------------------------------------------- ---------------------- 3. Header * / @import "header.less"; / * -------------------------------------------------- ---------------------- 4. Posts * / @import "posts.less"; / * -------------------------------------------------- ---------------------- 5. Páginas * / @import "pages.less"; / * -------------------------------------------------- ---------------------- 6. Barra lateral * / @import "sidebar.less"; / * -------------------------------------------------- ---------------------- 7. Widgets * / @import "widgets.less"; / * -------------------------------------------------- ---------------------- 8. Pie de página * / @import "footer.less"; Ahora que tenemos todos nuestros .Menos Archivos creados y todos ellos importados en nuestro style.less archivo, vamos a querer establecer la ruta de salida de style.less en CodeKit.
Cubrimos cómo configurar la salida de nuestro .Menos archivo en el post anterior.
Lo mejor de usar LESS para crear y compilar su CSS es que puede elegir el formato que desea compilar. Esto significa que puede compilarlo en su forma regular o minimizar sus archivos.
Definitivamente se recomienda minimizar todos los sitios de su sitio. .css archivos. Cuanto más pequeño sea el archivo, más rápido se cargará su sitio. Desea el tamaño de archivo más pequeño porque cada página no se cargará y el usuario la verá hasta que aparezca .css los archivos se cargan. La velocidad de carga de tu página también afecta tu SEO.
Con CodeKit, cambiar la configuración de su salida para minimizarla es tan fácil como cambiar la Estilo de salida Minificado. Ahora cada vez que realice un cambio en cualquiera de sus .Menos archivos, CodeKit los compilará automáticamente y los reducirá a los temas de su hijo style.css expediente.
He repasado las mejores prácticas para estructurar su .Menos archivos en su tema o tema infantil. También hablé sobre la estructura de la carpeta y dónde colocar su .Menos archivos.
Te guié a través de la creación de todos los .Menos archivos y hablé sobre cómo conectarlos todos a su style.less archivo utilizando las importaciones. Por último, hablé sobre dónde establecer la ruta de salida de su style.less y cómo hacer que CodeKit minimice su .Menos archivos cuando se compila.
También he añadido el menos construido Tema infantil de GitHub para que puedas usarlo o descargarlo..
