Building more with LESS CSS

Ever thought how much better CSS would be if you only had variables or expressions or "x" or "y". Tired of remembering all of the browser prefixes for the new CSS3 features? Enter LESS CSS. LESS CSS is a CSS pre-processor that offers variables, mixins, expressions and much more. This is how everyone dreamed CSS would be ran. In this session, you will learn how to fully harness all the functionality of LESS while avoiding some of the pitfalls many new users face. CSS3 will never seem easier!

Transcript

1. LESS
   BUILD MORE WITH
   OPEN WEST CONF | JAKE SMITH | MAY 03, 2013
   Friday, May 3, 13
   

   View Slide

2. jakefolio
   http://jakefolio.com
   me@jakefolio.com
   Jake Smith
   Friday, May 3, 13
   

   View Slide

3. What is LESS?
   Friday, May 3, 13
   

   View Slide

4. ‣ CSS Pre-processor
   ‣ Syntax tries to stay as close as possible
   to the declarative nature of CSS
   ‣ Helps you be better organized (DRY)
   What is Less?
   Friday, May 3, 13
   

   View Slide

5. As an extension to CSS, LESS is not only
   backwards compatible with CSS, but the extra
   features it adds use existing CSS syntax.
   Friday, May 3, 13
   

   View Slide

6. ‣ Solving IE or Other Browser Bugs
   ‣ Save you from yourself
   LESS is NOT
   Friday, May 3, 13
   

   View Slide

7. Variables
   Friday, May 3, 13
   

   View Slide

8. Variables
   Variables can be any type of variable (string, measure, keyword, etc.).
   Variables CAN NOT be used as a property name.
   @primary: #e7e7db;
   @gray: #4a4a43;
   @orange: #bd3b13;
   @tan: #89897A;
   @platinum: #d5d8df;
   @gold: #DBB541;
   @silver: #ccc;
   @thumbPath: "/_images/speakers/thumbnail/";
   @profilePath: "/_images/speakers/profile/";
   @speakersPath: "/_images/speakers/";
   @fontSerif: 'Droid Serif', georgia, serif;
   @fontSans-Serif: "SteelfishExtraBold", "Lucida Grande", arial, verdana;
   Friday, May 3, 13
   

   View Slide

9. Variables
   @fnord: "I am fnord.";
   @var: 'fnord';
   content: @@var;
   http://lesscss.org/#-variables
   Friday, May 3, 13
   

   View Slide

10. Nesting
    Friday, May 3, 13
    

    View Slide

11. Nesting
    LESS provides nested rules for descendant selectors.
    The “&” is used to create pseudo-classes/elements.
    a {
    background: #f00;
    color: #fff;
    display: block;
    &:hover { background: #05761d; }
    &:visited { background: #fffc00; }
    }
    a {
    background: #f00;
    color: #fff;
    display: block;
    }
    a:hover {
    background: #05761d;
    }
    a:visited {
    background: #fffc00;
    }
    Friday, May 3, 13
    

    View Slide

12. .tweets {
    border-left: 2px solid #ddd;
    width: 454px;
    ul {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
    display: block;
    a {
    color: @gray;
    display: block;
    font-size: 14px;
    margin: 2px 0;
    padding: 5px 10px;
    text-decoration: none;
    &:hover { color: @gray; }
    }
    }
    }
    }
    .tweets {
    border-left: 2px solid #ddd;
    width: 454px;
    }
    .tweets ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .tweets ul li {
    display: block;
    }
    .tweets ul li a {
    color: #4a4a43;
    display: block;
    font-size: 14px;
    margin: 2px 0;
    padding: 5px 10px;
    text-decoration: none;
    }
    .tweets ul li a:hover {
    color: #4a4a43;
    }
    Nesting
    Friday, May 3, 13
    

    View Slide

13. .tweets {
    border-left: 2px solid #ddd;
    width: 454px;
    ul {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
    display: block;
    a {
    color: @gray;
    display: block;
    font-size: 14px;
    margin: 2px 0;
    padding: 5px 10px;
    text-decoration: none;
    &:hover { color: @gray; }
    }
    }
    }
    }
    .tweets {
    border-left: 2px solid #ddd;
    width: 454px;
    }
    .tweets ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .tweets ul li {
    display: block;
    }
    .tweets ul li a {
    color: #4a4a43;
    display: block;
    font-size: 14px;
    margin: 2px 0;
    padding: 5px 10px;
    text-decoration: none;
    }
    .tweets ul li a:hover {
    color: #4a4a43;
    }
    Nesting
    BLOATED SPECIFICITY
    Friday, May 3, 13
    

    View Slide

