MMNCS.COM
  • Web
    • WordPress
    • Joomla
    • Drupal
  • Tips & Tricks
    • Youtube
    • WordPress
    • Windows
    • Web
    • Twitter
    • Linux Ubuntu
    • Google
    • Facebook
    • Drupal
    • Developer
    • Designer
    • Apple
  • Tech News
    • Windows Phone
    • Servers
    • Search Engines
    • Nokia
    • Microsoft
    • iPhone
    • Google
    • Facebook
    • Browsers
    • Apple
  • Social Media
    • Youtube
    • Yahoo
    • Twitter
    • Google+
    • Facebook
  • Server
    • Web Server
      • NGINX
      • Apache Web Server
    • Ubuntu
    • Security
      • Access Control
    • Mail Server
    • Hosting
    • FTP Server
    • Firewall
    • Database
      • MySQL
    • Backup
  • SEO
    • Yahoo Search
    • Google Search
    • Google AdSense
    • Bing
  • Off-Topic
    • Weird
    • Music
    • Fun
    • Documentaries
  • Mobile
    • Windows Phone 7
    • iPhone
    • Android
  • Google
    • Google Translate
    • Google Plus
    • Google PageRank
    • Google Adwords
    • AdSense
  • Design & Dev
    • Webdevelopment
    • Version Control
      • Git Version Control
    • Programming
    • PHP
    • JavaScript
    • HTML
    • Development Environment
    • CSS

Related

  1. Solved: Facebook XFBML Like Button Bug Creates a Vertical Scroll-Bar [Web Developer]
  2. Add a Simple Google Translate DropDown Box To Your Web Site [Tips & Tricks]
  3. Add a Cool Google Plus Profile Add to Circles Widget to Your Website [Google Plus]
  • Share on Tumblr

Optimize Your Time And Write Better CSS With {less} – [CSS Stylesheets]

by MMNCS on October 23rd, 2011, updated October 31, 2011
write-better-css-with-less-optimize-and-reuse

If you think parts of CSS is repetitive, tedious, and … well, very boring. Have a look here. LESS extends CSS with dynamic behavior such as variables, reusable objects (Mixins/Classes), rules and functions. This minimizes the amount of CSS code, makes code reusable, easier to maintain, sustainable, etc.. This might sound difficult, but actually it’s not that hard. Here is an example of a varible used in LESS:

 

Varibles
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.

// LESS

@color: #4D926F;

#header {
color: @color;
}
h2 {
color: @color;
}

The variable @color can here be reused throughout the style sheet and changed one place to make global changes.

 

Reusable objects / Classes with functions / Mixins
Here an example on using Mixins, as the are called in LESS termonology. 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 bellow.

// LESS

.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}

#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}

This enables you to reuses the Mixin .rounded-corners and specify border-radius throughout the stylesheet.
 
 
 
Write some of your own LESS
LESS runs on both the client-side (IE 6+, Webkit, Firefox), and server-side. And has available modules/plugins for both Drupal and WordPress.

 
 

Client-side
To use LESS client-side link your .less stylesheets with the rel set to “stylesheet/less”:

<link rel="stylesheet/less" type="text/css" href="styles.less">

 
Then download less.js and then include it from the top of the page, like so:

<script type="text/javascript" src="less.js"></script>

Make sure you include your stylesheets before the script.
 
 
Drupal usage
Drupal has a LESS CSS Preprocessor module. This module will automatically process any LESS files that are added. The module can be found here:
Drupal LESS CSS Preprocessor
 
 
WordPress usage
WordPress also has a plugin for LESS which can be found here:
WP-LESS
 
 
Read more
If you want to know more about LESS, visit their HP. Here is it also explained how to install LESS Server-side, more examples, and much other good information.
{less}
 
Add us to Facebook to get more cool tips & tricks


 

You may be interested in

  1. Add a Simple Google Translate DropDown Box To Your Web Site [Tips & Tricks]
  2. Deploy High Performance Drupal Sites with Mercury on Ubuntu 10.04 (Lucid)
  3. Add a Cool Google Plus Profile Add to Circles Widget to Your Website [Google Plus]
  4. Solved: Facebook XFBML Like Button Bug Creates a Vertical Scroll-Bar [Web Developer]

support and subscribe to the site

