Diferencias

Muestra las diferencias entre dos versiones de la página.

--- fw:others:less [2011/12/01 16:51]
alfred
+++ fw:others:less [2020/05/09 09:25] (actual)
@@ Línea 3: / Línea 3: @@
   * [[http://lesscss.org/|Página oficial]]
   * [[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 =====
 ==== Agregar LESS ====
@@ Línea 20: / Línea 22: @@
 <code>
 $ 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>
 ===== Código =====
 ==== Variables ====
 === Definición ===
@@ Línea 43: / Línea 56: @@
     color: #a8b317;
 }
+</code>
+=== Manipulación ===
+Podemos operar sobre ellas:
+<code>
+@minWidth: 20%;
+@columnLeft: @minWidth * 2;
+@columnRight: @columnLeft + @minWidth;
+@color: #4a785b;
+.sideLeft {
+    background-color: @color + #111;
+    width: @columnLeft;
+}
+.sideRight {
+    background-color: @color;
+    width: @columnRight;
+}
+</code>
+Compilaría a:
+<code css>
+.sideLeft {
+    background-color: #5b896c;
+    width: 40%;
+}
+.sideRight {
+    background-color: #4a785b;
+    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>
+==== Mixins ====
+Consiste en agregar las propiedades de una clase a otra. Además podemos incluir parámetros (en el siguiente ejemplo
+<code>
+.round-corners (@radius: 5px) {
+    -moz-border-radius: @radius;
+    -webkit-border-radius: @radius;
+    border-radius: @radius;
+}
+</code>
+Que podría ser escrito como:
+<code>
+#header {
+    .round-corners;
+}
+#post {
+    .round-corners(16px);
+}
+</code>
+Y compilaría:
+<code css>
+#header {
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+}
+#post {
+    border-radius: 16px;
+    -webkit-border-radius: 16px;
+    -moz-border-radius: 16px;
+}
+</code>
+=== @arguments ===
+''@arguments'' engloba todos los parámetros:
+<code>
+.shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
+    -moz-box-shadow: @arguments;
+    -webkit-box-shadow: @arguments;
+    box-shadow: @arguments;
+}
+.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>

Programming

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página