14. .tweets {
    border-left: 2px solid #ddd;
    width: 454px;
    ul {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
    display: block;
    a {
    color: @gray;
    display: block;
    font-size: 14px;
    margin: 2px 0;
    padding: 5px 10px;
    text-decoration: none;
    &:hover { color: @gray; }
    }
    }
    }
    }
    .tweets {
    border-left: 2px solid #ddd;
    width: 454px;
    }
    .tweets ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .tweets ul li {
    display: block;
    }
    .tweets ul li a {
    color: #4a4a43;
    display: block;
    font-size: 14px;
    margin: 2px 0;
    padding: 5px 10px;
    text-decoration: none;
    }
    .tweets ul li a:hover {
    color: #4a4a43;
    }
    Nesting
    BLOATED SPECIFICITY
    Friday, May 3, 13
    

    View Slide

15. .tweets {
    border-left: 2px solid #ddd;
    width: 454px;
    ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    li {
    display: block;
    }
    a {
    color: @gray;
    display: block;
    font-size: 14px;
    margin: 2px 0;
    padding: 5px 10px;
    text-decoration: none;
    &:hover { color: @gray; }
    }
    }
    .tweets {
    border-left: 2px solid #ddd;
    width: 454px;
    }
    .tweets ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .tweets li {
    display: block;
    }
    .tweets a {
    color: #4a4a43;
    display: block;
    font-size: 14px;
    margin: 2px 0;
    padding: 5px 10px;
    text-decoration: none;
    }
    .tweets a:hover {
    background: #d3d3bc;
    color: #4a4a43;
    }
    Nesting
    Friday, May 3, 13
    

    View Slide

16. Nesting
    LESS supports media querying bubbling in 1.3.x
    It does not merge media queries together though
    @media screen and (max-width: 400px) {
    .main-nav > .main-nav__item { display: block; }
    }
    .grid {
    @media screen and (max-width: 400px) {
    width: 20em;
    }
    }
    @media screen and (max-width: 400px) {
    .main-nav > .main-nav__item { display: block; }
    }
    @media screen and (max-width: 400px) {
    .grid {
    width: 20em;
    }
    }
    Friday, May 3, 13
    

    View Slide

17. Imports
    Friday, May 3, 13
    

    View Slide

18. // FearLESS
    @import 'reset/boilerplate';
    @import 'layout/helpers';
    @import 'layout/grid';
    @import 'css3/init';
    // Application
    @import 'settings';
    @import 'print';
    @import 'fonts';
    @import 'responsive';
    @import 'forms';
    @import 'typography';
    LESS import is styled just like CSS, but merges when compiled.
    If the file is .less, there is no need to specify extension.
    Imports
    Friday, May 3, 13
    

    View Slide

19. In LESS 1.3.x, you can now import files into context.
    You can also easily wrap a media query in an import.
    Imports
    .grid {
    @import 'grid';
    }
    // Outputted CSS
    .grid {
    > .grid-item { width: 300px; }
    > .grid-item a {
    color: #f00;
    display: block;
    }
    }
    // import with media queries
    @import "mobile" screen and (max-width: 400px);
    // Outputted CSS
    @media screen and (max-width: 400px) {
    nav { display: block; }
    }
    Friday, May 3, 13
    

    View Slide

20. @import-once
    Friday, May 3, 13
    

    View Slide

21. @import-once
    Friday, May 3, 13
    

    View Slide

22. @import-once
    Removed in LESS 1.4+
    Friday, May 3, 13
    

    View Slide

23. String Interpolation
    Friday, May 3, 13
    

    View Slide

24. String Interpolation
    @imgPath: "http://assets1.mydomain.com/";
    @thumbPath: "/_images/speakers/thumbnail/";
    @profilePath: "/_images/speakers/profile/";
    @sponsorsPath: "/_images/sponsors/";
    .divider {
    background: transparent url('@{imgPath}divider.png') repeat-x;
    height: 6px;
    margin: 15px 0;
    }
    .sponsor {
    background: @primary;
    .float-left();
    .shadow(0 0 1px rgba(0, 0, 0, 0.8));
    // Sponsors
    &.dallas-php { background: @primary url('@{sponsorPath}bg/dallas-php.png'); }
    }
    Friday, May 3, 13
    

    View Slide

25. String Interpolation
    @imgPath: "http://assets1.mydomain.com/";
    @thumbPath: "/_images/speakers/thumbnail/";
    @profilePath: "/_images/speakers/profile/";
    @sponsorsPath: "/_images/sponsors/";
    .divider {
    background: transparent url('@{imgPath}divider.png') repeat-x;
    height: 6px;
    margin: 15px 0;
    }
    .sponsor {
    background: @primary;
    .float-left();
    .shadow(0 0 1px rgba(0, 0, 0, 0.8));
    // Sponsors
    &.dallas-php { background: @primary url('@{sponsorPath}bg/dallas-php.png'); }
    }
    Friday, May 3, 13
    

    View Slide

26. String Interpolation
    @imgPath: "http://assets1.mydomain.com/";
    @thumbPath: "/_images/speakers/thumbnail/";
    @profilePath: "/_images/speakers/profile/";
    @sponsorsPath: "/_images/sponsors/";
    .divider {
    background: transparent url('@{imgPath}divider.png') repeat-x;
    height: 6px;
    margin: 15px 0;
    }
    .sponsor {
    background: @primary;
    .float-left();
    .shadow(0 0 1px rgba(0, 0, 0, 0.8));
    // Sponsors
    &.dallas-php { background: @primary url('@{sponsorPath}bg/dallas-php.png'); }
    }
    Friday, May 3, 13
    

    View Slide

