Menos archivos. MENOS representación. CSS es difícil

Uso de la propiedad Tamaño de campo para campos numéricos en Tablas de acceso Puedes regular el espacio que ocupan los registros en la base de datos. También se puede cambiar el tamaño de los campos de texto, aunque el efecto de esto en términos de ahorro de espacio no es tan notable.

Nota: Las funciones descritas en este artículo no se aplican a las aplicaciones web ni a las bases de datos web de Access.

En este artículo Resultado de cambiar el tamaño del campo

Puedes cambiar el tamaño como campo vacío y un campo que ya contiene datos. El efecto de cambiar el tamaño de un campo depende de si contiene datos.

Si un campo no contiene datos, cambiar el tamaño de un campo establece un límite en el tamaño de los nuevos valores en ese campo. Para campos numéricos, el tamaño define con precisión el volumen espacio en disco, usado Acceder a la aplicación para almacenar cada valor del campo correspondiente. Para los campos de texto, el tamaño del campo determina la cantidad máxima de espacio en disco que Access puede asignar para cada valor en ese campo.

Si un campo contiene datos Cuando cambia el tamaño de un campo, Access trunca cualquier valor en el campo que exceda tamaño dado y también limita el tamaño de los nuevos valores de datos en el campo, como se describe anteriormente.

Cambiar el tamaño de un campo numérico

Consejo:

Constructor.

En el área Propiedades de campo, en la pestaña General, Tamaño de campo. Puede seleccionar uno de los valores que se enumeran a continuación.

• Byte: para números enteros de 0 a 255. Se requiere 1 byte para el almacenamiento.

  Entero: para números enteros de -32768 a +32767. Requiere 2 bytes para el almacenamiento.

  Entero largo: para números enteros de -2.147.483.648 a +2.147.483.647. Requiere 4 bytes para almacenamiento.

  Consejo: El tipo de datos Entero largo se debe utilizar al crear una clave externa para asociar un campo con un campo. clave primaria otra tabla que tenga el tipo de datos "Contador".

  Punto flotante único: para números de punto flotante de -3,4 x 1038 a +3,4 x 1038, que tienen hasta 7 dígitos significativos. El almacenamiento requiere 4 bytes.

  Coma flotante doble: para números de coma flotante de -1,797 x 10308 a +1,797 x 10308, que tienen hasta 15 dígitos significativos. El almacenamiento requiere 8 bytes.

  Código de replicación: para el GUID necesario para la replicación.

  Nota: La replicación no es compatible con archivos con formato ACCDB.

  numero real- para valores numéricos de -9,999... x 1027 a +9,999... x 1027. Se requieren 12 bytes para el almacenamiento.

Cambiar el tamaño de un campo de texto

Consejo: Si el campo cuyo tamaño desea cambiar ya contiene datos, se recomienda crear copia de reserva bases.

En el panel de navegación, haga clic en clic derecho Pase el mouse sobre la tabla que contiene el campo que desea cambiar y seleccione Diseño.

En la cuadrícula Diseño de tabla, seleccione el campo cuyo tamaño desea cambiar.

En el área Propiedades de campo en la pestaña General, especifique nuevo tamaño campos como el valor de la propiedad Tamaño de campo. Introduzca un valor entre 1 y 255. Este número determina cantidad máxima caracteres contenidos en cada valor. Para campos grandes, utilice el tipo de datos Memo (Texto largo en Access 2016).

Nota: Para datos en campos de texto(en Access 2016 - "Texto breve") Access no reserva mas espacio, de lo necesario para almacenar los valores reales. La propiedad Tamaño del campo determina el tamaño valor máximo campos.

No me gusta el CSS. Es simple y claro. Ésta es la fuerza impulsora de Internet, pero es demasiado limitada y difícil de gestionar. Es hora de ordenar este lenguaje y hacerlo más útil usando CSS dinámico usando MENOS.
Explicaré mi posición con un ejemplo. En lugar de usar #FF9F94 para obtener un color melocotón oscuro, ¿por qué no simplemente almacenar el valor de ese color en una variable para usarlo más adelante? Para recolorear el sitio bastará con cambiar el valor de la variable en un solo lugar y listo.
En otras palabras: será muy bueno si usamos un poco de codificación y lógica en CSS para hacerlo más poderosa herramienta. Lo bueno es que todo esto es posible usando MENOS.

