{less} is more

Προγραμματιστική λογική σε css;

Γιατί όχι; Πόσες φορές αλήθεια δεν ψάξατε μέσα σε ένα τεράστιο .css αρχείο για να βρείτε το χρώμα #3357FF και μετά κάνατε search and replace στον text editor για να το αντικαταστήσετε παντού; Πολλές; Ωραία, τότε συνεχίστε να διαβάζετε, γιατί με την less μπορούμε να έχουμε μεταβλητές, mixins (functions), operations (πράξεις) και nested rules όταν γράφουμε css. Ισχύουν όλοι οι συντακτικοί κανόνες που ξέρουμε για τα css και απλά προστίθενται μερικές ευκολίες προγραμματιστικής λογικής.

Μεταβλητές

Στο παραπάνω παράδειγμα αρκεί να έχουμε στην αρχή ενός .less αρχείου ορίσει μία μεταβλητή ως εξής:

@dark_color: #3357FF;

και μετά να το χρησιμοποιήσουμε όσες φορές θέλουμε π.χ.

div.important { 
	border: 5px solid @dark_color;
} 

div.emphasis { 
	color: @light_color;
	background: @dark_color;
}

Mixins (functions)

Ορίζουμε ένα mixin ως κλάση (που όπως βλέπετε μπορεί να δέχεται και μεταβλητές)...

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

και μετά το χρησιμοποιούμε πολύ απλά ως rule σε κάποιο άλλο αντικείμενο.

div.emphasis { 
	color: @light_color;
	background: @dark_color;
 
	.rounded_corners(15px); 
}

Nested rules

Μπορούμε να γράψουμε...

div.emphasis {
   color: @light_color;
   background: @dark_color;
 
   a {
       font-weight: bold;
   }
}

Αντί για...

div.emphasis { 
	color: @light_color;
	background: @dark_color; 
} 
 
div.emphasis a{ 
	font-weight: bold; 
}

Πείστηκα! Τί χρειάζομαι;

Έναν text editor για να σώνετε τα αρχεία σας σε .less και να χρησιμοποιείτε στο project σας ruby, php... ή javascript!

Ruby: http://lesscss.org/

PHP: http://leafo.net/lessphp/

Javascript: http://github.com/cloudhead/less.js

Και ένα σύντομο tutorial για τη less.js εδώ: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-you-need-to-check-out-less-js/

Εν ολίγοις, τα .less αρχεία, θα πρέπει τελικά να μεταφραστούν σε καθαρό css κώδικα με μία από τις παραπάνω γλώσσες, είτε "on the fly" είτε "offline" πριν ανεβάσετε τα τελικά .css αρχεία στον server σας. Για όσους ανησυχούν για το overhead που μπορεί να υπάρχει στον σέρβερ "μεταφράζοντας" κάθε φορά τα .less αρχεία όταν φορτώνει μία σελίδα, υπάρχουν λύσεις. Για παράδειγμα αν χρησιμοποιείτε PHP μπορείτε με αυτό το scriptaki να δημιουργείτε χειροκίνητα τα .css αρχεία πριν τα ανεβάσετε. Απλά βάλτε το στο φάκελο με τα .less αρχεία μαζί με το less.inc.php και καλέστε το από το localhost.

Για ό,τι άλλο χρειαστείτε, εδώ είμαστε...