Share
En la primera parte de esta serie, proporcioné una descripción general de los preprocesadores CSS populares LESS y SASS. También compartí algunos de los marcos en los que se utilizan.
Planeo profundizar en MENOS y hablar sobre las partes del idioma que uso con más frecuencia. También planeo mostrarle cómo empezar a usarlo con CodeKit.
Vamos a profundizar en!
Personalmente uso LESS para la mayoría de los proyectos de WordPress. Paso mucho tiempo trabajando con Standard y usa Bootstrap como el marco de su elección..
Desde que Bootstrap usa LESS para compilar su CSS, he aprendido cómo usar su .Menos Archivos para realizar modificaciones. Sé de otros diseñadores y desarrolladores web que prefieren usar Foundation. Desde que Foundation usa SASS, han aprendido a usar eso en su lugar..
Personalmente, estoy empezando a trabajar en otro proyecto web que utiliza SASS, y ha sido relativamente fácil retomar las cosas debido a mi experiencia con MENOS.
Las variables son bastante autoexplicativas. Puedes crear una variable en algún lugar de tu .Menos archivo y luego haga referencia a él en otros lugares en ese archivo, u otros archivos. Tiendo a usarlo para colores, fuentes, relleno y márgenes..
Aquí hay un ejemplo:
// Variables @red: # ff0000; @green: # 00ff00; @blue: # 0000ff; // Estilo // Enlaces a color: @blue; a: visitó color: @blue;
Que luego compilaremos a esto:
a color: # 0000ff; a: visitó color: # 0000ff;
Si desea cambiar el color de ambos estilos de enlace, solo necesita cambiar la variable:
@azul
desde
# 0000ff
a
# 0000a4
Cambia en un punto, recompila y ha cambiado todas las instancias de esa variable en todo el archivo.
Otra gran manera de usar estas variables también sería usar nombres más semánticos como:
@color primario
y
@color secundario
Luego puedes usar esas variables a lo largo de tu código. Cuando su diseñador crea esos colores, puede cambiarlos solo una vez, volver a compilarlos, y listo.!
El anidamiento se usa como anidar la lógica en una si / else bloque en su PHP o JavaScript: establece su selector de nivel superior como .enviar, a continuación, coloque los otros selectores dentro de ella. Se eliminará la necesidad de escribir repetidamente .enviar delante de tus otros selectores como tal:
// Publicar .post padding: 20px; .post-header margen: 20px 0;
Que luego compilaremos a esto:
.post padding: 20px; .post .post-header margen: 20px 0;
También puedes usar Y para concatenar selectores también. Un ejemplo podría ser si desea apuntar a widgets específicos en su barra lateral. Supongamos que desea aplicar un estilo diferente al color de fondo de los widgets Entradas recientes y Comentarios recientes. Puedes hacer lo siguiente en MENOS:
.widget padding: 20px; & .widget_recent_entries background-color: white; & .widget_recent_comments background-color: black;
Eso compilaría en esto:
.widget padding: 20px; .widget.widget_recent_entries background-color: white; .widget.widget_recent_comments background-color: black;
También puedes usar esto para pseudo clases como :flotar, :activo, :visitó, :antes de, y :después.
// Enlaces a color: azul; &: hover color: rojo; &: visitó color: rojo;
Eso compilaría a esto:
a color: azul; a: hover color: rojo; a: visitó color: rojo;
Los mixins son básicamente una serie de atributos de estilo que desea agrupar. Un gran ejemplo de esto es para los atributos que son diferentes entre los navegadores, como el radio del borde.
En lugar de tener que recordar cada uno, puede llamar a su mezcla y le proporcionará cada atributo. Aquí hay un ejemplo:
// Mixin .border-radius border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; // Widget .widget .border-radius;
Eso compilará a lo siguiente:
.widget radio-borde: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
¿Qué pasa si desea utilizar el radio de borde varias veces en su .Menos archivo pero quería diferentes cantidades para cada uno? Ahí es cuando usarías una mezcla paramétrica..
Esto simplemente significa que puede reutilizar una mezcla y pasarle un argumento para usar. Aquí hay un ejemplo:
// Mixin .border-radius (@radius: 4px) border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; // Widget .widget .border-radius (); // Publicar .post .border-radius (8px);
Eso compilaría a esto:
.widget radio-borde: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; .post border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;
Este es un ejemplo del uso de variables, anidamiento y combinaciones en un mismo momento:
// Variables @ widget-recent-posts-border-radius: 4px; @ widget-recent-posts-background-color: blanco; @ widget-recent-posts-link-color: @blue; @ widget-recent-comments-border-radius: 8px; @ widget-recent-comments-background-color: negro; @ widget-recent-comments-link-color: @red; // Colores @blue: # 0000ff; @red: # ff0000; // Mixins .border-radius (@radius: 4px) border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; // Widgets .widget & .widget_recent_entries background-color: @ widget-recent-posts-background-color; .border-radius (@ widget-recent-posts-border-radius); ul li a color: @ widget-recent-posts-link-color; & .widget_recent_comments background-color: @ widget-recent-comments-background-color; .border-radius (@ widget-recent-comments-border-radius); ul li a color: @ widget-recent-comments-link-color;
Que todos compilarían en esto:
.widget.wiget_recent_entries background-color: white; radio del borde: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; .widget.widget_recent_entries ul li a color: # 0000ff; .widget.wiget_recent_comments background-color: black; radio del borde: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; .widget.widget_recent_entries ul li a color: # ff0000;
Es extremadamente fácil configurar su proyecto CodeKit. Simplemente puede arrastrar y soltar su carpeta en CodeKit, o puede hacer clic en el botón más en la parte inferior izquierda y luego seleccionar una carpeta desde el explorador de archivos.
Una vez que lo haga, CodeKit escaneará automáticamente todos los archivos en esa carpeta y luego los agrupará en las siguientes categorías:
Así que ahora ha importado sus archivos de proyecto. A continuación vamos a configurar la ruta de salida de su .Menos archivos. Sugeriría tener un css carpeta y un Menos carpeta dentro de ella. Usted querrá asegurarse de tener todos sus archivos en ese Menos carpeta para apuntar a tu style.less expediente.
Usted querrá cambiar a la vista de estilos. Queremos tener el style.less archivo se compila en la carpeta raíz de su tema como style.css. Para hacer esto, usted querrá hacer clic derecho en el style.less archivo, y seleccione "Establecer ruta de salida ... ". Esto abrirá un navegador de archivos.
A continuación, tendrá que hacer clic en el nombre de archivo de salida y la entrada de texto de extensión. Una vez que lo hagas, puede llenarse automáticamente. style.css para ti. Si no es así, entonces querrás entrar style.css. Por último harás click en Seleccionar ahorrar.
¡Estamos casi alli! A continuación tendremos que seleccionar una configuración de compilación. Verá que la pantalla de configuración de la compilación se revela cuando hace clic en un .Menos expediente. Tenemos tres estilos de salida disponibles:
Seleccione uno de los anteriores y haga clic en "Compilar". Debería recibir una notificación de que su style.less archivo ha compilado.
Si toda su sintaxis es correcta, su compilación será exitosa. Si hay algún error, le dará la vuelta a la Iniciar sesión Ver y darle el número de línea y la explicación del error..
Si todo se compila correctamente, debería poder abrir su style.css Archivo y ver la salida. Mientras editas tu .Menos archivos y guárdalos, CodeKit recompilará automáticamente tus archivos.
Nota: asegúrese de no realizar ningún cambio en el style.css archivo, porque tan pronto como recompiles tu .Menos archivos, sus cambios serán anulados.
Ahora hemos pasado por una inmersión más profunda en MENOS y hemos desglosado algunas de las características populares. He explicado algunas razones por las que personalmente elijo usar MENOS en mis proyectos de WordPress y cómo usar CodeKit para compilar todos mis archivos.
En el próximo post, voy a entrar en mayor detalle sobre cómo estructurar su '.Menos'archivos y conectarlos todos juntos.
Accentsconagua