If you regularly develop code, you may well have used namespaces in some form or other. Did you know you could use them in CSS?
That's right! With the power of LESS comes the ability to group CSS styles into logical groups, or namespaces, which you can reuse throughout your code. In the event you need to alter styles on some of the items you are styling, you can do this by adding additional styles that only apply to certain items. Let's take a look and see how this works, using a simple example of styling three buttons from a basic form; this is adapted from a tutorial created by Nick La, at http://webdesignerwall.com/tutorials/css3-gradient-buttons.
For this exercise all we need is a text editor. Everything else will be provided within the code.
- Fire up your normal text editor, save a copy of the template we created at the start of this chapter, and add the following in the
<head>section:<link rel="stylesheet" type="text/less" href="namespaces.less">
- Add the following code and save it as
test less namespaces.html:<body> <form action=" demo_form.php "> Username: <input type="text" name="username" /> <input type="submit" value="Submit" class="redbutton"/> </form> <p> <form action=" demo_form.php "> Username: <input type="text" name="username" /> <input type="submit" value="Submit" class="orangebutton"/> </form> <p> <form action=" demo_form.php "> Username: <input type="text" name="username" /> <input type="submit" value="Submit" class="bluebutton"/> </form> </body>
- Create a new document and save it as
namespaces.less; there are a lot of LESS styles to add, so let's begin with the base button style:#button_base { .button { display: inline-block; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); &:hover { text-decoration: underline; } &:active { position: relative; top: 1px; } } .medium { font-size: 12px; padding: .4em 1.5em .42em; } } - The next block controls the individual color styling; we begin with creating the base colors and styles:
.defined_color (@color1) { color: lighten(@color1, 10%); border: solid 1px darken(@color1, 27%); background: darken(@color1, 13%); background: -webkit-gradient(linear, left top, left bottom, from(darken(@color1, 4%)), to(darken(@color1, 24%))); background: -moz-linear-gradient(top, darken(@color1, 18%), darken(@color1, 38%)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='darken(@color1, 4%)', endColorstr='darken(@color1, 24%)'), - We need to add some action to show when we hover over buttons, so go ahead and add the following lines of code:
&:hover { background: darken(@color1, 24%); background: -webkit-gradient(linear, left top, left bottom, from(darken(@color1, 27%)), to(darken(@color1, 17%))); background: -moz-linear-gradient(top, darken(@color1, 27%), darken(@color1, 17%)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='darken(@color1, 27%)', endColorstr='darken(@color1, 17%)'), } - We finish creating the styles by adding in the
:activepseudo class:&:active { color: darken(@color1, 34%); background: -webkit-gradient(linear, left top, left bottom, from(darken(@color1, 24%)), to(darken(@color1, 4%))); background: -moz-linear-gradient(top, darken(@color1, 24%), darken(@color1, 4%)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='darken(@color1, 24%)', endColorstr='darken(@color1, 4%)'), } } - Let's now tie them all together and set up the namespaces that we will use to style the individual buttons:
input.redbutton { #button_base > .button; #button_base > .medium; .defined_color(#fae7e9); } input.orangebutton { #button_base > .button; #button_base > .medium; .defined_color(#fef4e9); } input.bluebutton { #button_base > .button; #button_base > .medium; .defined_color(#d9eef7); } - If all is well, you will see the same as the following screenshot when viewing your work in a browser:
In this exercise we've used the power of LESS to group blocks of CSS styles together, thereby reducing the amount of code we need to write; this is very much akin to what most programming languages allow us to do. In this example we've created a base style, which we called #button_base. Within this, we've set up two styles: one that controls the button appearance (.button) and the other that controls the text appearance (.medium). These styles can then be called from the three individual button styles that we are using to create the red, orange, and blue buttons.
This means that if you want to add more styles, you can easily do so; you could for example do something like this:
input.greybutton {
#button_base > .button;
#button_base > .medium;
.defined_color(#778899);
}You can then add in an additional button in your HTML code using this style, it will produce the same as the following screenshot:
While researching for this book, I had originally planned to use a format of code similar to this, to create each of the three buttons as follows:
input.redbutton {
#button_base > .button;
#button_base > .medium;
.defined_color(#fae7e9, #b73948, #da5867, #f16c7c, #bf404f, #bf404f, #ba4b58, #cf5d6a, #a53845);
}The code worked okay, and served the purpose, but it wasn't the best way to create the buttons. I had to work out which colors to use, and pass through nine individual colors in all to the mixin... surely... I could do better!
I used the darken facility within LESS to work out the colors that should be used, as shown in the following code extract:
color: lighten(@color1, 10%);
border: solid 1px darken(@color1, 27%);
background: darken(@color1, 13%);
background: -webkit-gradient(linear, left top, left bottom, from(darken(@color1, 4%)), to(darken(@color1, 24%)));This means I only need to pass through one color:
input.greybutton {
#button_base > .button;
#button_base > .medium;
.defined_color(#778899);
}This surely has to be a better way to code a mixin! You just need to choose a single color to pass through (such as any from http://html-color-codes.info/color-names/), and LESS will work out the rest based on your chosen color.