27. String Interpolation
    @imgPath: "http://assets1.mydomain.com/";
    @thumbPath: "/_images/speakers/thumbnail/";
    @profilePath: "/_images/speakers/profile/";
    @sponsorsPath: "/_images/sponsors/";
    .divider {
    background: transparent url('@{imgPath}divider.png') repeat-x;
    height: 6px;
    margin: 15px 0;
    }
    .sponsor {
    background: @primary;
    .float-left();
    .shadow(0 0 1px rgba(0, 0, 0, 0.8));
    // Sponsors
    &.dallas-php { background: @primary url('@{sponsorPath}bg/dallas-php.png'); }
    }
    Friday, May 3, 13
    

    View Slide

28. String Interpolation
    @imgPath: "http://assets1.mydomain.com/";
    @thumbPath: "/_images/speakers/thumbnail/";
    @profilePath: "/_images/speakers/profile/";
    @sponsorsPath: "/_images/sponsors/";
    .divider {
    background: transparent url('@{imgPath}divider.png') repeat-x;
    height: 6px;
    margin: 15px 0;
    }
    .sponsor {
    background: @primary;
    .float-left();
    .shadow(0 0 1px rgba(0, 0, 0, 0.8));
    // Sponsors
    &.dallas-php { background: @primary url('@{sponsorPath}bg/dallas-php.png'); }
    }
    Friday, May 3, 13
    

    View Slide

29. String Interpolation
    @imgPath: "http://assets1.mydomain.com/";
    @thumbPath: "/_images/speakers/thumbnail/";
    @profilePath: "/_images/speakers/profile/";
    @sponsorsPath: "/_images/sponsors/";
    .divider {
    background: transparent url('@{imgPath}divider.png') repeat-x;
    height: 6px;
    margin: 15px 0;
    }
    .sponsor {
    background: @primary;
    .float-left();
    .shadow(0 0 1px rgba(0, 0, 0, 0.8));
    // Sponsors
    &.dallas-php { background: @primary url('@{sponsorPath}bg/dallas-php.png'); }
    }
    Friday, May 3, 13
    

    View Slide

30. String Interpolation
    @imgPath: "http://assets1.mydomain.com/";
    @thumbPath: "/_images/speakers/thumbnail/";
    @profilePath: "/_images/speakers/profile/";
    @sponsorsPath: "/_images/sponsors/";
    .divider {
    background: transparent url('@{imgPath}divider.png') repeat-x;
    height: 6px;
    margin: 15px 0;
    }
    .sponsor {
    background: @primary;
    .float-left();
    .shadow(0 0 1px rgba(0, 0, 0, 0.8));
    // Sponsors
    &.dallas-php { background: @primary url('@{sponsorPath}bg/dallas-php.png'); }
    }
    Friday, May 3, 13
    

    View Slide

31. String Interpolation
    @color: red;
    @color2: "red";
    @color3: ~"red";
    .promo-@{color}-box { display: block; }
    .promo-@{color2}-box { display: block; }
    .promo-@{color3}-box { display: block; }
    .promo-#ff0000-box {
    display: block;
    }
    .promo-'red'-box {
    display: block;
    }
    .promo-red-box {
    display: block;
    }
    Friday, May 3, 13
    

    View Slide

32. Operations
    Friday, May 3, 13
    

    View Slide

