Σύνδεση με Google+

ή με

ΤΕΣΑΕ ΑΤΕ
  • H Επιχείρηση
    • Τεχνολογία
    • Pegasus Phaethon
    • Tα Νέα της ΤΕΣΑΕ
      • Τα νέα μας
      • Ηλεκτρονικά Βιβλία ΑΑΔΕ myDATA
      • Ισολογισμοί
  • Oι Συνεργάτες
  • Tοπικά Λογισμικά
    • Λογισμικά (Pegasus ERP)
      • Εμπορικές Επιχειρήσεις
      • Πρατήρια Υγρών Καυσίμων
      • Χώροι Εστίασης (Εστιατόρια Καφετέριες , Bar , Delivery)
      • Στεγνοκαθαριστήρια, Ταπητοκαθαριστήρια
      • Συνεργεία, Φανοποιεία, Ανταλλακτικά
      • Ελαιοτριβεία
      • Parking, Λιπαντήρια Αυτοκινήτων
      • Μεταφορικές Εταιρίες
      • Courier , Ταχυμεταφορες
      • Βιβλιοπωλεία - Χαρτικά
      • Γεωργικές επιχειρήσεις
      • Κρεοπωλεία
    • Pegasus ERP
    • Video Παρουσιάσεις
    • Πρότυπες Μελέτες ή Εφαρμογές
    • Ιστορικό Αλλαγών Pegasus ERP
    • Module PDA Client
    • Module Γέφυρες Λογιστικής
    • Module Phone
  • Διαδικτυακά Λογισμικά
    • Λογισμικά (Pegasus Web App)
      • Pegasus Web App ERP
      • Pegasus Web App Freelancer
      • Pegasus e-Hotel
      • Pegasus e-Courier
      • Pegasus e-Transport
      • Pegasus Gym
    • Pegasus Web app
    • Video Παρουσιάσεις
    • Πρότυπες Μελέτες ή Εφαρμογές
    • Ιστορικό αλλαγών Pegasus Web App
    • WEB App REST API
Pegasus Hermes και less dynamic stylesheet language

Less logo

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

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


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


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


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

// LESS

@color: #4D926F;

#header {

color: @color;

}

h2 {

color: @color;

}

/* Compiled CSS */

 

#header {

color: #4D926F;

}

h2 {

color: #4D926F;

}


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

// LESS

.rounded-corners (@radius: 5px) {

-webkit-border-radius: @radius;

-moz-border-radius: @radius;

-ms-border-radius: @radius;

-o-border-radius: @radius;

border-radius: @radius;

}

 

#header {

.rounded-corners;

}

#footer {

.rounded-corners(10px);

}

/* Compiled CSS */

 

#header {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-ms-border-radius: 5px;

-o-border-radius: 5px;

border-radius: 5px;

}

#footer {

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

-ms-border-radius: 10px;

-o-border-radius: 10px;

border-radius: 10px;

}


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

// LESS

 

#header {

h1 {

font-size: 26px;

font-weight: bold;

}

p { font-size: 12px;

a { text-decoration: none;

&:hover { border-width: 1px }

}

}

}

 

/* Compiled CSS */

 

#header h1 {

font-size: 26px;

font-weight: bold;

}

#header p {

font-size: 12px;

}

#header p a {

text-decoration: none;

}

#header p a:hover {

border-width: 1px;

}


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.

Ημερομηνία  12/08/2013
Σχετικά Aρθρα
How to Skin, Δημιουργία νέου CSS
Pegasus Hermes και Bootstrap
Αυτόματο Compile των Less αρχείων του Template
Aξιολόγηση ΠεριεχομένουΠροσθήκη Αξιολόγησης
Σχόλια Χρηστών (0)Προσθήκη Σχολιασμού
  • Μεσογείων 274, 3ος όροφος, 15562, Eλλάδα
  • +30 210-7489589
  • Επικοινωνία
  • Επικοινωνία
  • Downloads
  • Sitemap
  • Όροι Χρήσης
Εξελίξεις Λογισμικών
Pegasus ERP Updates: 2820
Pegasus Web App Updates: 10834

Τεχνικά Θέματα εφαρμογών Pegasus: Μεταφορά εφαρμογής Champion (τοπικής ή Web App) σε Pegasus Gym Web App
Μαρ23,2023
Pegasus Web App και Τεχνικά Θέματα: Παραμετροποίηση και Λειτουργία του module Phone
Μαρ14,2023
Pegasus Gym: Αυτόματες Ενημερώσεις
Φεβ14,2023
Pegasus Web App και Τεχνικά Θέματα: Μεταφορά Τοπικής Εφαρμογής σε Web App
Φεβ13,2023
Pegasus Web App και Τεχνικά Θέματα: Μεταφορά και συγχώνευση δεδομένων από δύο ή περισσότερες τοπικές εφαρμογές σε Web App
Φεβ13,2023
Δείτε όλες τις Πρότυπες Μελέτες >>
ΑΜΕΑΑΜΕΑ
-A+
© Copyright TESAE SA - Γ.Ε.ΜΗ : 2120301000
  Powered by Pegasus Technology   
ΕΣΠΑ 2014-2020ΕΣΠΑ 2014-2020