Follow @mmncs
Posted in CSS, Developer, Drupal, WordPress Tags: CSS - Cascading Style Sheets, Drupal CMS, LESS, LifeHack, Tips & Tricks, Web Design, Web Designer, Web Developer, WordPress
« Call Your Friends For Free – Cut The Expensive Voice And Text Plans To The Bare Minimum [Mobile Apps]
Take A Picture Of Any Website [WordPress Screenshot Demo] »


Comments

You can leave a response, or trackback from your own site.

    Leave a Reply

    Click here to cancel reply.

    Trackbacks & pingbacks

    1. 23-10-2011
      xhtml css templates – Optimize Your Time And Write Better CSS With {less} – [CSS … | XHTML CSS - Style sheet and html programming tutorial and guides says: [...] here: Optimize Your Time And Write Better CSS With {less} – [CSS … Share and [...]

    Search terms for this article

    • lesscss optimize,
    • windows phone 7 css optimising,
    • less css *+ trick,
    • optimizing css reuse,
    • write better css,
    • less css tips,
    • lesscss: mixins optimization,
    • css less wordpress,
    • optimize less css,
    • drupal less css tutorial,
    • tutorials for less css preprocessor,
    • lesscss optimized,
    • using less for css better or? 2011,
    • google buttons css3 less,
    • less css mixins,
    • less css templates,
    • lesscss: mixins optimization,
    • css optimize tip,
    • less extends css screenshot,
    • lesscss tips,
    • how to install less css on windows 7 server-side usage,
    • button google plus with less css,
    • css less wordpress,
    • tipps tricks less css,
    • reuse class less css,
    • windows phone 7 css optimising,
    • optimizing css reuse,
    • optmise lesscss,
    • less tricks css,
    • less css tutorial,
    • Subscribe

      Find MMNCS.COM on Facebook, about guides, tutorials and learning within webdevelopment, drupal, MySQL, PHP, WordPress, SEO...
      Follow MMNCS.COM on Twitter and get the latest updates
      Follow @mmncs
      Subscribe to MMNCS.COM newsletter, about guides, tutorials and learning within webdevelopment, drupal, MySQL, PHP, WordPress, Programming, Technology, SEO...
    • The Best technology news guides tips tricks on the Internet
    • best online art gallery, paintings, illustrations, fine art photography
    • Services

      Check your Google PageRank checker optimize seo serp page rank
      Take a picture of any website, WordPress Screenshot demo
    • Latest

      Facebook Helps Breakup on One-Third of Marriages in the U.K.

      Facebook Helps Breakup on One-Third of Marriages in the U.K.

      December 30th, 2011

      Husbands and wives in the United Kingdom headed for divorce are increasingly citing Facebook in thei[...]

      Nokia Lumia 800 Demo of Skyscanner. Flight Deals Search for Windows Phone

      Nokia Lumia 800 Demo of Skyscanner. Flight Deals Search for Windows Phone

      December 30th, 2011

      Here's another awesome application for the Nokia Lumia 800 and other Windows Phones. Skyscanner allo[...]

      Nokia Lumia, Samsung, HTC rumored to announce LTE Windows Phone smartphones at CES

      Nokia Lumia, Samsung, HTC rumored to announce LTE Windows Phone smartphones at CES

      December 29th, 2011

      Rumor has it that the one thing that is notoriously missing (well, one of the things) from any Wind[...]

      Why I’m Replacing My iPhone With Nokia Lumia 800 And Why Android Is No Option

      Why I’m Replacing My iPhone With Nokia Lumia 800 And Why Android Is No Option

      December 7th, 2011

      Spoiler alert: This article is about how great the new Nokia Lumia 800 is, so if you are an iPho[...]

      Apple iPhone 4S Battery Drain Is Starting To Become A Serious Issue [iOs 5]

      Apple iPhone 4S Battery Drain Is Starting To Become A Serious Issue [iOs 5]

      November 29th, 2011

      Waiting on the next expected fix from Apple, iPhone 4S users complaining of rapid battery drain are [...]

    • musicfordriving com music for driving underground experimental electronic electronica dj rock jazz upcomming interesting music hot list hype
    • Selected

      Bill Gurley; Too Many Start-Ups Chase Too Little Cash

      Bill Gurley; Too Many Start-Ups Chase Too Little Cash

      November 14th, 2011

      Venture capitalist Bill Gurley has noticed something new this autumn: a big jump in the number of wh[...]

      The Best Programming Contest Ever Made – The AI Challenge Ants 2011 [Developer]

      The Best Programming Contest Ever Made - The AI Challenge Ants 2011 [Developer]

      October 30th, 2011

      The best programming contest ever made! Well that is what they state. The AI Challenge Ants 2011 is [...]

      Take A Picture Of Any Website [WordPress Screenshot Demo]

      Take A Picture Of Any Website [WordPress Screenshot Demo]

      October 28th, 2011

      Take a picture of any website. Just enter the website address in the form and press the button "Take[...]

      Call Your Friends For Free –  Cut The Expensive Voice And Text Plans To The Bare Minimum [Mobile Apps]

      Call Your Friends For Free - Cut The Expensive Voice And Text Plans To The Bare Minimum [Mobile Apps]

      October 14th, 2011

      After been using Viber for some time now. We highly recommend this mobile application for all smartp[...]

      Revolution OS – The history of GNU, Linux and Open Source – Watch Free Online [Documentary]

      Revolution OS - The history of GNU, Linux and Open Source - Watch Free Online [Documentary]

      October 12th, 2011

      Revolution OS is a 2001 documentary which traces the history of GNU, Linux, and the open source and [...]

    • News

      Facebook Helps Breakup on One-Third of Marriages in the U.K.

      Facebook Helps Breakup on One-Third of Marriages in the U.K.

      December 30th, 2011

      Husbands and wives in the United Kingdom headed for divorce[...]

      Nokia Lumia 800 Demo of Skyscanner. Flight Deals Search for Windows Phone

      Nokia Lumia 800 Demo of Skyscanner. Flight Deals Search for Windows Phone

      December 30th, 2011

      Here's another awesome application for the Nokia Lumia 800 and[...]

      Nokia Lumia, Samsung, HTC rumored to announce LTE Windows Phone smartphones at CES

      Nokia Lumia, Samsung, HTC rumored to announce LTE Windows Phone smartphones at CES

      December 29th, 2011

      Rumor has it that the one thing that is notoriously missing[...]

    • Social Media

      Solved: Facebook XFBML Like Button Bug Creates a Vertical Scroll-Bar [Web Developer]

      Solved: Facebook XFBML Like Button Bug Creates a Vertical Scroll-Bar [Web Developer]

      September 16th, 2011

      After been doing a lot of work on the site I noticed when testing in IE8 and Firefox 3.6.x that I wa[...]

      Add a Cool Google Plus Profile Add to Circles Widget to Your Website [Google Plus]

      Add a Cool Google Plus Profile Add to Circles Widget to Your Website [Google Plus]

      August 11th, 2011

      Google Plus has created a very simple widget to embed your Google Plus profile on websites. This wid[...]

      How To Export All Your Facebook Friends To Google+ Using Yahoo Mail [Google+]

      How To Export All Your Facebook Friends To Google+ Using Yahoo Mail [Google+]

      August 8th, 2011

      Since the popular Chrome extension Facebook Friends Exporter got blocked we needed another way of ge[...]

    • Google

      Check Your Google Page Rank Here – Updated To Use The New Google PageRank Query URL

      Check Your Google Page Rank Here - Updated To Use The New Google PageRank Query URL

      October 8th, 2011

      Check PAGE RANK of Web site pages Instantly This is a free service to check Google™ page rank ins[...]

      Add a Simple Google Translate DropDown Box To Your Web Site [Tips & Tricks]

      Add a Simple Google Translate DropDown Box To Your Web Site [Tips & Tricks]

      September 6th, 2011

      Google Translate is the best free online translation service today and I often wonder why I rarely s[...]

      Google Closes Down 10 Mayor Business Areas [Tech News]

      Google Closes Down 10 Mayor Business Areas [Tech News]

      September 5th, 2011

      Google closes down 10 business areas in which the company itself calls "autumn-cleaning."The cle[...]

    • Home
    • About
    • Contact
    • Wollawonka
    Copyright © MMNCS.COM is a site aimed at web developers, system engineers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites. We cover Open Source recommendations, Linux Server guides, PHP, HTML, CSS, Drupal & WordPress Tutorials, Guides, Tips & Technology News.