Slide About Less Css

1. LESS is MORE
PHP Cáceres

2. Acerca de...
PHP Cáceres
Juan José Galán López
Desarrollador Web
PHP, CSS, LESS, Javascript
Pesca

3. Indice
PHP Cáceres
● Compilación
● Variables
● Mixins
● Recursos
● Ventajas
● Alternativas
● Ejemplos LESS
● Buenas prácticas
LESS Bootstrap 3

4. Javascript
Bootstrap
PHP Cáceres
Bootstrap 3
Buena documentación
Fácil comienzo
Sistema grid
Componentes
Less Sass Css
Recursos Extras
Personalización

5. Bootstrap
PHP Cáceres
Alternativas
Foundation HTML5 Boilerplate
HTML Kickstart Ink

6. Alternativas
PHP Cáceres
Preprocesadores

7. Alternativas
PHP Cáceres
Preprocesadores Pros - Contras
Pros
● Reutilización de código
● Mejor sintaxis
● Características dinámicas
Contras
• Tamaño del fichero
• Preprocesamiento
• Depuración

8. Instalación
PHP Cáceres
Línea de comandos:
$ npm install -g less
$ lessc styles.less > styles.css

9. Instalación
PHP Cáceres
Javascript:
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

10. Instalación
PHP Cáceres
Aplicaciones
Simple Less Less.app

11. Instalación
PHP Cáceres
Aplicaciones
Koala CodeKit

12. Alternativas
PHP Cáceres
LESS – Anidamiento
Reglas anidadas
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
Medias Queries anidadas
.screencolor{
@media screen {
color: green;
@media (min-width:768px) {
color: red;
}
}
@media tv {
color: black;
}
}
@media screen {
.screencolor {
color: green;
}
}
@media screen and (min-width: 768px) {
.screencolor {
color: red;
}
}
@media tv {
.screencolor {
color: black;
}
}

13. Alternativas
PHP Cáceres
LESS – Selectores padre
Selectores padre
a {
color: blue;
&:hover {
color: green;
}
}
a {
color: blue;
}
a:hover {
color: green;
}
Replicación de nombres de clases
.button {
&-ok {
background-image: url("ok.png");
}
&-cancel {
background-image: url("cancel.png");
}
&-custom {
background-image: url("custom.png");
}
}
.button-ok {
background-image: url("ok.png");
}
.button-cancel {
background-image: url("cancel.png");
}
.button-custom {
background-image: url("custom.png");
}

14. Alternativas
PHP Cáceres
LESS – Selectores padre
Múltiples
.link {
& + & {
color: red;
}
& & {
color: green;
}
&& {
color: blue;
}
&, &ish {
color: cyan;
}
}
.link + .link {
color: red;
}
.link .link {
color: green;
}
.link.link {
color: blue;
}
.link, .linkish {
color: cyan;
}