¿Qué es MENOS? MENOS es un superconjunto de CSS. Esto significa que cualquier código CSS es MENOS válido, pero elementos adicionales MENOS no funcionará en CSS sencillo. Esto es fantástico porque el CSS existente ya es MENOS código válido, lo que reduce la barrera de entrada a la nueva tecnología.
LESS agrega muchas propiedades dinámicas útiles a CSS. Introduce variables, operaciones, elementos similares a funciones y mixins. Ser capaz de escribir hojas de estilo de forma modular le ahorrará muchos problemas. Cómo utilizar LESS Hay dos formas. usando MENOS. Puedes crear un archivo MENOS y convertirlo cuando ayuda javascript sobre la marcha o compílelo con antelación y utilice el resultado archivo css. No tengas miedo de la palabra "compilar" (la uso todo el tiempo), es muy simple. Usa MENOS y. archivo javascript Primero, debe descargar un archivo Javascript del sitio web de LESS y vincularlo a la página como cualquier otro script js.

Luego crearemos un archivo con la extensión .less y lo vincularemos usando el siguiente código:

Asegúrese de adjuntar el archivo MENOS antes del JS.
Ahora el archivo MENOS funcionará como CSS normal.

Compilando un archivo MENOS Aunque este método es un poco más tedioso, a veces es preferible. Para no convertir el código cada vez que se carga la página, puede utilizar el archivo CSS resultante. Convertidores: para Windows - Winless y LESS.app para Mac Aprovechando el poder de LESS Finalmente, divirtámonos un poco: escriba MENOS código. Como verás, el código es muy fácil de leer y entender, ya que utiliza una sintaxis similar a CSS. Variables Las variables en LESS funcionan de la misma manera que en PHP, JS y la mayoría de los otros lenguajes de programación. Puede usarlos para almacenar un valor y luego usar variables en lugar del valor en sí cuando lo necesite.

@ fuente de encabezado: Georgia; h1, h2, h3, h4 (familia de fuentes: @header-font; ) .large (familia de fuentes:@header-font; )
En el ejemplo anterior, declaramos la variable @header-font y le escribimos el valor "Georgia". Ahora podemos usar esta variable siempre que queramos instalar la fuente Georgia. Si decidimos que Trebuchet MS es más adecuado para nuestros encabezados, entonces no necesitaremos revisar todo el archivo, simplemente cambiaremos el valor de la variable.
He encontrado un gran uso para las variables al definir los colores del sitio. En los viejos tiempos (que no fueron hace mucho tiempo) usaba algo como esto:

/* Colores para mi sitio web #ff9900 - Naranja - usado para enlaces y elementos resaltados #cccccc - Gris claro - usado para bordes #333333 - Negro oscuro - Usado para fondos oscuros y color de texto de encabezado #454545 - Negro medio - Usado para texto general color */ cuerpo (fondo: #333333; color: #454545; ) a ( color:#ff9900; ) h1, h2, h3, h4, h5, h6 ( color: #333333; )
No hay nada malo en documentar tus colores de esta manera, es buena practica, el problema es que la documentación no tiene nada que ver con la funcionalidad de tus estilos. Si decide cambiar los colores después de la línea 2000 del código y luego cambia de opinión en la línea 3567, será extremadamente difícil corregir todos los colores y la documentación.
Con LESS podemos modificar y documentar nuestro flujo de trabajo al mismo tiempo.

/* Colores para mi sitio web */ @color-orange: #ff9900; @color-gris_claro: #cccccc; @color-negro_dark: #333333; @color-negro_medio: #454545; cuerpo ( fondo: @color-black_dark; color: @color-black_medium; ) a ( color:@color-orange; ) h1, h2, h3, h4, h5, h6 ( color: @color-black_dark; )

Alcance de la variable El alcance de la variable describe los lugares donde son accesibles. Si define una variable al principio del archivo LESS, estará disponible para cualquier código escrito después.
También puedes definir una variable dentro reglas CSS. En este caso, las variables no serán accesibles fuera de esta regla; se podrán utilizar localmente.

Un botón ( @color: #ff9900; color:@color; ) ( fondo: @color; )
En este ejemplo, MENOS no se convertirá debido al error, el color no está definido para su uso dentro de un elemento de botón. Si una variable se declara fuera de un elemento y dentro de otro elemento, solo será accesible localmente.

@color: #222222; un botón ( @color: #ffffff; color:@color; ) ( fondo: @color; )
Aquí el enlace será de color blanco y el botón tendrá un fondo negro.

Variables en Variables Si ha codificado en PHP, entonces sabe que puede declarar el nombre de una variable en otra variable.

@color-navidad_rojo: #941f1f; @nombre-del-color: "color-navidad_rojo"; color: @@nombre-del-color;
Personalmente, casi no uso esto ya que las variables dentro de variables son casi inútiles sin cierres, pero estoy seguro de que hay algunos ejemplos inteligentes usando esto.

Constantes y variables Es importante tener en cuenta que, al contrario de lo que acabas de leer, las variables en LESS se parecen más a constantes. Esto significa que, a diferencia de las variables, sólo se pueden definir una vez. Operaciones Puede lograr un control increíblemente preciso utilizando operaciones en LESS. La idea es simple:

Botón( @unit: 3px; borde:@unit solid #ddd; relleno: @unit * 3; margen: @unit * 2; )
El código anterior establece la variable unitaria en 3px. Luego establecemos este valor en el ancho del borde, el relleno en tres veces este ancho y el margen en el doble de este ancho.
Puedes utilizar operaciones de multiplicación, división, suma y resta. Para crear un bloque con un borde que aumenta el ancho de los lados en el sentido de las agujas del reloj, puedes usar el siguiente código:

Caja( @base_unit: 1px; borde: @base_unit @base_unit + 1 @base_unit + 2 @base_unit + 3 )

Gestión del color Mi característica favorita de LESS es la gestión del color. Puede utilizar operaciones para mezclar colores y múltiples funciones especiales para trabajar con operaciones de color Si desea cambiar el valor de un color, puede hacerlo restando o sumando otro color.

@color: #941f1f; botón (fondo: #941f1f + #222222; borde: #941f1f - #111111;)
La operación en segundo plano anterior aumentará cada valor HEX en 2. El resultado será "B64141", una versión más clara del color original. La operación del marco reducirá cada valor HEX en 1 y producirá más color oscuro: “830E0E”.
En la práctica, hay muchos casos en los que partimos de un color base y necesitamos una versión del mismo ligeramente oscurecida o aclarada.

@botón de color: #d24444; input.submit ( color:#fff; fondo:@color-button; borde:1px sólido @color-button - #222; relleno:5px 12px; )
Este código crea un botón rojo con un borde ligeramente oscuro. Este situación común y definir un solo color es de gran ayuda.

El poder de las variables es más obvio a continuación. Si desea cambiar el color del botón, cambie el valor de @color-button a verde, cambiará no sólo color de fondo, pero también reemplazará el trazo con una versión más oscura de verde.

Otro gran uso de esto es la creación de degradados. Normalmente elijo un color medio y declaro el degradado en base a eso. Hago el comienzo un poco más claro y el final un poco más oscuro. El resultado será una bonita transición, algo como esto:

@color: #faa51a; .button (fondo: -webkit-gradient(lineal, arriba izquierda, abajo izquierda, desde(@color + #151515), hasta(@color - #151515)); fondo: -moz-linear-gradient(arriba, @color + #151515, @color - #151515)

Funciones de color Hay muchas más posibilidades para trabajar con color; LESS te permite manipularlos en nivel de enlace. Puede aclarar, oscurecer, saturar, desaturar y rotar colores. Echa un vistazo a los siguientes ejemplos con imágenes para entender qué hace cada uno.

@color: #3d82d1; .left_box (fondo:aclarar(@color, 20%); ) .right_box (fondo:oscurecer(@color, 20%); )

@color: #3d82d1;.left_box (fondo: desaturar(@color, 18%); ) .middle_box (fondo: @color; ) .right_box (fondo: saturar(@color, 18%); )

@color: #3d82d1;.left_box (fondo: spin(@color, 25%); ) .middle_box (fondo: @color; ) .right_box (fondo: spin(@color, -25%); )

Extracción de información de color Cada color en LESS se convierte a HSL (tono, saturación, luminosidad) para brindarle control sobre los niveles del canal. Esto permite manipular los colores de forma más sutil y obtener información sobre el color directamente.

@color = #167e8a; matiz (@color); saturación(@color); luminosidad(@color);
Esto puede parecer demasiado insignificante: ¿por qué necesitamos esta información cuando podemos simplemente ingresar el valor HEX? Si eres una persona normal, no podrás descifrar el color HEX de inmediato. Los valores HEX representan el espectro RGB: los dos primeros caracteres controlan la cantidad de rojo, los dos siguientes controlan la cantidad de verde y los dos últimos controlan la cantidad de azul.
Es bastante obvio que #ff0000 es rojo, ya que es RGB(255,0,0). Tonos de rojo, nada de verde o azul. Sin embargo, si ve #1f6b2d, será difícil decodificar que es de color verde oscuro. En la notación HSL, el tono controla todo, puedes simplemente nombrar el color y el resto simplemente establecerá el tono (no del todo cierto, pero así es como funciona).
Con eso en mente, si encuentras un buen color morado como #e147d4, podrás encontrar muy fácilmente varios colores exactamente con el mismo tono. Digamos que quieres crear una versión cremosa y más pastel de #e147d4, esto es lo que puedes hacer:

El nuevo color tendrá el mismo tono, pero diferente saturación y brillo. El resultado será #c480bf, al que es mucho más difícil llegar desde #e147d4 usando solo HEX.

La combinación de funciones MENOS le permite usar funciones dentro de funciones, por lo que si desea desaturar y girar un color, simplemente puede hacer esto:

@color: #c480bd; .class (color de fondo: desaturar(giro(@color, 18), 12%);)

Anidación durante escribiendo CSS Usamos estilos en cascada. Para cambiar los márgenes de un párrafo sólo dentro de un artículo, puedes utilizar el siguiente código:

Artículo.post p( margen: 0 0 12px 0; )
No hay nada de malo en este enfoque, pero si también necesitamos cambiar el estilo de los enlaces, citas, encabezados, etc. Solo dentro de un artículo, necesitarás usar el prefijo “article.post” para cada elemento. Esto hace que escribir código sea más aburrido y más difícil de leer.
En MENOS podemos anidar estas reglas, dándonos una versión más corta y lógica de nuestros estilos. Por ejemplo:

Article.post ( p( margen: 0 0 12px 0; ) a ( color: rojo; ) a:hover ( color: azul; ) img ( float:left; ) )
No se requiere sangría, pero hace que el código sea más legible. Los niveles de anidación no están limitados.

A ( color:rojo; ) p ( margen:0px; ) artículo ( a ( color: verde; ) p ( color: #555; a ( color:azul; ) ) )

Mixins Mixins en LESS le evita escribir código innecesario. ¿Alguna vez has tenido que crear marco redondeado en el que solo esquinas superiores¿redondeado?

Tabulador ( -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; radio del borde superior izquierdo: 6 px; radio del borde superior derecho: 6 px)
Y así cada vez... Con MENOS, todo esto se puede cambiar creando un mixin. Las impurezas son elementos reutilizables que, por regla general, se pueden añadir a cualquier elemento. Y ni siquiera necesitas aprender una nueva sintaxis.

Rounded_top ( -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; radio-superior-izquierdo del borde: 6px; radio-superior-derecho-del-borde: 6px; ) .tab (fondo: #333; color:#fff; .rounded_top; ) .submit ( .rounded_top; )
En el código anterior, hemos definido un elemento .rounded_top para redondear las esquinas superiores. Cuando lo agregamos a cualquier otro elemento como un mixin (ver .tab), esencialmente estamos importando las reglas que creamos para él. Gracias a esta sintaxis podemos utilizar cualquier elemento como mixin.

Rounded_top ( -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; borde-arriba-radio-izquierdo: 6px; borde-arriba-radio-derecho: 6px; ) .tab (fondo: #333; color:#fff; .rounded_top; ) .submit ( .tab; fondo: rojo; )
Los estilos del elemento.submit son esquinas redondeadas piso superior, blanco y fondo rojo (valor #333 anulado).

Mixins con parámetros Mixins con parámetros, suena complicado, solucionan muy bien el problema. de una manera sencilla. En los ejemplos anteriores, viste cómo podemos definir un elemento con un radio de 6px en las esquinas superiores. ¿Qué pasa si queremos crear un elemento con un radio de 3px? ¿Deberíamos declarar mixins diferentes para todos los valores de píxeles? Por supuesto que la respuesta es no, ¡debemos usar mixins con parámetros!
Son similares a las funciones porque pueden cambiar los valores cuando se llaman. Reescribamos el ejemplo con border-radius para ver cómo funciona.

Rounded_top(@radius) ( -webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz-border -radius-topright: @radius; border-top-left-radius: @radius; border-top-right-radius: @radius (fondo: #333; color:#fff; .rounded_top(6px); ) .enviar ( .rounded_top(3px); )
En el código anterior, el radio del elemento .tab es de 6px y el elemento .submit tendrá un valor de 3px.

Valores estándar Si normalmente usa el mismo radio de borde, pero a veces necesita uno diferente, debe darle al mixin un valor estándar.

Rounded_top(@radius:6px) ( -webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz -border-radius-topright: @radius; border-top-left-radius: @radius; border-top-right-radius: @radius (fondo: #333; color:#fff; .rounded_top; ). enviar ( .rounded_top(3px); )
En este ejemplo, .tab obtendrá el valor predeterminado de 6px y .submit obtendrá el valor predeterminado de 3px.

Múltiples parámetros También puede utilizar múltiples parámetros para identificar impurezas más complejas.

Radio(@radius:6px) ( -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; ) .button(@radius:3px, @fondo: #e7ba64, @padding: 4px) ( .radius(@radius); fondo:@fondo; borde: 1px sólido @fondo - #222; relleno: @padding; ) .read_more ( .button(0px); )
En este ejemplo, class.read_more está formateado con un relleno de 4px, color de fondo#e7ba64 y con un radio de borde de 0px.

Usar todos los argumentos a la vez Otra opción a la hora de usar argumentos es combinarlos. Las propiedades taquigráficas en CSS tienen varios valores escritos uno tras otro.

Div (borde:1px sólido #bbb;)
para preguntarle a todos elementos necesarios borde gris, puedes usar una función como esta:

Gray_border(@ancho: 1px, @tipo: sólido, @color: #bbb)( borde:@argumentos; ) div ( .gray_border(2px, discontinuo); )
@arguments esto es especial palabra clave, que genera todos los parámetros uno por uno en un orden determinado. El resultado del código MENOS anterior será:

Div (borde:2px discontinuo #bbb; )

Mixins paramétricos sin parámetros También puedes usar impurezas paramétricas sin parametros. Esto se usa cuando no necesita generar un mixin en CSS, pero desea que sus reglas se apliquen al elemento en el que se usa.

Alerta (fondo: rojo; color: blanco; relleno:5px 12px; ) .error_message ( .alert; margen: 0 0 12px 0; )
El CSS del código anterior será así:

Alerta (fondo: rojo; color: blanco; relleno:5px 12px; ) .error_message (fondo: rojo; color: blanco; relleno:5px 12px; margen: 0 0 12px 0; )
Para ocultar la clase .alert, debe configurar el parámetro en vacío.

Alert() (fondo: rojo; color: blanco; relleno:5px 12px; ) .error_message ( .alert; margen: 0 0 12px 0; )
El CSS terminado se verá así:

Error_message (fondo: rojo; color: blanco; relleno:5px 12px; margen: 0 0 12px 0; )
Esto se utiliza principalmente para reducir Tamaño CSS archivo.

Espacio de nombres El espacio de nombres en los lenguajes de programación se suele utilizar para agrupar elementos de funcionalidad similar. Podemos lograr algo similar en LESS combinando nuestro código con mixins.

#my_framework ( p ( margen: 12px 0; ) a ( color: azul; decoración de texto: ninguno; ) .submit ( fondo: rojo; color: blanco; relleno: 5px 12px; ) )
Al comenzar a trabajar en un sitio nuevo basado en su marco, puede agregar el enlace #my_framework y usarlo sin obstruir el espacio de nombres.

Botón_enviar ( #mi_marco > .enviar; )
También esto gran manera permiten cambiar y perfeccionar rápidamente los temas. Si está desarrollando varios temas para su empresa, para cambiar las plantillas sobre la marcha, puede colocarlas todas en un archivo MENOS usando paquetes.

#fw_1 ( p ( margen: 12px 0; ) a ( color:azul; decoración de texto: ninguno; ) .submit ( fondo: rojo; color: blanco; relleno:5px 12px; ) ) #fw_2 ( p ( margen: 8px 0; ) a ( color: rojo; decoración de texto: subrayado; ) .submit ( fondo: azul; color: blanco; relleno:8px 20px; ) ) .submit_button ( #fw_2 > .submit; )

Interpolación de cadenas La interpolación de cadenas es otra palabra elegante que significa que esto cadena arbitraria se puede almacenar en una variable y luego usarse en un valor de propiedad.

@url: "http://miempresa.com/assets/";imagen de fondo: url("@(url)/sprite.png");
Esto puede resultar útil al crear un marco centralizado.

Escapar A veces es necesario utilizar propiedades o valores que no son CSS válidos (reglas IE). Quizás hayas notado que en el ejemplo sobre gradientes no me preocupé por los usuarios de Internet Explorer.
Si deseas crear un degradado en IE, debes hacer algo como esto:

Filtro: progid:DXImageTransform.Microsoft.gradient(startColorstr="#666666", endColorstr="#444444");
Este CSS no es válido, por lo que LESS no se compilará. En este caso, puedes escapar de este valor, lo que permitirá que LESS lo omita.

Botón (fondo: -webkit-gradient(lineal, arriba izquierda, abajo izquierda, desde(#666666), hasta(#444444)); fondo: -moz-linear-gradient(arriba, #666666, @color - #444444) ; filtro: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr="#666666", endColorstr="#444444"";)
Todo lo que tienes que hacer es poner comillas alrededor de la sección y poner una tilde delante. Esta sección no pasará por el procesador LESS y no será descartada.

Importar Al igual que con CSS normal, puedes importar archivos. LESS le permite importar CSS y LESS usando la siguiente sintaxis:

@importar "reset.min.css"; @import "framework.less"; @importar "widgets";
La primera importación es bastante obvia. Importa las reglas CSS definidas en reset.min.css sin procesarlas con el analizador LESS.
La segunda importación insertará el contenido de framework.less y lo tratará como cualquier otra regla MENOS.
La tercera importación funciona igual que la segunda. Si la extensión no está instalada, el preprocesador lo considera un archivo MENOS.

Comentarios Naturalmente, comentarios multilínea están disponibles en MENOS en la misma forma que en CSS. LESS también permite el uso de comentarios de una sola línea como en PHP o Javascript, utilizando barras invertidas dobles.

/* Este es mi archivo LESS principal.

Gobierna cómo se ve la mayor parte del sitio. /* cuerpo ( padding:0px; // Esto restablece el relleno del cuerpo )
¿Qué falta? Aunque LESS es sorprendente, todavía existen algunas deficiencias cuando comienzas a usarlo, aunque no son muy perturbadoras.

Una de las características que me gustaría ver es el preprocesamiento (estoy de acuerdo, parece inútil). ¿Recuerda cómo se pueden escapar las cadenas para que no pasen por el analizador? El método actual no permite el uso de degradados con colores cambiables.
Filtro: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr="#faa51a", endColorstr="#f47a20"");

Este código funciona muy bien, pero los colores deben estar estrictamente definidos. Si se escapa la línea, las variables no se procesan. Sería bueno tener una opción donde las variables en cadenas de escape se procesen antes de enviarlas al archivo CSS. Conclusión Como con cualquier nueva tecnología
o se abusa del método. ¿Recuerda los logotipos reflectantes y los botones de cristal en los albores de la era Web 2.0?
No es necesario anidar todas las reglas, no es necesario crear variables para todo o un mixin solo para el ancho del marco. Si no sabe cuándo no utilizar el increíble poder de LESS, su código LESS se volverá tan ilegible como el CSS normal e igual de difícil de mantener. El truco consiste en saber cuándo utilizar estas funciones y métodos, y cuándo utilizar los habituales. CSS antiguo
Además, desaconsejo utilizar un archivo MENOS. No hay nada de malo en eso, pero no hay razón para cargar un archivo MENOS y procesarlo. Sin duda el script es muy rápido, pero estoy seguro de que sin él será más rápido. Normalmente desarrollo todos mis sitios con MENOS, tomo el archivo de salida, lo comprimo y uso un archivo CSS normal.

CSS es poderoso y idioma interesante estilo de página. Es rápido y comprensible, pero lo más importante es que en la versión mínima es compatible con absolutamente todos los navegadores, incluso los más pequeños. dispositivos móviles o televisores enormes.

Sin embargo, a pesar de todas sus indudables ventajas, CSS tiene algunas, ni siquiera desventajas, sino limitaciones. Estas limitaciones no son críticas, pero pueden extender significativamente el tiempo de desarrollo del proyecto.

¿Qué restricciones podrían ser estas? Por ejemplo, color. Si vemos una entrada como #FF9F94, entonces es imposible establecer de inmediato que significa un color melocotón oscuro. Es mucho más fácil crear una variable, por ejemplo darkPeach, asignarle el valor #FF9F94 y luego usar esta variable en la hoja de estilo. Qué ventajas puede aportar esto: no es necesario recordar el código de color para indicarlo en otro lugar; para cambiar un color en toda la tabla, sólo es necesario cambiar el valor de la variable.

En otras palabras, a CSS le falta un poco de programación y lógica para que trabajar con él sea más práctico. Es bueno que existan varias herramientas para esto, incluido LESS.

¿Qué es MENOS?

MENOS es lenguaje dinámico estilos, una especie de complemento de CSS que agrega un determinado conjunto de propiedades dinámicas a CSS: variables, mixins, operaciones, funciones, etc.

LESS es un script que se puede utilizar tanto en el lado del cliente (la tabla CSS se calcula en el navegador del usuario) como en el lateral. Sin embargo, existen mejores formas de utilizar LESS, como precompilar la tabla. En este caso, puedes obtener mesa estándar estilos que serán utilizados correctamente por el navegador y no requerirán una conversión constante nuevamente.

variables

Las variables en LESS funcionan exactamente igual que en otros lenguajes de programación. Usted crea una variable, le asigna un valor y luego puede usarla en cualquier regla CSS. Por ejemplo:

@serif-fuente: Georgia; h1, h2, h3, h4 (familia de fuentes: @serif-font;).texto grande (familia de fuentes: @serif-font;)

EN en este caso La variable @serif-font almacena el nombre de la fuente. Si necesita cambiar la fuente Georgia a Times New Roman, simplemente cambie el valor de la variable y el valor de la fuente cambiará en todo el documento. Es aún más conveniente utilizar variables con códigos de color. Por ejemplo, el siguiente fragmento de CSS

Cuerpo (color: #ff9900; color de fondo:#cccccc;) p (color: #ff9900;) h1 (color: #ff9900;)

se puede sustituir por lo siguiente:

@color-naranja: #ff9900; @color-gris: #cccccc; cuerpo (color: @color-naranja; color de fondo: @color-gris;) p (color: @color-naranja;) h1 (color: @color-naranja;)

Como puede ver, todo lo que necesita hacer es corregir los colores en el encabezado de su documento CSS para corregirlos en todo el documento.

Las variables tienen alcances. Dentro de cada regla, puede reasignar el valor de una variable para esa regla. En el siguiente ejemplo, el color del enlace será blanco y el color de fondo del botón será gris:

@color: #sssss; un botón ( @color: #ffffff; color:@color;) ( fondo: @color;)

Es importante tener en cuenta que las variables en LESS están bastante más cerca de las constantes, ya que es imposible reasignarlas más adelante en el código, sólo dentro de ciertas reglas.

Operaciones

LESS le permite utilizar operaciones dentro de reglas, lo que le permite lograr un control preciso sobre los valores:

Botón( @unit: 3px; borde:@unit solid #ddd; relleno: @unit * 3; margen: @unit * 2; )

Como puede ver en el código anterior, la variable @unit está configurada en 3px. Se sustituye en el valor del ancho del borde. Las sangrías se obtienen respectivamente multiplicando este valor por 3 o 2.

Todas las operaciones aritméticas se pueden utilizar en MENOS. Como operandos pueden actuar no sólo los valores numéricos, sino también los colores. Realice la llamada mezcla de colores. Si deseas cambiar el valor de un color, puedes hacerlo mezclando o restando otro color:

Botón (fondo: #941f1f + #222222; borde: #941f1f - #111111; )

La operación en segundo plano anterior aumentará cada valor HEX en 2. El resultado será #B64141, una versión más clara del color original. La operación de borde reducirá cada valor HEX en 1 y producirá un color más oscuro: #830E0E. En la práctica, hay muchos casos en los que partimos de un color base y necesitamos una versión del mismo ligeramente oscurecida o aclarada.

trabajando con color

Hay otras posibilidades para trabajar con el color. Puede aclarar, oscurecer, saturar, desaturar y rotar colores. Esto se logra mediante el uso de funciones de color.

Para ver ejemplos de uso y mostrar resultados, consulte la siguiente tabla:

@color: #3d82d1; .left_box (fondo:aclarar(@color, 20%); ) .right_box (fondo:oscurecer(@color, 20%); )
@color: #3d82d1;.left_box (fondo: desaturar(@color, 18%); ) .middle_box (fondo: @color; ) .right_box (fondo: saturar(@color, 18%); )
@color: #3d82d1;.left_box (fondo: spin(@color, 25%); ) .middle_box (fondo: @color; ) .right_box (fondo: spin(@color, -25%); )

Cada color en LESS se convierte a HSL (tono, saturación, luminosidad) para brindarle control sobre los niveles de los canales. Esto le permite manipular los colores de forma más sutil, así como obtener información del color directamente:

@color = #167e8a; matiz (@color); saturación(@color); luminosidad(@color);

¿Para qué es esto? Es difícil para una persona normal reconocer qué color está cifrado con un código HEX, pero LESS no trabaja con el código en sí, sino con el tono que establece. Digamos que encuentras un color morado que te gusta (#e147d4). Pero ahora necesitas un tono más cremoso, entonces el siguiente diseño de dos funciones te ayudará:

@color: #c480bd; .class (color de fondo: desaturar(giro(@color, 18), 12%);)

Anidación

Una de las principales ventajas de CSS es la capacidad en cascada de actualizar sus estilos. Es decir, para establecer el estilo de un párrafo dentro del contenedor del artículo, es necesario utilizar el código:

Artículo p (…)

Y eso es bueno, pero ¿qué pasa si necesitas establecer más estilos para los elementos dentro de este bloque? Luego tendrás que agregar .article constantemente antes de comenzar a definir la regla. LESS le permite anidar estilos entre sí, simplificando así la escritura de código:

A ( color:rojo; ) p ( margen:0px; ) artículo ( a ( color: verde; ) p ( color: #555; a ( color:azul; ) ) )

La sangría es opcional, pero mejora la legibilidad del código. Los niveles de anidación no están limitados.

mezclas

Para crear un marco con esquinas superiores redondeadas, deberá utilizar el siguiente código:

Tabulador ( -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; radio del borde superior izquierdo: 6 px; radio del borde superior derecho: 6 px)

Y este fragmento de código debe reescribirse cada vez que sea necesario realizar dicho redondeo. Esto se puede simplificar usando MENOS. Para hacer esto necesitas crear una mezcla. Mira el ejemplo:

Parte superior redondeada ( -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; radio-superior-izquierdo del borde: 6px; radio-superior-derecho-del-borde: 6px;

En este caso, creamos y definimos una clase de cima redondeada y luego importamos todas sus reglas a clase superior. Y todos los estilos de la clase superior se importan a la clase de envío, incluidas las reglas para el fondo y el color del texto.

Si normalmente utiliza el mismo radio de borde pero a veces necesita uno diferente, debe establecer la fusión en un valor estándar.

Parte superior redondeada(@radius:6px) ( -webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz-border-radius-topright: @radius; border-top-left-radius: @radius; border-top-right-radius: @radius (fondo: #333; color:#fff; .redondeado - arriba; ) .submit ( .redondeado-top(3px); )

En este caso, la clase de pestaña usará un valor de 6px y la clase de envío usará un valor de 3px. Puede haber múltiples parámetros.

En conclusión, cabe señalar que a pesar del valor de LESS, como ocurre con cualquier otra tecnología, siempre se debe utilizar con prudencia y no se debe abusar de ella en situaciones en las que es más conveniente utilizar CSS normal. Sin embargo, en situaciones en las que MENOS sea apropiado, se convertirá en una herramienta indispensable y útil.