The web is evolving. That within itself is such a simple statement, yet the uphill climb can seem horrifying even for some of the most experienced web designers and developers working today! Here at Untame, we take pride in putting out not only high quality work, but delivering that work to our clients quickly. However, when a developer or designer finds themselves working quickly, there is always a danger of work becoming sloppy. Luckily for us, the web community is always delivering new and innovative ways to refine the web crafting process.
Using preprocessors can be a very good idea. Tools like LESS and SASS have a natural ability to keep your code nice an tidy. Better yet, once you are done coding your site, popular LESS and SASS compilers often offer a automatic minification feature! Cool, Huh?
What is Less?
“LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.”
Variables
- Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.
Mixins
- Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example below.
Nested Rules
- Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.
Functions & Operations
- Are some elements in your style sheet proportional to other elements? Operations let you add, subtract, divide and multiply property values and colors, giving you the power to create complex relationships between properties. Functions map one-to-one with JavaScript code, allowing you to manipulate values however you want.
Let’s Talk Nesting
CSS is the tool we use to style the web. However, writing plain CSS can become tedious over time as you might find yourself performing the same tasks, or circleing back to do something that you had forgotten. For instance, when creating navigation menus my code may look a little something like this.
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Connect</a></li> </ul> </nav>
Now, to style this, one might float each line item left. Then in order to provide spacing, could use CSS to make the “a” tags to display as block, then add padding or margin to ensure that each anchor tag is well spaced apart. Often, this is a great way to approach a navagational style. However, what if you require that both your first and last line items have no padding on their left or right sides respectivly in order to perhaps align your navigation to other elements on the page.
Usually, this would lead to a designer moving back through the CSS and making these adjustments in a correct, but semi-redundant way.
nav ul {
width: 960px;
}
nav ul li {
float: left;
}
nav ul li a {
padding: 10px 25px;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
nav ul li:first-child a{
padding-left: 0px;
}
nav ul li:last-child a{
padding-right: 0px;
}
Though the code above may seem nice and tidy, when it comes to a giant large scale website it may become burdensome to dip back into the same CSS pool over and over again. CSS pre-processors such as Less and SASS make this task a very simple one using the idea of simple nesting.
nav {
ul {
width: 960px;
li {
float: left;
&first-child a {padding-left: 0px;}
&:last-child a {padding-right: 0px;}
a {
padding: 10px 25px;
text-decoration: none;
&:hover {text-decoration: underline;}
}
}
}
}
Though it may not seem like much, once you learn the idea of nesting selectors within your LESS markup, remembering to style those pesky elements becomes a thing of the past. Moreover using a css pre-processor like LESS also makes it easier for web developers to produce more production ready files for the web. Modern LESS compilers like Codekit on the Mac and Winless for the PC offer automatic minification of CSS so you can be sure that your stylesheet is tiny and quick to download.
Choose your Weapon
WinLess
Winless is very simply a LESS based gui for Windows users. Simple and intuitive Winless offers an easy solution for the Windows developer looking to get started with LESS quickly
CodeKit
Codekit may be one of the premier web-crafting tools available for the Mac. Need to compile LESS, SASS, HAML or just about anything else? No problem! Codekit has you covered. As an added bonus CodeKit also includes a few incredible build tools that automatically optimize your images for the web.
Hopefully this post will get you started with CSS preprocessors. I promise that with time your workflow will be changed forever. Using a few of these tools you’ll be faster and more effective than ever before!
