Menu

Less is More

January 2nd, 2015

Ever wondered what all the fuss is about SASS, SCSS and LESS? Today I'd like to introduce LESS and hopefully give some interesting examples.

What is LESS?

LESS is powerful tool for writing short code snippets which are converted to plain CSS. 
So why would you use LESS when the output is still CSS?  
Easy: LESS makes your  CSS consistent and makes it easy to create reusable code. 

To install: please see the documentation at http://lesscss.org

So let's start: I allways forget to use prefixes, luckily in LESS I can write a function/mixin. In short, I declare a function so I can reuse it on elements in my site.

 .box {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
  } 

You can also pass variables to the mixin, it defaults at 10px when no variables are passed:

 .corner(@radius:10px) {
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    -o-border-radius: @radius; border-radius:
    @radius;
  }
  .first-box {
      .corner();
  }
  .second-box {
     .corner(3px);
  }
 

This would output:

 .first-box {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
  }
  .second-box {
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      -o-border-radius: 3px;
      border-radius: 3px;
  } 

Lastly, I would like to give a nesting example:

 footer #row.second #navigation {
      ul { margin-left:1em; }
      li { float:left; }
      a { color:#FFF; }
  }

  /* Output: */

  footer #row.second #navigation ul {
      margin-left: 1em;
  }
  footer #row.second #navigation li {
      float: left;
  }
  footer #row.second #navigation a {
      color: #FFF;
  }
 

That's only some of the power LESS has, for a reference check: http://lesscss.org/#reference
 

Up next:

Creating partially active links or active trails with React / Gatsby

November 11th, 2019

Ever needed to create active links that belong to a parent link and make sure the parent is still active? In Gatsby you can use the <Link> tag which extends @reach/router. By default you could access the isPartiallyCurrent props. Just make sure there is a /blog page and it's children have an url like /blog/whatever-blog-1.