CWYAlpha

Just another WordPress.com site

Thought this was cool: LESS code, more fun – Blog – Austin Pickett – Freelance Web Developer

leave a comment »


Comments: “LESS code, more fun – Blog – Austin Pickett – Freelance Web Developer”

URL: http://www.austinkpickett.com/blog/less-code-more-fun/

LESS code, more fun

by Austin on September 2, 2012
code,css,development,less,programming

There’s always a moment when you or I are programming and we say to ourselves, “I wish X had Y functionality,” and at that moment there’s a John Resig there to make us JQuery for Javascript. Well this time we are talking about the CSS ‘framework,’ LESS by Alexis Sellier who has saved me lots of time, and lines of CSS. If you haven’t already given LESS a try, now is the time.

What’s wrong with CSS?

Nothing is considerably wrong with CSS, however, much like an over-privileged child, we will continue to want something more, and LESS is more. If you have written thousands of lines of CSS in your web development career and have wanted simple things that other languages have: variables, nested capability, and functions… LESS has these, and a lot more. Ever get tired of copy and pasting all the different browser prefixes for each radius, shadow, et al? “Mixins” will take care of that.

Let’s take a look

You may be overwhelmed by the new terminology and aspect of learning something new, but it’s relatively easy and begins to feel natural.

Variables

Variables are really simple to use, whether referencing a color or any attribute, you can assign it to a variable:

1
2
3
4
5
// LESS
@white: #FFF;
footer {
 color: @white;
}

Nested Rules

Using the color from the last example, we can see how we can set the color of a child element within the footer.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// LESS
footer {
 // rules here
 a {
 color: @white;
 }
}
 
// CSS
footer {
 // rules here
}
footer a {
 color: #FFFFFF;
}

Mixins

Mixins are the ones that really save the time, they allow you to take a chunk of rules, and apply them to properties. They are extremely useful for cross browser compatibility.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// LESS
 
.rounded-corners (@radius: 5px) {
 border-radius: @radius;
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
}
 
// using default 5px
#header {
 .rounded-corners;
}
 
// passing in a new radius
#footer {
 .rounded-corners(10px);
}

Round Up

Before you go, you may be wondering, “Do I just write LESS code in a .CSS file? Unfortunately, not, when you download LESS what you are downloading is the Javascript file that interprets your LESS code to CSS. It’s extremely important that you call your .LESS file before your .JS file like so:

1
2
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

It’s also extremely important to not keep your less.js file operating during production mode. When you download less, it is bundled with the less -> css conversion tool, also with a minified version by simple running:

1
lessc -x style.less > style.css

Make sure you go over the LESS documentation to reaffirm yourself with LESS and learn things that weren’t covered (functions, operations, and more).

If you have meddled with LESS, be sure to leave a comment with your experience with it.

Please enable JavaScript to view the comments powered by Disqus.

Unique Designs

The hand-crafted work I deliver comes with experience & passion from working with many great clients.

Learn More »

Quality Services

Whether I am in charge of branding your business or developing a user-rich application, your project will receive top-quality service.

Learn More »

Drop me a line

Let’s get in touch! Whether business, error report, or discussing nerdy topics — give me a shout.

Learn More »


from Hacker News 50: http://www.austinkpickett.com/blog/less-code-more-fun/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+hacker-news-feed-50+%28Hacker+News+50%29

Written by cwyalpha

九月 4, 2012 在 12:54 下午

发表在 Uncategorized

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: