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 16:59] alfred |
fw:others:less [2020/05/09 09:25] (actual) |
||
|---|---|---|---|
| Línea 3: | Línea 3: | ||
| * [[http://lesscss.org/|Página oficial]] | * [[http://lesscss.org/|Página oficial]] | ||
| * [[https://github.com/cloudhead/less.js/wiki|Wiki]] | * [[https://github.com/cloudhead/less.js/wiki|Wiki]] | ||
| + | Página basada en: [[http://www.genbetadev.com/desarrollo-web/less-el-lenguaje-de-hojas-de-estilo-dinamico]]. | ||
| ===== Uso ===== | ===== Uso ===== | ||
| + | |||
| ==== Agregar LESS ==== | ==== Agregar LESS ==== | ||
| Línea 20: | Línea 22: | ||
| <code> | <code> | ||
| $ lessc styles.less styles.css -x | $ lessc styles.less styles.css -x | ||
| + | </code> | ||
| + | El compilador, por defecto, funciona con node.js. Puede ser instalado en Ubuntu con: | ||
| + | <code> | ||
| + | $ sudo apt-get install rubygems1.8 | ||
| + | $ sudo gem install rubygems-update | ||
| + | $ sudo update_rubygems | ||
| + | $ sudo gem install less | ||
| </code> | </code> | ||
| ===== Código ===== | ===== Código ===== | ||
| + | |||
| + | |||
| Línea 72: | Línea 83: | ||
| width: 60%; | width: 60%; | ||
| } | } | ||
| + | </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> | </code> | ||
| Línea 114: | Línea 144: | ||
| } | } | ||
| .shadow(1px, 2px); | .shadow(1px, 2px); | ||
| + | </code> | ||
| + | |||
| + | ==== Anidación de reglas ==== | ||
| + | Podemos generar reglas cuando las tenemos anidadas del estilo... | ||
| + | <code> | ||
| + | #record { | ||
| + | h1 { | ||
| + | font-family: Helvetica, Arial, sans-serif; | ||
| + | font-weight: bold; | ||
| + | font-size: 2em; | ||
| + | } | ||
| + | p { | ||
| + | font-size: 12px; | ||
| + | a { | ||
| + | text-decoration: none; | ||
| + | &:hover { | ||
| + | color: red; | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | </code> | ||
| + | Compilaría: | ||
| + | <code css> | ||
| + | #record h1{ | ||
| + | font-family: Helvetica, Arial, sans-serif; | ||
| + | font-weight: bold; | ||
| + | font-size: 2em; | ||
| + | } | ||
| + | #record p { | ||
| + | font-size: 12px; | ||
| + | } | ||
| + | #record p a { | ||
| + | text-decoration: none; | ||
| + | } | ||
| + | #record p a:hover { | ||
| + | color: red; | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | |||
| + | ==== Funciones de color ==== | ||
| + | <code> | ||
| + | lighten(@color, 10%); // devuelve un color un 10% mas "claro" que @color | ||
| + | darken(@color, 10%); // devuelve un color un 10% mas "oscuro" que @color | ||
| + | saturate(@color, 10%); // devuelve un color un 10% "más" saturado que @color | ||
| + | desaturate(@color, 10%); // devuelve un color un 10% "menos" saturado que @color | ||
| + | fadein(@color, 10%); // devuelve un color un 10% "menos" transparente que @color | ||
| + | fadeout(@color, 10%); // devuelve un color un 10% "más" transparente que @color | ||
| + | spin(@color, 10); // devuelve un color con 10 grados de tono mayor que @color | ||
| + | spin(@color, -10); // devuelve un color con 10 grados de tono menor que @color | ||
| + | hue(@color); // devuelve el canal `hue` de @color | ||
| + | saturation(@color); // devuelve el canal `saturation` de @color | ||
| + | lightness(@color); // devuelve el canal `lightness` de @color | ||
| + | </code> | ||
| + | Que luego usuaríamos... | ||
| + | <code> | ||
| + | @base: #f04615; | ||
| + | .class { | ||
| + | color: saturate(@base, 5%); | ||
| + | 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.1322758777.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
