Articles of menos

Borde doble con diferente color

Con Photoshop, puedo poner dos bordes diferentes en un elemento con dos colores diferentes. Y con eso, puedo hacer muchos efectos dynamics de sombreado con mis elementos. Incluso con los efectos de Photoshop, puedo manejar eso con Drop Shadow y Inner Shadow. En cuanto al diseño web, si tengo un diseño como el de la […]

Concatenar cadenas en Less

Creo que esto no es posible, pero pensé que lo haría en caso de que hubiera una manera. La idea es que tengo una variable para la ruta a la carpeta de recursos web: @root: “../img/”; @file: “test.css”; @url: @root@file; .px { background-image: url(@url); } Obtengo esto como resultado: .px { background-image: url(“../img/” “test.css”); } […]

Variables dinámicas de LessCss basadas en la clase antecesora

Tengo una plantilla de página que tiene una clase de marca en el elemento del body : Africa Utilizando el siguiente valor Menos, puedo usar una variable para el color de la marca y aplicarla al color de un selector de CSS: @brand-default: #649d84; @brand-africa: #df6f20; @brand-nz: #444; .brand-color { .brand-default & { color: @brand-default; […]

MENOS CSS: abusando de & Operator cuando anida?

Less usa el operador & para mejorar las posibilidades de anidación . .header { color: black; .navigation { font-size: 12px; &.class { text-decoration: none } } } que causa una sustitución de & con el selector principal y da como resultado una concatenación del selector real al selector principal: .header .navigation.class lugar de .header .navigation.class […]

MENOS mixin un nombre de clase variable

Estoy usando Font Awesome 4.0.0, y quiero hacer algo como esto en LESS: .btn-github { .btn; .btn-primary; margin-left: 3em; i { .@{fa-css-prefix}; .@{fa-css-prefix}-github; .@{fa-css-prefix}-lg; margin-right: 1em; } } Eso no se comstack con el error: ParseError: Unrecognised input in – on line … ¿Es posible lograr esto? Sin duda sería un botón hermoso para mí.

CSS condicional basado en la variable de color de fondo

¿Es posible establecer un color basado en la luminosidad / oscuridad de una variable menos? Actualmente tengo el siguiente código: li { color: darken(@bodyBackground, 10%); } Esto funciona proporcionando @bodyBackground es un color claro. Sin embargo, si fuera de un color oscuro me gustaría usar lighten(@bodyBackground, 10%) . ¿Es esto posible con MENOS?

Rejilla Bootstrap 3 de Twitter, cambio de punto de corte y eliminación de relleno

Intento moverme a la nueva grilla Boostrap 3 y estoy enfrentando algunas dificultades. ¿Cómo hacer que la grilla se acumule por debajo de 480px, pero no entre 480px y 768px? por encima de 768px el relleno a la izquierda del primero y el relleno a la derecha están fuera del contenedor, pero debajo de 768px […]

Cómo usar bootstrap con 16 o 24 columnas

Necesito ayuda para configurar bootstrap 2.0.4 para que sea de 16 o 24 columnas en lugar de las 12 columnas predeterminadas No puedo entender qué estoy haciendo mal. Probé la opción de personalización en el sitio de arranque e intenté cambiar las variables de cuadrícula en las variables. .less file y recomstackción de bootstrap.less utilizando […]

importe el archivo .css en el archivo .less

¿Puedes importar archivos .css en archivos .less …? Estoy bastante familiarizado con menos y lo uso para todo mi desarrollo. Regularmente uso una estructura de la siguiente manera: @import “normalize”; //styles here @import “mixins”; @import “media-queries”; @import “print”; Todas las importaciones son otros archivos .less y todo funciona como debería. Mi problema actual es este: […]

Pasa el cursor por una matriz de pares de valores de nombre en LESS

¿Hay alguna manera de recorrer una matriz de pares de nombre / valor MENOS? Algo como esto: arr = alice: black, bob: orange; .for(arr) // something something // .cl-@{name} { background-color: @{value} } Para generar algo como esto: .cl-alice { background-color: black; } .cl-bob { background-color: orange; } Sé que puede for-loop una matriz , […]