Scoping in LESS (Should know)

If you have spent any time writing programming code, you should already be scoping and using it to control a variable depending on where it has been set in code. Variable scope in LESS is controlled in the same way. Let's take a look at how it works within LESS, using a simple example of styling some <div> tags.

Getting ready

This is a simple exercise; all you will need for this one is your text editor.

How to do it…

  1. Let's make a start by setting up some basic HTML to demonstrate how scoping works. Create a new document and add a copy of the template code we created at the beginning of this chapter.
  2. Add the following inside the <head> section:
      <link rel="stylesheet" type="text/less" href="scoping.less">
  3. Add the following lines of code into the <body> section as follows and save it as test less scoping.html:
      <body>
  <div class="item item-1"></div>
  <div class="wrapper w1">
    <div class="item item-1">List Item 1</div>
    <div class="item item-2">List Item 2</div>
  </div>
  <div class="wrapper w2">
    <div class="item item-1">List Item 3</div>
    <div class="item item-2">List Item 4</div>
    <div class="item item-3">List Item 5</div>
    <div class="item item-4">List Item 6</div>
  </div>
 </body>
  4. Go ahead and create a new document; this time save it as scoping.less and add the following lines of code, starting with the base variables:
    //Default Variables
@width: 98.5%;
@height: 50px;
@background: #333;
@fontcolor: #fff;
  5. We need to add the mixin which will control the base styles for .item:
    .mixin(@width: @width, @height: @height, @background: @background)  {
  width: @width; height: @height; background: @background;
  float: left; color: @fontcolor; font-weight: bold;
  font: 22px Arial, Helvetica, sans-serif; margin: 3px;   padding: 5px;
}

.item { .mixin(); }
  6. Add the following styles which will override the base mixin:
    /* Overrides default variables for any .item in the .wrapper div */
.wrapper {
   @height: 20px; //Change height
   @background: #360; //Change background color
   .item { .mixin(); }
}
.w1 {
   @width: 48.6%; //Change width
   @background: #854; //Change background color
   padding-top: 10px;
   .item { .mixin(); }
}
.w2 {
   @width: 23.7%; //Change width
   @height: 55px; //Change height
   .item { .mixin(); } 
}
  7. If all is well, you will see something similar to the following screenshot when previewing it in your browser:
    How to do it…

How it works…

Remember how we looked at mixins at the start of this book? Well, we've used one here to illustrate scopes in action. If you were to look at the HTML on its own, you might expect the first two <div> tags within wrapper w1 to be contained within the <div> tag of wrapper w1. However, this won't be the case; the base styles we included in the mixin being used for .item are being overridden by additional styles that have been set up for w1 and w2 that override the base wrapper style. We can see the effects of the overridden styles by looking at the compiled CSS from within something like Firebug:

/* Uses the Default Mixin */
.item {
  width: 99.5%;
  height: 50px;
  background: #333333;
  float: left;
  color: #ffffff;
  font-weight: bold;
  font: 22px Arial, Helvetica, sans-serif;
  margin: 3px;
  padding: 5px;
}

/* Overrides default variables for any .item in the .wrapper div */
.wrapper .item {
  width: 99.5%; 
  height: 20px;
  background: #336600;
  float: left;
  color: #ffffff;
  font-weight: bold;
  font: 22px Arial, Helvetica, sans-serif;
  margin: 3px;
  padding: 5px;
}

.w1 .item {
  width: 48.6%;
  height: 50px;
  background: #885544;
  float: left;
  color: #ffffff;
  font-weight: bold;
  font: 22px Arial, Helvetica, sans-serif;
  margin: 3px;
  padding: 5px;
}

.w2 .item {
  width: 23.7%;
  height: 55px;
  background: #333333;
  float: left;
  color: #ffffff;
  font-weight: bold;
  font: 22px Arial, Helvetica, sans-serif;
  margin: 3px;
  padding: 5px;
}

The downside of using scopes in this manner is that you may get some duplication appear. It just means that you need to take care of which styles are used in the base mixin to help reduce unnecessary duplication.

It's time to move away from theory; we've looked at most parts of the LESS library to see how you can use it to help structure your CSS more effectively. Let's move away from theory, and turn our focus to looking at some real-life examples, beginning with using it to transform some images.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset