Εισαγωγή στην γλώσσα Less

Η στατική γλώσσα css περνάει στην δυναμική της εποχή με την νέα dynamic stylesheet language, την «γλώσσα» less. Ουσιαστικά η γλώσσα less δεν διαφέρει πολύ από την css μιας και ο τρόπος γραφής της css δεν αλλάζει καθόλου αλλά προστίθενται νέες δυνατότητες για πιο γρήγορο, εύκολο και πάνω απ όλα λιγότερο προγραμματισμό.

Βασική της λογική είναι ότι με λιγότερες γραμμές κώδικα μπορούμε να επαναλάβουμε ίδια εμφανισιακά χαρακτηριστικά σε κλάσεις ή αντικείμενα του site μας. Αυτό επιτυγχάνετε με το να «κληρονομεί» χαρακτηριστικά μια κλάση από μια άλλη, να εισάγουμε μεταβλητές (π.χ. για μεγέθη ή χρώματα) που χρησιμοποιούμε συχνά ή θέλουμε να αλλάζουμε μαζικά. Τον κώδικα σε less τον γράφουμε σε αρχεία με κατάληξη .less τα οποία θα πρέπει να περάσουμε από compiler ο οποίος και θα μας παράγει το επιθυμητό .css αρχείο.

Παρακάτω παραθέτουμε κάποια παραδείγματα για το πώς μπορούμε να γλιτώσουμε χρόνο και γραμμές κώδικα με το less:

Χρησιμοποιώντας μεταβλητές:

Χρησιμοποιώντας συναρτήσεις:

Χρησιμοποιώντας εμφωλευμένη δομή

Less και Pegasus

Στα templates που χρησιμοποιούμε less, για να γίνουν εικαστικές αλλαγές υπάρχουν 2 προϋποθέσεις:

1) να έχουμε κατεβάσει το αρχείο less_xxx.zip (όπου xxx ο κωδικός του template που θέλουμε να γίνουν οι εικαστικές αλλαγές). Το αρχείο αυτό μπορούμε να το βρούμε στο www.hermes-templates.gr ως κουμπί για download(Download .Less) στην σελίδα του εκάστοτε template όπως στην παρακάτω εικόνα:

2) να έχουμε ένα compiler για less. Προτείνεται ο editor και compiler Crunch τον οποίον μπορούμε να κατεβάσουμε δωρεάν από εδώ: http://crunchapp.net/ πατώντας τον αντίστοιχο σύνδεσμο για download που θα βρούμε στο site όπως φαίνεται στην εικόνα:

Οι παρακάτω οδηγίες είναι βασισμένες στον Crunch.

Στην συνέχεια εξάγουμε το zip σε έναν επιθυμητό φάκελο και ανοίγουμε το crunch.

Στην αριστερή οθόνη του Crunch θα «κλικάρουμε» “Open Website” και από εκεί επιλέγουμε τον φάκελο που εξάγαμε προηγουμένως ή θα «τραβήξουμε» τον φάκελο μας.

Αυτός ο φάκελος περιέχει όλα τα αρχεία .less τα οποία θα πρέπει πλέον να μας εμφανίζονται ως λίστα στα αριστερά κάτω από το “Open Website”, όπως στην παρακάτω εικόνα:

Βρίσκουμε το αρχείο με το όνομα του template μας και το ανοίγουμε.

Από εκεί θα δούμε στην αρχή του αρχείου κάποιες εντολές που θα αρχίζουν με @import οι οποίες εισάγουν σε εκείνο το σημείο άλλα less αρχεία, και καλό θα ήταν να μην μεταβάλουμε αυτές τις εντολές. Στο less αρχείο ενός template εισάγουμε τα απαραίτητα less αρχεία του κάθε module που χρησιμοποιείται από το template καθώς και αρχείο less με μεταβλητές.

