Herramientas de usuario
fw:others:less
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
|
fw:others:less [2011/12/01 17:18] alfred |
fw:others:less [2020/05/09 09:25] (actual) |
||
|---|---|---|---|
| Línea 32: | Línea 32: | ||
| ===== Código ===== | ===== Código ===== | ||
| + | |||
| + | |||
| Línea 82: | Línea 84: | ||
| } | } | ||
| </code> | </code> | ||
| + | === Scope === | ||
| + | <code> | ||
| + | @var: #333; | ||
| + | #page { | ||
| + | @var: #fff; | ||
| + | #header { | ||
| + | color: @var; // #fff | ||
| + | } | ||
| + | } | ||
| + | #footer { | ||
| + | color: @var; // #333 | ||
| + | } | ||
| + | </code> | ||
| + | === Inclusión de strings === | ||
| + | Podemos añadir una variable string dentro de otra... | ||
| + | <code> | ||
| + | @url: "http://www.genbetadev.com"; | ||
| + | background-image: url("@{url}/images/background.png"); | ||
| + | </code> | ||
| ==== Mixins ==== | ==== Mixins ==== | ||
| Línea 163: | Línea 183: | ||
| } | } | ||
| </code> | </code> | ||
| + | |||
| ==== Funciones de color ==== | ==== Funciones de color ==== | ||
| Línea 185: | Línea 206: | ||
| background-color: lighten(spin(@base, 8), 25%); | background-color: lighten(spin(@base, 8), 25%); | ||
| } | } | ||
| + | </code> | ||
| + | |||
| + | |||
| + | ==== Espacios de nombres ==== | ||
| + | Podremos crear las siguientes clases (''.logo .slogan .menu'') englobadas dentro de ''#main_header'': | ||
| + | <code> | ||
| + | #main_header { | ||
| + | .logo () { | ||
| + | display: block; | ||
| + | border: none; | ||
| + | background: transparent url(../media/logo.png) 0 0 scroll; | ||
| + | } | ||
| + | .slogan { ... } | ||
| + | .menu { ... } | ||
| + | ... | ||
| + | } | ||
| + | </code> | ||
| + | Para luego, por ejemplo, utilizar ''.logo'' en otro namespace (''#header''): | ||
| + | <code> | ||
| + | #header a { | ||
| + | color: green; | ||
| + | #main_header > .logo; | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | ==== Otras ==== | ||
| + | === Ignorar elementos === | ||
| + | Si por alguna razón queremos que el compilador de LESS deje algún elemento tal cual esté escrito (por ejemplo porque no compila bien esa línea) usaremos ''~valor''. | ||
| + | <code> | ||
| + | .transparente { | ||
| + | filter: ~"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png')"; | ||
| + | } | ||
| + | </code> | ||
| + | === JavaScript === | ||
| + | Podemos incluir código JavaScript: | ||
| + | <code> | ||
| + | @var: `"genbetadev".toUpperCase() + ' mola!'`; | ||
| + | </code> | ||
| + | Generaría... | ||
| + | <code css> | ||
| + | @var: "GENBETADEV mola!"; | ||
| + | </code> | ||
| + | === Importar === | ||
| + | Podemos importar fichero .less y ficheros .css: | ||
| + | <code> | ||
| + | @import "lib.less"; | ||
| + | @import "lib"; | ||
| + | @import "lib.css"; | ||
| </code> | </code> | ||
fw/others/less.1322759881.txt.gz · Última modificación: 2020/05/09 09:24 (editor externo)
Herramientas de la página
Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: CC Attribution-Noncommercial-Share Alike 4.0 International
