Σύνδεση με Facebook Σύνδεση με Google+ Σύνδεση με Linkedin

ή με

ΤΕΣΑΕ ΑΤΕ
  • H Επιχείρηση
    • το Profil μας
    • Ιστορικό σημείωμα
    • ΤιμοΛογική
    • Τεχνολογία
    • 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 Web App CRM
        • Pegasus e-Commerce
        • Pegasus e-Hotel
        • Pegasus e-Service
        • Pegasus e-Courier
        • Pegasus e-Champion
        • Pegasus e-Transport
        • Pegasus e-Delivery
      • Pegasus Web app
      • Video Παρουσιάσεις
      • Πρότυπες Μελέτες ή Εφαρμογές
      • Ιστορικό αλλαγών Pegasus Web App
      • Hermes Templates
      • WEB App REST API
    • Διαδικτυακές Φιλοξενίες
      • Διαδικτυακών Ονομάτων
      • Διαδικτυακών Χώρων
        • Τυποποιημένα Πακέτα Φιλοξενίας
        • ISP
    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
    • Επικοινωνία
    • Επικοινωνία
    • Πείτε μας το Project σας
    • Ευκαιρίες Καριέρας
    • Downloads
    • Sitemap
    • Όροι Χρήσης
    Εξελίξεις Λογισμικών
    Pegasus ERP Updates: 2490
    Pegasus Web App Updates: 7071

    Παραμετροποίηση του module myDATA μέσα από το Pegasus Web App ERP
    Νοε02,2020
    Αποστολή/Παραλαβή παραστατικών μέσω του module myDATA
    Οκτ08,2020
    Εγκατάσταση & Βασική Παραμετροποίηση του module myDATA
    Σεπτ29,2020
    Εγχειρίδιο Χρήσης myDATA & Εγγραφή στο myDATA REST API
    Σεπτ29,2020
    Πρώτα βήματα παραμετροποίησης Pegasus Web App ERP Start Up
    Σεπτ17,2020
    Δείτε όλες τις Πρότυπες Μελέτες >>
    ΤΕΣΑΕ ΑΤΕ
    On-line Users
    Μέλη: 0
    Επισκέπτες: 10
    © Copyright TESAE SA
      Powered by Pegasus Technology