33. @base: #139793;
    @padding: 10px;
    a {
    color: @base;
    &:hover { color: @base + #ccc; }
    &:visited { color: @base + #333; }
    }
    .my-module { padding: (@padding + 5) 10px; }
    .circle(@size: 10px) {
    height: @size;
    width: @size;
    -webkit-border-radius: (@size / 2);
    -moz-border-radius: (@size / 2);
    -o-border-radius: (@size / 2);
    border-radius: (@size / 2);
    }
    Operations
    LESS has basic math operations. Also, you can do HEX math.
    LESS is smart enough to know the type of measure (px, em, pt).
    Friday, May 3, 13
    

    View Slide

34. @base: #139793;
    @padding: 10px;
    a {
    color: @base;
    &:hover { color: @base + #ccc; }
    &:visited { color: @base + #333; }
    }
    .my-module { padding: (@padding + 5) 10px; }
    .circle(@size: 10px) {
    height: @size;
    width: @size;
    -webkit-border-radius: (@size / 2);
    -moz-border-radius: (@size / 2);
    -o-border-radius: (@size / 2);
    border-radius: (@size / 2);
    }
    Operations
    LESS has basic math operations. Also, you can do HEX math.
    LESS is smart enough to know the type of measure (px, em, pt).
    Friday, May 3, 13
    

    View Slide

35. @base: #139793;
    @padding: 10px;
    a {
    color: @base;
    &:hover { color: @base + #ccc; }
    &:visited { color: @base + #333; }
    }
    .my-module { padding: (@padding + 5) 10px; }
    .circle(@size: 10px) {
    height: @size;
    width: @size;
    -webkit-border-radius: (@size / 2);
    -moz-border-radius: (@size / 2);
    -o-border-radius: (@size / 2);
    border-radius: (@size / 2);
    }
    Operations
    LESS has basic math operations. Also, you can do HEX math.
    LESS is smart enough to know the type of measure (px, em, pt).
    Friday, May 3, 13
    

    View Slide

36. @base: #139793;
    @padding: 10px;
    a {
    color: @base;
    &:hover { color: @base + #ccc; }
    &:visited { color: @base + #333; }
    }
    .my-module { padding: (@padding + 5) 10px; }
    .circle(@size: 10px) {
    height: @size;
    width: @size;
    -webkit-border-radius: (@size / 2);
    -moz-border-radius: (@size / 2);
    -o-border-radius: (@size / 2);
    border-radius: (@size / 2);
    }
    Operations
    LESS has basic math operations. Also, you can do HEX math.
    LESS is smart enough to know the type of measure (px, em, pt).
    Friday, May 3, 13
    

    View Slide

37. @base: #139793;
    @padding: 10px;
    a {
    color: @base;
    &:hover { color: @base + #ccc; }
    &:visited { color: @base + #333; }
    }
    .my-module { padding: (@padding + 5) 10px; }
    .circle(@size: 10px) {
    height: @size;
    width: @size;
    -webkit-border-radius: (@size / 2);
    -moz-border-radius: (@size / 2);
    -o-border-radius: (@size / 2);
    border-radius: (@size / 2);
    }
    Operations
    LESS has basic math operations. Also, you can do HEX math.
    LESS is smart enough to know the type of measure (px, em, pt).
    Friday, May 3, 13
    

    View Slide

38. Mixins
    Friday, May 3, 13
    

    View Slide

39. Mixins
    Mixins are the heart of LESS. A mixin lets you take the rules
    from a declaration and reuse them (DRY).
    .module {
    background: #fff;
    color: rgb(45, 45, 45);
    font-size: 14px;
    padding: 12px;
    }
    .float-left {
    _display: inline;
    float: left;
    }
    .news {
    width: 300px;
    .float-left;
    .module;
    }
    .module() {
    background: #fff;
    color: rgb(45, 45, 45);
    font-size: 14px;
    padding: 12px;
    }
    .float-left() {
    _display: inline;
    float: left;
    }
    .news {
    width: 300px;
    .float-left();
    .module();
    }
    Friday, May 3, 13
    

    View Slide

40. Mixins
    Mixins are the heart of LESS. A mixin lets you take the rules
    from a declaration and reuse them (DRY).
    .module {
    background: #fff;
    color: rgb(45, 45, 45);
    font-size: 14px;
    padding: 12px;
    }
    .float-left {
    _display: inline;
    float: left;
    }
    .news {
    width: 300px;
    .float-left;
    .module;
    }
    .module() {
    background: #fff;
    color: rgb(45, 45, 45);
    font-size: 14px;
    padding: 12px;
    }
    .float-left() {
    _display: inline;
    float: left;
    }
    .news {
    width: 300px;
    .float-left();
    .module();
    }
    PARAMETRIC
    Friday, May 3, 13
    

    View Slide

41. Mixins
    Mixins are the heart of LESS. A mixin lets you take the rules
    from a declaration and reuse them (DRY).
    .module {
    background: #fff;
    color: rgb(45, 45, 45);
    font-size: 14px;
    padding: 12px;
    }
    .float-left {
    _display: inline;
    float: left;
    }
    .news {
    width: 300px;
    .float-left;
    .module;
    }
    .module() {
    background: #fff;
    color: rgb(45, 45, 45);
    font-size: 14px;
    padding: 12px;
    }
    .float-left() {
    _display: inline;
    float: left;
    }
    .news {
    width: 300px;
    .float-left();
    .module();
    }
    PARAMETRIC
    Friday, May 3, 13
    

    View Slide

42. Mixins
    Mixins are the heart of LESS. A mixin lets you take the rules
    from a declaration and reuse them (DRY).
    .module {
    background: #fff;
    color: rgb(45, 45, 45);
    font-size: 14px;
    padding: 12px;
    }
    .float-left {
    _display: inline;
    float: left;
    }
    .news {
    width: 300px;
    .float-left;
    .module;
    }
    .module() {
    background: #fff;
    color: rgb(45, 45, 45);
    font-size: 14px;
    padding: 12px;
    }
    .float-left() {
    _display: inline;
    float: left;
    }
    .news {
    width: 300px;
    .float-left();
    .module();
    }
    PARAMETRIC
    Friday, May 3, 13
    

    View Slide

43. Parametric Mixins
    Parametric Mixins are not compiled. Parametric Mixins are
    defined by parenthesis. Arguments can have predefined values
    .rounded(@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
    }
    .transition(@who: all, @duration: .5s, @easing: ease-out){
    -webkit-transition: @arguments;
    -moz-transition: @arguments;
    -ms-transition: @arguments;
    -o-transition: @arguments;
    transition: @arguments;
    }
    .shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
    -webkit-box-shadow: @shadow;
    -moz-box-shadow: @shadow;
    box-shadow: @shadow;
    }
    Friday, May 3, 13
    

    View Slide

44. Mixin Matching
    .mixin (dark, @color) {
    color: darken(@color, 10%);
    }
    .mixin (light, @color) {
    color: lighten(@color, 10%);
    }
    .mixin (@_, @color) {
    display: block;
    }
    @switch: light;
    .class {
    .mixin(@switch, #888);
    }
    http://lesscss.org/#-pattern-matching-and-guard-expressions
    .class {
    display: block;
    color: #a2a2a2;
    }
    Friday, May 3, 13
    

    View Slide

45. Mixin Matching
    .mixin (dark, @color) {
    color: darken(@color, 10%);
    }
    .mixin (light, @color) {
    color: lighten(@color, 10%);
    }
    .mixin (@_, @color) {
    display: block;
    }
    @switch: light;
    .class {
    .mixin(@switch, #888);
    }
    http://lesscss.org/#-pattern-matching-and-guard-expressions
    .class {
    display: block;
    color: #a2a2a2;
    }
    Friday, May 3, 13
    

    View Slide

46. Mixin Matching
    .mixin (dark, @color) {
    color: darken(@color, 10%);
    }
    .mixin (light, @color) {
    color: lighten(@color, 10%);
    }
    .mixin (@_, @color) {
    display: block;
    }
    @switch: light;
    .class {
    .mixin(@switch, #888);
    }
    http://lesscss.org/#-pattern-matching-and-guard-expressions
    .class {
    display: block;
    color: #a2a2a2;
    }
    Friday, May 3, 13
    

    View Slide

47. Built-in Functions
    Friday, May 3, 13
    

    View Slide

48. Color Functions
    Friday, May 3, 13
    

    View Slide

49. Color Functions
    lighten(@color, 10%); // 10% *lighter* than @color
    darken(@color, 10%); // 10% *darker* than @color
    saturate(@color, 10%); // 10% *more* saturated than @color
    desaturate(@color, 10%); // 10% *less* saturated than @color
    fadein(@color, 10%); // 10% *less* transparent than @color
    fadeout(@color, 10%); // 10% *more* transparent than @color
    fade(@color, 50%); // 50% transparency
    spin(@color, 10); // 10 degree larger in hue than @color
    spin(@color, -10); // 10 degree smaller hue than @color
    mix(@color1, @color2, 50%); // mix of @color1 and @color2
    http://lesscss.org/#-color-functions
    Friday, May 3, 13
    

    View Slide

50. Color Functions
    lighten(@color, 10%); // 10% *lighter* than @color
    darken(@color, 10%); // 10% *darker* than @color
    saturate(@color, 10%); // 10% *more* saturated than @color
    desaturate(@color, 10%); // 10% *less* saturated than @color
    fadein(@color, 10%); // 10% *less* transparent than @color
    fadeout(@color, 10%); // 10% *more* transparent than @color
    fade(@color, 50%); // 50% transparency
    spin(@color, 10); // 10 degree larger in hue than @color
    spin(@color, -10); // 10 degree smaller hue than @color
    mix(@color1, @color2, 50%); // mix of @color1 and @color2
    HEX
    http://lesscss.org/#-color-functions
    Friday, May 3, 13
    

    View Slide

51. Color Functions
    lighten(@color, 10%); // 10% *lighter* than @color
    darken(@color, 10%); // 10% *darker* than @color
    saturate(@color, 10%); // 10% *more* saturated than @color
    desaturate(@color, 10%); // 10% *less* saturated than @color
    fadein(@color, 10%); // 10% *less* transparent than @color
    fadeout(@color, 10%); // 10% *more* transparent than @color
    fade(@color, 50%); // 50% transparency
    spin(@color, 10); // 10 degree larger in hue than @color
    spin(@color, -10); // 10 degree smaller hue than @color
    mix(@color1, @color2, 50%); // mix of @color1 and @color2
    HEX
    HEX
    http://lesscss.org/#-color-functions
    Friday, May 3, 13
    

    View Slide

52. Color Functions
    lighten(@color, 10%); // 10% *lighter* than @color
    darken(@color, 10%); // 10% *darker* than @color
    saturate(@color, 10%); // 10% *more* saturated than @color
    desaturate(@color, 10%); // 10% *less* saturated than @color
    fadein(@color, 10%); // 10% *less* transparent than @color
    fadeout(@color, 10%); // 10% *more* transparent than @color
    fade(@color, 50%); // 50% transparency
    spin(@color, 10); // 10 degree larger in hue than @color
    spin(@color, -10); // 10 degree smaller hue than @color
    mix(@color1, @color2, 50%); // mix of @color1 and @color2
    HEX
    HEX
    HEX
    http://lesscss.org/#-color-functions
    Friday, May 3, 13
    

    View Slide

53. Color Functions
    lighten(@color, 10%); // 10% *lighter* than @color
    darken(@color, 10%); // 10% *darker* than @color
    saturate(@color, 10%); // 10% *more* saturated than @color
    desaturate(@color, 10%); // 10% *less* saturated than @color
    fadein(@color, 10%); // 10% *less* transparent than @color
    fadeout(@color, 10%); // 10% *more* transparent than @color
    fade(@color, 50%); // 50% transparency
    spin(@color, 10); // 10 degree larger in hue than @color
    spin(@color, -10); // 10 degree smaller hue than @color
    mix(@color1, @color2, 50%); // mix of @color1 and @color2
    HEX
    HEX
    HEX
    HEX
    http://lesscss.org/#-color-functions
    Friday, May 3, 13
    

    View Slide

54. Color Functions
    lighten(@color, 10%); // 10% *lighter* than @color
    darken(@color, 10%); // 10% *darker* than @color
    saturate(@color, 10%); // 10% *more* saturated than @color
    desaturate(@color, 10%); // 10% *less* saturated than @color
    fadein(@color, 10%); // 10% *less* transparent than @color
    fadeout(@color, 10%); // 10% *more* transparent than @color
    fade(@color, 50%); // 50% transparency
    spin(@color, 10); // 10 degree larger in hue than @color
    spin(@color, -10); // 10 degree smaller hue than @color
    mix(@color1, @color2, 50%); // mix of @color1 and @color2
    HEX
    HEX
    HEX
    HEX
    HEX
    http://lesscss.org/#-color-functions
    Friday, May 3, 13
    

    View Slide

55. Color Functions
    lighten(@color, 10%); // 10% *lighter* than @color
    darken(@color, 10%); // 10% *darker* than @color
    saturate(@color, 10%); // 10% *more* saturated than @color
    desaturate(@color, 10%); // 10% *less* saturated than @color
    fadein(@color, 10%); // 10% *less* transparent than @color
    fadeout(@color, 10%); // 10% *more* transparent than @color
    fade(@color, 50%); // 50% transparency
    spin(@color, 10); // 10 degree larger in hue than @color
    spin(@color, -10); // 10 degree smaller hue than @color
    mix(@color1, @color2, 50%); // mix of @color1 and @color2
    HEX
    HEX
    HEX
    HEX
    HEX
    RGBA
    http://lesscss.org/#-color-functions
    Friday, May 3, 13
    

    View Slide

56. Color Functions
    lighten(@color, 10%); // 10% *lighter* than @color
    darken(@color, 10%); // 10% *darker* than @color
    saturate(@color, 10%); // 10% *more* saturated than @color
    desaturate(@color, 10%); // 10% *less* saturated than @color
    fadein(@color, 10%); // 10% *less* transparent than @color
    fadeout(@color, 10%); // 10% *more* transparent than @color
    fade(@color, 50%); // 50% transparency
    spin(@color, 10); // 10 degree larger in hue than @color
    spin(@color, -10); // 10 degree smaller hue than @color
    mix(@color1, @color2, 50%); // mix of @color1 and @color2
    HEX
    HEX
    HEX
    HEX
    HEX
    RGBA
    RGBA
    http://lesscss.org/#-color-functions
    Friday, May 3, 13
    

    View Slide

57. Color Functions
    lighten(@color, 10%); // 10% *lighter* than @color
    darken(@color, 10%); // 10% *darker* than @color
    saturate(@color, 10%); // 10% *more* saturated than @color
    desaturate(@color, 10%); // 10% *less* saturated than @color
    fadein(@color, 10%); // 10% *less* transparent than @color
    fadeout(@color, 10%); // 10% *more* transparent than @color
    fade(@color, 50%); // 50% transparency
    spin(@color, 10); // 10 degree larger in hue than @color
    spin(@color, -10); // 10 degree smaller hue than @color
    mix(@color1, @color2, 50%); // mix of @color1 and @color2
    HEX
    HEX
    HEX
    HEX
    HEX
    RGBA
    HEX
    RGBA
    http://lesscss.org/#-color-functions
    Friday, May 3, 13
    

    View Slide

58. Color Functions
    lighten(@color, 10%); // 10% *lighter* than @color
    darken(@color, 10%); // 10% *darker* than @color
    saturate(@color, 10%); // 10% *more* saturated than @color
    desaturate(@color, 10%); // 10% *less* saturated than @color
    fadein(@color, 10%); // 10% *less* transparent than @color
    fadeout(@color, 10%); // 10% *more* transparent than @color
    fade(@color, 50%); // 50% transparency
    spin(@color, 10); // 10 degree larger in hue than @color
    spin(@color, -10); // 10 degree smaller hue than @color
    mix(@color1, @color2, 50%); // mix of @color1 and @color2
    HEX
    HEX
    HEX
    HEX
    HEX
    RGBA
    HEX
    HEX
    RGBA
    http://lesscss.org/#-color-functions
    Friday, May 3, 13
    

    View Slide

59. Color Functions
    lighten(@color, 10%); // 10% *lighter* than @color
    darken(@color, 10%); // 10% *darker* than @color
    saturate(@color, 10%); // 10% *more* saturated than @color
    desaturate(@color, 10%); // 10% *less* saturated than @color
    fadein(@color, 10%); // 10% *less* transparent than @color
    fadeout(@color, 10%); // 10% *more* transparent than @color
    fade(@color, 50%); // 50% transparency
    spin(@color, 10); // 10 degree larger in hue than @color
    spin(@color, -10); // 10 degree smaller hue than @color
    mix(@color1, @color2, 50%); // mix of @color1 and @color2
    HEX
    HEX
    HEX
    HEX
    HEX
    RGBA
    HEX
    HEX
    RGBA
    HEX
    http://lesscss.org/#-color-functions
    Friday, May 3, 13
    

    View Slide

60. Color Functions
    lighten(@color, 10%); // 10% *lighter* than @color
    darken(@color, 10%); // 10% *darker* than @color
    saturate(@color, 10%); // 10% *more* saturated than @color
    desaturate(@color, 10%); // 10% *less* saturated than @color
    fadein(@color, 10%); // 10% *less* transparent than @color
    fadeout(@color, 10%); // 10% *more* transparent than @color
    fade(@color, 50%); // 50% transparency
    spin(@color, 10); // 10 degree larger in hue than @color
    spin(@color, -10); // 10 degree smaller hue than @color
    mix(@color1, @color2, 50%); // mix of @color1 and @color2
    HEX
    HEX
    HEX
    HEX
    HEX
    RGBA
    HEX
    HEX
    RGBA
    HEX
    DOCS
    http://lesscss.org/#-color-functions
    Friday, May 3, 13
    

    View Slide

61. Color Functions
    lighten(@color, 10%); // 10% *lighter* than @color
    darken(@color, 10%); // 10% *darker* than @color
    saturate(@color, 10%); // 10% *more* saturated than @color
    desaturate(@color, 10%); // 10% *less* saturated than @color
    fadein(@color, 10%); // 10% *less* transparent than @color
    fadeout(@color, 10%); // 10% *more* transparent than @color
    fade(@color, 50%); // 50% transparency
    spin(@color, 10); // 10 degree larger in hue than @color
    spin(@color, -10); // 10 degree smaller hue than @color
    mix(@color1, @color2, 50%); // mix of @color1 and @color2
    HEX
    HEX
    HEX
    HEX
    HEX
    RGBA
    HEX
    HEX
    RGBA
    HEX
    DOCS
    http://lesscss.org/#-color-functions
    mix(#FFF, #000, 100%); // returns #FFFFFF;
    Friday, May 3, 13
    

    View Slide

62. Demo Time
    Friday, May 3, 13
    

    View Slide

63. Math Functions
    Friday, May 3, 13
    

    View Slide

64. Math Functions
    .bottom(@size: 4px, @leftColor: #333, @rightColor: #333) {
    @arrow: floor(@size / 2);
    position: relative;
    left: -@size;
    &:before { ... }
    }
    round(1.67); // returns `2`
    ceil(2.4); // returns `3`
    floor(2.6); // returns `2`
    percentage(0.5); // returns `50%`
    Friday, May 3, 13
    

    View Slide

65. Guards (if/else)
    Friday, May 3, 13
    

    View Slide

66. Guards
    Guards are the newest addition to LESS (v1.2 Jan ’12). Guards are the
    alternative to conditional statements; formatted similar to media-queries.
    // Example media query
    @media screen and (max-width: 480px)
    @media screen and (max-width: 480px), screen and (max-device-width: 480px)
    Friday, May 3, 13
    

    View Slide

67. Guards
    Guards are the newest addition to LESS (v1.2 Jan ’12). Guards are the
    alternative to conditional statements; formatted similar to media-queries.
    // Example media query
    @media screen and (max-width: 480px)
    @media screen and (max-width: 480px), screen and (max-device-width: 480px)
    // Width must be greater than or equal to 200px
    .ribbon (@width, @direction) when (@width >= 200px) { ... }
    Friday, May 3, 13
    

    View Slide

68. Guards
    Guards are the newest addition to LESS (v1.2 Jan ’12). Guards are the
    alternative to conditional statements; formatted similar to media-queries.
    // Example media query
    @media screen and (max-width: 480px)
    @media screen and (max-width: 480px), screen and (max-device-width: 480px)
    // Width must be greater than or equal to 200px
    .ribbon (@width, @direction) when (@width >= 200px) { ... }
    // Only accept if direction is left or right
    .ribbon (@width, @direction) when (@direction = left), (@direction = right)
    Friday, May 3, 13
    

    View Slide

69. Guards
    Guards are the newest addition to LESS (v1.2 Jan ’12). Guards are the
    alternative to conditional statements; formatted similar to media-queries.
    // Example media query
    @media screen and (max-width: 480px)
    @media screen and (max-width: 480px), screen and (max-device-width: 480px)
    // Width must be greater than or equal to 200px
    .ribbon (@width, @direction) when (@width >= 200px) { ... }
    // Only accept if direction is left or right
    .ribbon (@width, @direction) when (@direction = left), (@direction = right)
    // Change to percentage for responsive/fluid layout
    .sidebar (@width) when not (ispercentage(@width)) { ... }
    Friday, May 3, 13
    

    View Slide

70. Guards
    Guards are the newest addition to LESS (v1.2 Jan ’12). Guards are the
    alternative to conditional statements; formatted similar to media-queries.
    // Example media query
    @media screen and (max-width: 480px)
    @media screen and (max-width: 480px), screen and (max-device-width: 480px)
    // Width must be greater than or equal to 200px
    .ribbon (@width, @direction) when (@width >= 200px) { ... }
    // Only accept if direction is left or right
    .ribbon (@width, @direction) when (@direction = left), (@direction = right)
    // Change to percentage for responsive/fluid layout
    .sidebar (@width) when not (ispercentage(@width)) { ... }
    // Path must be a valid url
    .icon (@filename, @path) when (isurl(@path)) { ... }
    Friday, May 3, 13
    

    View Slide

71. Guards
    Type Checking
    iscolor
    isnumber
    isstring
    iskeyword
    isurl
    Unit Checking
    ispixel
    ispercentage
    isem
    Friday, May 3, 13
    

    View Slide

72. Namespaces/Scope
    Friday, May 3, 13
    

    View Slide

73. Scope
    Scope in LESS works very similar to javascript.
    A new scope is defined in each CSS declearation
    @primary: #fff;
    .float-left() {
    _display: inline;
    float: left;
    }
    .module {
    background: @primary;
    .float-left();
    }
    #wide-theme {
    @primary: #000;
    .news { color: @primary; }
    }
    #mobile-theme {
    .news { color: @primary; }
    }
    .module {
    background: #ffffff;
    _display: inline;
    float: left;
    }
    #wide-theme .news {
    color: #000000;
    }
    #mobile-theme .news {
    color: #ffffff;
    }
    Friday, May 3, 13
    

    View Slide

74. Namespace
    Helps avoid naming conflicts with multiple libraries.
    Better way of organizing mixins.
    #arrow {
    .left(@size: 10px, @color: #333) { ... }
    .right(@size: 10px, @color: #333) { ... }
    .up(@size: 10px, @color: #333) { ... }
    .down(@size: 10px, @color: #333) { ... }
    }
    #ribbon {
    .top(@size: 4px, @leftColor: #333, @rightColor: #333) {
    @arrow: @size / 2;
    left: -@size;
    &:before { ... }
    &:after { ... }
    }
    .bottom(@size: 4px, @leftColor: #333, @rightColor: #333) {
    @arrow: @size / 2;
    left: -@size;
    &:before { ... }
    &:after { ... }
    }
    }
    Friday, May 3, 13
    

    View Slide

75. Example APP
    Friday, May 3, 13
    

    View Slide

76. Friday, May 3, 13
    

    View Slide

77. Friday, May 3, 13
    

    View Slide

78. Outputting CSS
    Friday, May 3, 13
    

    View Slide

79. LESS in the Browser
    
    
    
    Friday, May 3, 13
    

    View Slide

80. LESS APPS
    Friday, May 3, 13
    

    View Slide

81. Friday, May 3, 13
    

    View Slide

82. Friday, May 3, 13
    

    View Slide

83. Friday, May 3, 13
    

    View Slide

84. Friday, May 3, 13
    

    View Slide

85. > lessc screen.less screen.min.css -x
    Friday, May 3, 13
    

    View Slide

86. LESS vs. SASS
    Friday, May 3, 13
    

    View Slide

87. Friday, May 3, 13
    

    View Slide

88. ‣ SASS has @extend
    ‣ String Interpolation can be applied to
    property
    Current Differences
    Friday, May 3, 13
    

    View Slide

89. LESS/SASS vs. CSS
    Friday, May 3, 13
    

    View Slide

90. LESS doesn’t write bloated
    CSS, Developers Do!
    Friday, May 3, 13
    

    View Slide

91. What’s Next?
    Friday, May 3, 13
    

    View Slide

92. ‣ :extend() functionality, FINALLY!
    ‣ math must be in (2px/1px)
    ‣ variables can be used as default value of
    mixins - .module(@width: @baseWidth) { … }
    ‣ new math functions: pow, pi, tan, sin, cos, etc.
    ‣ convert function convert(5em, px)
    Coming in LESS 1.4
    Friday, May 3, 13
    

    View Slide

93. Questions? Concerns? Complaints?
    Friday, May 3, 13
    

    View Slide

94. Thanks for Listening
    jakefolio
    http://jakefolio.com
    me@jakefolio.com
    Please Rate Me!
    https://joind.in/8380
    Friday, May 3, 13
    

    View Slide