15. Alternativas
PHP Cáceres
LESS – Selectores padre
Cambio de orden
.header {
.menu {
border-radius: 5px;
.no-borderradius & {
background-image: url('images/button-
background.png');
}
}
}
.header .menu {
border-radius: 5px;
}
.no-borderradius .header .menu {
background-image: url('images/button-
background.png');
}
Modernizr

16. Alternativas
PHP Cáceres
LESS - Variables
a,
.link {
color: #428bca;
}
.widget {
color: #fff;
background: #428bca;
}
// Variables
@link-color: #428bca; // sea blue
@link-color-hover: darken(@link-color, 10%);
// Usage
a,
.link {
color: @link-color;
}
a:hover {
color: @link-color-hover;
}
.widget {
color: #fff;
background: @link-color;
}
Variables - valores de reglas CSS

17. Alternativas
PHP Cáceres
LESS - Variables
Variables - valores de reglas CSS - Bootstrap
@navbar-default-color: #777;
@navbar-default-bg: #f8f8f8;
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
Colores
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
Fuentes
z-index
@zindex-navbar: 1000;
@zindex-dropdown: 1000;
@zindex-popover: 1060;
@zindex-tooltip: 1070;
@zindex-navbar-fixed: 1030;
@zindex-modal-background: 1040;
@zindex-modal: 1050;

18. Alternativas
PHP Cáceres
Selectores
LESS - Variables Interpolación
// Variables
@mySelector: banner;
// Usage
.@{mySelector} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
.banner {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
URLs
// Variables
@images: "../img";
// Usage
body {
color: #444;
background: url("@{images}/white-sand.png");
}
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular”;
@icon-font-svg-id: "glyphicons_halflingsregular”;
@font-face {
font-family: 'Glyphicons Halflings';
src: url('@{icon-font-path}@{icon-font-name}.eot');
…
}

19. Alternativas
PHP Cáceres
Importaciones
LESS - Variables Interpolación
Variables
// Variables
@themes: "../../src/themes";
// Usage
@import "@{themes}/tidal-wave.less";
Propiedades
@property: color;
.widget {
@{property}: #0ee;
background-@{property}: #999;
}
.widget {
color: #0ee;
background-color: #999;
}
@fnord: "I am fnord.";
@var: "fnord";
content: @@var;
content: "I am fnord.";
Lazy loading

20. Alternativas
PHP Cáceres
LESS - Import
Import
ficheroB.less
ficheroA.less
ficheroC.css
FicheroImportacion.less
@import ficheroA.less
@import ficheroB.less
@import ficheroC.css
Fichero compilado

21. Alternativas
PHP Cáceres
LESS - Import
Import
@import "foo"; // foo.less is imported
@import "foo.less"; // foo.less is imported
@import "foo.php"; // foo.php imported as a less file
@import "foo.css"; // statement left in place, as-is
Opciones
Reference
@import (reference) "foo.less";
Podemos utilizar el contenido vía extends y mixins.

22. Alternativas
PHP Cáceres
LESS - Import
Import
Inline
@import (inline) "foo.less";
Evitamos su procesamiento. (Comentarios en css)
Less
@import (less) "foo.less";
El fichero es tratado como less independientemente de su extensión.
CSS
@import (css) "foo.less";
El fichero es tratado como css independientemente de su extensión.

23. Alternativas
PHP Cáceres
LESS - Import
Import
Once
@import (once) "foo.less";
Funcionamiento por defecto. Las demás inclusiones serán ignoradas sobre ese mismo
fichero.
Multiple
@import (multiple) "foo.less";
Permite la importación varias veces de ficheros con el mismo nombre.
Optional
@import (optional) "foo.less";
Permite la carga si el fichero existe, evita errores de compilación en caso de no existir.

24. Alternativas
PHP Cáceres
LESS - Import
Import en Bootstrap 3
// Core variables and mixins
@import "variables.less”;
@import "mixins.less";
// Reset and dependencies
@import "normalize.less";
@import "print.less";
@import "glyphicons.less";
// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";
…

25. Alternativas
PHP Cáceres
LESS – Loops
Loops
.loop(@counter) when (@counter > 0) {
.loop((@counter - 1)); // next iteration
width: (10px * @counter); // code for each iteration
}
div {
.loop(5); // launch the loop
}
div {
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;
}
.loop-grid-columns(@index, @class, @type) when (@index >= 0)
{
.calc-grid-column(@index, @class, @type);
// next iteration
.loop-grid-columns((@index - 1), @class, @type);
}

26. Alternativas
LESS - Mixins
Mixins
.hide-text() {
font: ~"0/0" a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.banner {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}
PHP Cáceres

27. Alternativas
LESS - Mixins
Mixins
.my-mixin {
color: black;
}
.class {
color: black;
background: white;
}
PHP Cáceres
Ocultar el mixin
.my-mixin {
color: black;
}
.my-other-mixin() {
background: white;
}
.class {
.my-mixin;
.my-other-mixin;
}
Selectores en mixins
.my-hover-mixin() {
&:hover {
border: 1px solid red;
}
}
button {
.my-hover-mixin();
}
button:hover {
border: 1px solid red;
}

28. Alternativas
LESS - Mixins
Mixins - Espacio de nombres
PHP Cáceres
#gradient {
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d',
GradientType=1)",argb(@start-color),argb(@end-color)));
}
// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
.vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent);
background-image: -o-linear-gradient(top, @start-color @start-percent, @end-color @end-percent);
background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent);
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d',
GradientType=0)",argb(@start-color),argb(@end-color)));
}
}
#gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));

29. Alternativas
LESS - Mixins
Mixins - Parámetros múltiples
PHP Cáceres
.mixin(@color) {
color-1: @color;
}
.mixin(@color; @padding: 2) {
color-2: @color;
padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
.some .selector div {
.mixin(#008000);
}
.some .selector div {
color-1: #008000;
color-2: #008000;
padding-2: 2;
}

30. Alternativas
LESS - Mixins
Mixins - Parámetros por nombre
PHP Cáceres
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
.mixin(#efca44; @padding: 40px);
}
.class1 {
color: #33acfe;
margin: 20px;
padding: 20px;
}
.class2 {
color: #efca44;
margin: 10px;
padding: 40px;
}

31. Alternativas
LESS - Mixins
Mixins - @arguments
PHP Cáceres
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
.big-block {
.box-shadow(2px; 5px);
}
.big-block {
-webkit-box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
box-shadow: 2px 5px 1px #000;
}

32. Alternativas
LESS - Mixins
Mixins Guards
PHP Cáceres
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
.class1 {
background-color: black;
color: #ddd;
}
.class2 {
background-color: white;
color: #555;
}

33. Alternativas
LESS - Mixins
Mixins - Recursos
PHP Cáceres

34. Alternativas
LESS - Extend
Extend
nav ul {
&:extend(.inline);
background: blue;
}
.inline {
color: red;
}
.banner {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
nav ul {
background: blue;
}
.inline,
nav ul {
color: red;
}
PHP Cáceres

35. Alternativas
LESS - Extend
Extend
PHP Cáceres
Extend nested selectors .bucket {
tr { // nested ruleset with target selector
color: blue;
}
}
.some-class:extend(.bucket tr) {} // nested ruleset is
recognized
.bucket tr,
.some-class {
color: blue;
}

36. Alternativas
LESS - Extend
Extend
PHP Cáceres
.a.b.test,
.test.c {
color: orange;
}
.test {
&:hover {
color: green;
}
}
.replacement:extend(.test all) {}
.a.b.test,
.test.c,
.a.b.replacement,
.replacement.c {
color: orange;
}
.test:hover,
.replacement:hover {
color: green;
}
Extend all

37. Alternativas
LESS - Extend
Extend
PHP Cáceres
No detecta duplicados.
Interpolación sólo en origen.
Extend vs Mixins
.alert-info,
.widget {
/* declarations */
}
.alert:extend(.alert-info, .widget) {}
// Output
.alert-info,
.widget,
.alert,
.alert {
/* declarations */
}
@variable: .bucket;
@{variable} { // interpolated selector
color: blue;
}
.some-class:extend(.bucket) {} // does nothing, no match is
found
//---------------------------------------------------------
//
.bucket {
color: blue;
}
@{variable}:extend(.bucket) {}
@variable: .selector;

38. Alternativas
LESS - Extend
Extend - Caso de uso
PHP Cáceres
Usar clase base sin tener que añadirla a la etiqueta html
.bear {
background-color: brown;
}
.animal {
background-color: black;
color: white;
}
<a class="animal bear">Bear</a>
<a class="bear">Bear</a>
.animal {
background-color: black;
color: white;
}
.bear {
&:extend(.animal);
background-color: brown;
}

39. Alternativas
LESS - Funciones
Funciones
PHP Cáceres
Tipos:
String, List, Math, Type, Color

40. Alternativas
LESS - Funciones
Funciones - Ejemplos
PHP Cáceres
Funciones matemáticas
Porcentaje
.make-xs-column(@columns; @gutter: @grid-gutter-
width) {
position: relative;
float: left;
width: percentage((@columns / @grid-columns));
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
}
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base *
1.25)); // ~18px
@font-size-small: ceil((@font-size-base *
0.85)); // ~12px
@font-size-h1: floor((@font-size-base *
2.6)); // ~36px
@font-size-h2: floor((@font-size-base *
2.15)); // ~30px
Ceil y Floor
@list: "banana", "tomato", "potato", "peach";
n: length(@list);
n: 4;
@list: apple, pear, coconut, orange;
value: extract(@list, 3);
value: coconut;
Listas

41. Alternativas
LESS - Funciones
Funciones - Ejemplos
PHP Cáceres
@gray-lighter: lighten(@gray-base, 93.5%); // #eee
@brand-primary: darken(#428bca, 6.5%); // #337ab7
Operaciones de color

42. Alternativas
LESS - Bootstrap
Buenas prácticas
PHP Cáceres
Organización de ficheros
Uso de variables
Mixins
Sistema grid parametrizable
Ejemplo de uso de características de LESS