Όλα αυτά τα αρχεία πρέπει να βρίσκονται στον ίδιο φάκελο και είναι της μορφής “pg_xxxx.less”. Αυτά τα αρχεία περιέχουν τις βασικές μορφοποιήσεις που αν κριθεί αναγκαίο μπορούμε να μπούμε και να αλλάξουμε. Ένα από αυτά τα αρχεία είναι και το pg_variables.less. Εκεί θα βρούμε τις μεταβλητές που χρησιμοποιούνται σε όλα τα module και στο template. Αυτές οι μεταβλητές της μορφής @xxxx όπου xxxx κάποιο όνομα (πχ @t009: #E64F4F; η οποία μας υποδηλώνει κάποιο χρώμα).

Αν θέλουμε να προσθέσουμε κάποια νέα μεταβλητή στο template θα την εισάγουμε σε αυτό το αρχείο. Βρίσκουμε το αρχείο pg_variables.less από αριστερά:

και το ανοίγουμε με διπλό κλικ:

Για να ισχύσουν οι αλλαγές μας αρκεί μία αποθήκευση του αρχείου πατώντας το εικονίδιο ή με control+S ή από την διαδρομή File->Save.

Πίσω στο less αρχείο του template μπορούμε να δούμε όλες τις κλάσεις κάτω από τις εντολές @import.

Για να κάνουμε εισαγωγή οποιουδήποτε εικαστικού χαρακτηριστικού αρκεί να βρούμε την κλάση που θέλουμε και να προσθέσουμε τα css χαρακτηριστικά. Αν δεν υπάρχει σε αυτό το less αρχείο μπορούμε να ανοίξουμε οποιοδήποτε άλλο αρχείο της μορφής pg_xxx.less για να την βρούμε χρησιμοποιώντας την αναζήτηση που έχει το Crunch πατώντας control+F ή να δημιουργήσουμε μια νέα κλάση και να εισάγουμε τα χαρακτηριστικά που θέλουμε.

Εάν η κλάση που θα δημιουργήσουμε προϋπάρχει σε άλλο αρχείο .less τότε θα ισχύσει η τελευταία που εισάγεται. Δηλαδή αν προσθέσουμε μια κλάση που υπάρχει με άλλα χαρακτηριστικά στο template_xxx.less κάτω από τις εντολές @import τότε θα ισχύσει η δικιά μας. Αν όμως προσθέσουμε σε άλλο αρχείο less και η προϋπάρχουσα βρίσκεται στο template_xxx.less τότε η κλάση που θα έχουμε προσθέσει δεν θα εξαχθεί όπως θα θέλαμε.

Αφού τελειώσουμε την επεξεργασία όλων των αρχείων, για να εξαχθεί το αποτέλεσμα πρέπει να σώσουμε όλα τα αρχεία (control+S ή από την διαδρομή File->Save ή από το εικονίδιο ) και στην συνέχεια να πάμε στο template_xxx.less και να πατήσουμε το πάνω δεξιά κουμπί ή control+ENTER ή από την διαδρομή File -> Crunch!. Έτσι ξεκινάει το compile. Αρχικά θα μας ζητήσει να του πούμε που να γίνει η εξαγωγή του αρχείου css και ποιο θα είναι το όνομά του.

Επιλέγουμε έναν επιθυμητό φάκελο και το όνομα θα πρέπει να είναι ίδιο με αυτό του αρχείου css που θέλουμε να αντικαταστήσουμε από το site (συνήθως το όνομα είναι ίδιο με αυτό του αρχείου .less δηλαδή  template_xxx.css όπου xxx ο αριθμός του template.

Όπως βλέπουμε και στην εικόνα του παραδείγματος το όνομα του αρχείου μας είναι Template_009.css όπως και το όνομα του αντίστοιχου css στον server αλλά και του αρχείου less: Template_009.less). Τέλος αρκεί να αντικαταστήσουμε το υπάρχον στον server css αρχείο, με το παραχθέν μέσω ftp.