Preprocessor CSS: Επανεξέταση, επιλογή, εφαρμογή. Εναλλακτικές λύσεις για θωράκιση κειμένου

CSS Preprocessor (Preprocessor CSS)- Πρόκειται για ένα πρόσθετο πάνω από το CSS, το οποίο παρέχει νέα χαρακτηριστικά και δυνατότητες για το CSS χρησιμοποιώντας προστιθέμενες συντακτικές δομές.

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

Οι προεπεξεργαστές CSS κάνουν τον κώδικα γραμμένο χρησιμοποιώντας τη γλώσσα προεπεξεργασίας, καθαρή και έγκυρη.

Με τη βοήθεια προεπεξεργαστών, ο γραπτός σας κώδικας γίνεται: ευανάγνωστο για ανθρώπους, δομημένα και λογικά, παραγωγικά.

Μεταξύ των πιο δημοφιλών προεπεξεργαστών που διαθέτουνΛιγότερο, Sass (SCSS), Stylus. Επίσης, περισσότερα ή λιγότερο αξιοσημείωτα εργαλεία σε αυτόν τον τομέα είναι τα φύλλα κλεισίματος, το CSS Crush, είναι λιγότερο δημοφιλές αυτή τη στιγμή, αλλά όλα τα ίδια χρησιμοποιούν ορισμένους προγραμματιστές. Ας προσπαθήσουμε να κατανοήσουμε τις δυνατότητες και τα χαρακτηριστικά του λιγότερου, Sass (SCSS), Stylus.

Η τυποποιημένη χρήση του CSS είναι αρκετά περίπλοκη. Η σύνταξη χωρίς φωλιά είναι άμεσα περίπλοκη για οπτική αντίληψη. Η απουσία κανονικών μεταβλητών και λειτουργιών καθιστά τον κώδικα CSS στενά και με πολλές περιττές και όχι απαραίτητες λεπτομέρειες.

Διαθέσιμη τεκμηρίωση - τώρα ο καθένας μπορεί να κυριαρχήσει τον επιλεγμένο προεπεξεργαστή σε σύντομο χρονικό διάστημα, χωρίς υπερβολικό κόστος. Το δεύτερο πλεονέκτημα είναι η απλότητα της χρήσης των προεπεξεργαστών. Για να το κάνετε αυτό, πρέπει μόνο να εγκαταστήσετε ένα ειδικό πρόγραμμα που θα ακολουθήσει τα αρχεία που προορίζονται για τον προεπεξεργαστή και όταν αλλάζουν, θα καταρτίσει τα περιεχόμενα αυτών των αρχείων σε έναν καθαρό κωδικό CSS.

Για πιο προχωρημένους χρήστες υπάρχουν ειδικοί συλλέκτες έργων.

Πιο λιγο - Ο πιο δημοφιλής και συχνά χρησιμοποιούμενος προεπεξεργαστής. Σχεδιασμένο με βάση το JavaScript, περιλαμβάνει τις βασικές δυνατότητες των προεπεξεργαστών, αλλά δεν παρέχει υπό όρους δομές και κύκλους στη συνήθη κατανόηση. Λόγω της απλότητας και της συνοπτικής της, υπάρχει μια τυποποιημένη σύνταξη για το CSS και τη δυνατότητα επέκτασης της λειτουργικής λειτουργίας λόγω της λειτουργίας των plugins.

Λιγότερο παρέχει δυναμικές δυνατότητες CSS: μεταβλητές, ανάμιξη (mixins), λειτουργίες και λειτουργίες. Η τεκμηρίωση είναι πολύ φιλική για τον προγραμματιστή και η σύνταξη είναι πολύ παρόμοια με τα καθαρά CSS. Τα δημοφιλή πλαίσια, όπως το Twitter Bootstrap, χρησιμοποιούν ενεργά δυναμικές λιγότερες λειτουργίες. Ωστόσο, λιγότερο καθιστά δυνατή την επαναχρησιμοποίηση των τάξεων ως ανάμειξη οπουδήποτε σε φύλλο στυλ.

Ένα άλλο ισχυρό και δημοφιλές προεπεξεργαστή - Sass.. Γύρω από αυτό το εργαλείο σχημάτισε μια τεράστια κοινότητα προγραμματιστών. Ιδρύεται το 2007 ως μονάδα για το HAML και γραμμένο στο Ruby (παρέχει λιμένα στο C ++). Έχει ένα ευρύ φάσμα λειτουργιών, σε σύγκριση με λιγότερο. Ο προεπεξεργαστής επεκτείνει τη λειτουργικότητά του λόγω της βιβλιοθήκης πυξίδας, η οποία καθιστά δυνατή την υπερβεί το πλαίσιο του CSS και λειτουργεί πιο σε μεγάλο βαθμό. Παρέχει δύο τύπους σύνταξης: SASS (συντακτικά φοβερό φύλλο στυλ), πιο απλή σύνταξη CSS, η οποία βασίζεται στο ρελαντί. Θεωρείται πιο απρόσκοπτη έκδοση. Το SCSS (Sassy CSS) βασίζεται στο πρότυπο για τη σύνταξη CSS.

- Αρκετά νεαρή, αλλά ήδη πολλά υποσχόμενα css preprocessor. Σχεδιασμένο το 2010. Πολλοί θεωρούν έναν άνετο και επεκτατικό προεπισκόπιο και πιο ευέλικτο από τη Sass. Σχεδιασμένο για JavaScript. Υπάρχει υποστήριξη για πολλές επιλογές σύνταξης από τέτοια CSS για απλούστερη και εύκολη.

Χρήσιμα εργαλεία για τον προγραμματιστή:

• Codekit.: Κάνει τη σύνταξη των αρχείων Sass, Less και Stylus και, στη συνέχεια, υπερφορτώνει αυτόματα το πρόγραμμα περιήγησης ιστού μετά την ενημέρωση αρχείων. Συμπεριλαμβανομένης της βελτιστοποίησης των εικόνων του έργου, προκειμένου να αυξηθεί η απόδοση του συστήματος. Η τεχνολογία καταβάλλεται, αλλά υπάρχει επίσης μια δοκιμαστική έκδοση για εργασία.
• Livereload.: Κάνει τον έλεγχο των αλλαγών στα αρχεία και στη συνέχεια να τα επεξεργαστεί και να επανεκκινήσει αυτόματα το πρόγραμμα περιήγησης ιστού. Η έκδοση λειτουργεί για Mac και Windows.
• Ανιχνευτής.: Συνεργάζεται με sass και πυξίδα στο περιβάλλον ρουμπίνι. Λειτουργεί για Mac και Windows.
• Απλουστεύει.: Κανονικός και απλός λιγότερο CSS Compiler για Mac και Windows.

Προκειμένου να επιλέξετε έναν προεπεξεργαστή θεραπείας για το έργο του, δοκιμάστε να χρησιμοποιήσετε πολλά. Και ανάλογα με τα αποτελέσματα της δοκιμής, θα είστε πολύ πιο εύκολο να κάνετε την επιλογή σας. Και επίσης μην ξεχνάτε ότι όταν καταφέρετε τον προεπεξεργαστή, δεν μαθαίνετε μια νέα γλώσσα, αλλά μάθετε μόνο μια νέα σύνταξη και δυνατότητες. Εταιρία ™ Σας ευχόμαστε μια ευχάριστη δουλειά στον κόσμο CSS!

2545 φορές 1 Σήμερα προβολή μόλις (α)

Απολύτως όλα τα έμπειρα προτίτες χρησιμοποιούν προεπεξεργαστές. Χωρίς εξαιρέσεις. Εάν θέλετε να πετύχετε σε αυτή τη δραστηριότητα, μην ξεχάσετε τα προγράμματα αυτά. Με την πρώτη ματιά, μπορούν να καλέσουν τον νεοεισερχόμενο ήσυχο τρόμο - είναι ήδη πολύ παρόμοιο με τον προγραμματισμό! Στην πραγματικότητα, μπορείτε να αντιμετωπίσετε όλες τις δυνατότητες των προεπεξεργαστών CSS σχετικά με την ημέρα και αν προσπαθήσετε, στη συνέχεια σε μερικές ώρες. Στο μέλλον, θα απλοποιήσουν σημαντικά τη ζωή.

Πώς εμφανίστηκαν οι προεπεξεργαστές CSS

Για να κατανοήσουμε καλύτερα τις ιδιαιτερότητες αυτής της τεχνολογίας, θα βυθίζουμε σύντομα τον εαυτό σας στην ιστορία της ανάπτυξης της οπτικής παρουσίασης των ιστοσελίδων.

Όταν ξεκίνησε μόνο η μαζική χρήση του Διαδικτύου, δεν υπήρχαν πίνακες στυλ. Ο σχεδιασμός εγγράφων εξαρτάται αποκλειστικά από τα προγράμματα περιήγησης. Κάθε ένας από αυτούς είχε τα δικά τους στυλ που χρησιμοποιήθηκαν για να επεξεργαστούν ορισμένες ετικέτες. Συνεπώς, οι σελίδες φαίνονταν διαφορετικά ανάλογα με το πρόγραμμα περιήγησης που τους ανοίξατε. Το αποτέλεσμα είναι το χάος, η σύγχυση, τα προβλήματα για τους προγραμματιστές.

Το 1994, ο νορβηγός επιστήμονας Hokon Lee ανέπτυξε έναν πίνακα στυλ που θα μπορούσε να χρησιμοποιηθεί για να σχεδιάσει την εμφάνιση της σελίδας ξεχωριστά από το έγγραφο HTML. Η ιδέα που αντιμετωπίζει εκπροσώπους της κοινοπραξίας του W3C, η οποία αμέσως άρχισε να βελτιώνεται. Λίγα χρόνια αργότερα, η πρώτη έκδοση της προδιαγραφής CSS δημοσιεύθηκε. Στη συνέχεια βελτιώθηκε συνεχώς, εκλεπτυσμένη ... αλλά η έννοια παρέμεινε όλα τα ίδια: ορισμένες ιδιότητες έχουν οριστεί σε κάθε στυλ.

Χρησιμοποιώντας τα τραπέζια CSS προκάλεσε πάντα ορισμένα προβλήματα. Για παράδειγμα, οι αμερικανοί είχαν συχνά δυσκολία ταξινόμησης και ομαδοποίησης ιδιοτήτων και όχι όλα είναι τόσο αδιαμφισβήτητα.

Και τώρα τα δύο χιλιοστά έρχονται. Η σήμανση όλο και πιο συχνά άρχισε να συμμετέχει σε επαγγελματίες προγραμματιστές περίπλοκου, για τους οποίους η ευέλικτη και δυναμική δουλειά με στυλ ήταν σημαντική. Το CSS που υπάρχει εκείνη την εποχή ζήτησε την τοποθέτηση προθέσεων και την παρακολούθηση της υποστήριξης για τις νέες δυνατότητες του προγράμματος περιήγησης. Στη συνέχεια, ο Javascript και ο Ruby ειδικοί ανέλαβαν το έργο δημιουργώντας προεπεξεργαστές - πρόσθετα για το CSS, προσθέτοντας νέες ευκαιρίες σε αυτό.

CSS για αρχάριους: Χαρακτηριστικά των προεπεξεργαστών

Εκτελούν διάφορες λειτουργίες:

• Ενοποίηση προθέματα προγράμματος περιήγησης και Khaki.

• Απλοποιήστε τη σύνταξη.

• καθιστούν δυνατή την εργασία με ένθετα επιλογείς χωρίς σφάλματα.

• Βελτιώστε τη λογική της τυποποίησης.

Εν ολίγοις: ο προεπεξεργαστής προσθέτει λογική προγραμματισμού σε CSS. Τώρα ο στυλιζαρισμένος δεν πραγματοποιείται από τη συνήθη ψιλοκομμένη μορφές και με τη βοήθεια αρκετών απλών τεχνικών και προσεγγίσεων: μεταβλητές, λειτουργίες, μίγματα, κύκλοι, συνθήκες. Επιπλέον, ήταν δυνατό να χρησιμοποιηθούν τα μαθηματικά.

Βλέποντας τη δημοτικότητα τέτοιων πρόσθετων, το W3C άρχισε να προσθέτει σταδιακά τις δυνατότητες αυτών στον κώδικα CSS. Για παράδειγμα, η λειτουργία Calc () εμφανίστηκε στην προδιαγραφή, η οποία υποστηρίζεται από πολλά προγράμματα περιήγησης. Αναμένεται ότι σύντομα θα είναι δυνατή η ρύθμιση μεταβλητών και δημιουργία μιγμάτων. Ωστόσο, αυτό θα συμβεί στο μακρινό μέλλον, και τα προεπεξεργαστήρια είναι ήδη εδώ και ήδη λειτουργούν καλά.

Δημοφιλείς προεπεξεργαστές CSS. Sass.

Σχεδιασμένο το 2007. Ήταν αρχικά ένα συστατικό Haml - πρότυπο HTML. Οι νέες δυνατότητες διαχείρισης στοιχείων CSS αντιπροσώπευαν τους προγραμματιστές σε ρουμπίνι στις ράγες, οι οποίες άρχισαν να το διανέμουν παντού. Η SASS εμφανίστηκε ένας τεράστιος αριθμός χαρακτηριστικών που περιλαμβάνονται πλέον σε οποιονδήποτε προεπεξεργαστή: μεταβλητές, ενσωματωμένους επιλογείς, μίγματα (τότε, ωστόσο, ήταν αδύνατο να προστεθούν επιχειρήματα).

Μεταβλητές sass

Οι μεταβλητές δηλώνονται χρησιμοποιώντας το σημάδι $. Μπορούν να εξοικονομήσουν ιδιότητες και τα κιτ τα κιτ, για παράδειγμα: "$ bordersolid: 1px στερεό κόκκινο". Σε αυτό το παράδειγμα, δήλωσα μια μεταβλητή που ονομάζεται Bordersolid και έσωσε το 1px στερεό κόκκινο σε αυτό. Τώρα, αν στο CSS θα χρειαστεί να δημιουργήσουμε ένα κόκκινο πλάτος των συνόρων στο 1px, απλά υποδεικνύει αυτή τη μεταβλητή μετά το όνομα της ιδιοκτησίας. Μετά την ανακοίνωση, οι μεταβλητές δεν μπορούν να αλλάξουν. Διαθέσιμα πολλαπλά ενσωματωμένα χαρακτηριστικά. Για παράδειγμα, θα δηλώσουμε τη μεταβλητή redcolor $ με την τιμή # ff5050. Τώρα στον κώδικα CSS, στις ιδιότητες κάποιου στοιχείου, το χρησιμοποιούμε για να καθορίσουμε το χρώμα της γραμματοσειράς: P (χρώμα: $ RELECOLOR;). Θέλετε να πειραματιστείτε με το χρώμα; Χρησιμοποιήστε λειτουργίες σκουραίσεων ή φωτισμού. Αυτό γίνεται όπως αυτό: P (χρώμα: Darken ($ RELECOLOR, 20%);). Ως αποτέλεσμα, το χρώμα του RELECOLOR θα είναι 20% ελαφρύτερο.

Φωλιά

Προηγουμένως, ήταν απαραίτητο να χρησιμοποιηθούν μακρά και δυσάρεστα σχέδια για να ορίσετε τη φωλιά. Φανταστείτε ότι έχουμε ένα DIV, στο οποίο P είναι ψέματα, και σε αυτό, με τη σειρά του, βρίσκεται το άνοιγμα. Για το Div, πρέπει να ορίσουμε το κόκκινο χρώμα γραμματοσειράς, για p - κίτρινο, για το άνοιγμα - ροζ. Στο συνηθισμένο CSS θα γίνει ως εξής:

Με τη βοήθεια ενός προεπεξεργαστή CSS, όλα γίνονται ευκολότερα και πιο συμπαγή:

Τα στοιχεία κυριολεκτικά "επενδύονται" μεταξύ τους.

Οδηγίες προεπεξεργασίας

Χρησιμοποιώντας την οδηγία @IMPort, μπορείτε να εισαγάγετε αρχεία. Για παράδειγμα, έχουμε ένα αρχείο fonts.sass, το οποίο δηλώνει στυλ για γραμματοσειρές. Το συνδέουμε με το κύριο στυλ αρχείου. Γραμματοσειρές @ import '. Ετοιμος! Αντί για ένα μεγάλο αρχείο με στυλ, έχουμε μερικά που μπορούν να χρησιμοποιηθούν για γρήγορη και εύκολη πρόσβαση στις επιθυμητές ιδιότητες.

Μίγματα

Μια από τις πιο ενδιαφέρουσες ιδέες. Επιτρέπει μια γραμμή να ρυθμίσει ένα ολόκληρο σύνολο ιδιοτήτων. Εργασία ως εξής:

@mixin laragfont (

Γραμματοσειρά: «Times New Roman».

Μέγεθος γραμματοσειράς: 64px;

Ύψος γραμμής: 80px;

Γραμματοσειρά γραμματοσειράς: Bold.

Για να εφαρμόσετε την ανάμειξη στο στοιχείο στη σελίδα, χρησιμοποιήστε την οδηγία @include. Για παράδειγμα, θέλουμε να το εφαρμόσουμε στην κεφαλίδα H1. Αποδεικνύεται το ακόλουθο σχέδιο: H1 (@include: Largefont;)

Όλες οι ιδιότητες από την ανάμιξη θα αντιστοιχιστούν στο στοιχείο H1.

Προεπεξεργαστής λιγότερο

Η σύνταξη Sass υπενθυμίζει για τον προγραμματισμό. Αν ψάχνετε για μια επιλογή που ταιριάζει στις μελέτες CSS για αρχάριους, δώστε προσοχή στα λιγότερα. Δημιουργήθηκε το 2009. Το κύριο χαρακτηριστικό είναι η υποστήριξη των εγγενών τόσο άγνωστου με τον προγραμματισμό στα prestovel, θα είναι ευκολότερο να το μάθει.

Οι μεταβλητές δηλώνονται χρησιμοποιώντας το σύμβολο @. Για παράδειγμα: @fontsize: 14px;. Η φωλιά εργάζεται στις ίδιες αρχές όπως στη SASS. Οι μίξυλοι δηλώνονται ως εξής: .γουστικό () (FONT-Face: «Times New Roman». Μέγεθος γραμματοσειράς: 64px; Ύψος γραμμής: 80px; Γραμματοσειρά: Bold;). Για να συνδεθείτε, δεν χρειάζεται να χρησιμοποιήσετε τις οδηγίες προεπεξεργασίας - απλά προσθέστε πρόσφατα κατευθυνόμενη ανάμιξη στις ιδιότητες του επιλεγμένου στοιχείου. Για παράδειγμα: H1 (. Glargefont;).

Κονδύλι.

Ένας άλλος προεπεξεργαστής. Δημιουργήθηκε το 2011 με τον ίδιο συγγραφέα που έδωσα Jade, Express και άλλα χρήσιμα προϊόντα.

Οι μεταβλητές μπορούν να δηλωθούν με δύο τρόπους - ρητά ή σιωπηρά. Για παράδειγμα: FONT \u003d 'Times New Roman'. - Αυτή είναι μια σιωπηρή επιλογή. Αλλά $ FONT \u003d 'Times New Roman' είναι σαφής. Οι μίγματα δηλώνονται και συνδέονται σιωπηρά. Σύνταξη: Redcolor () χρώμα κόκκινο. Τώρα μπορούμε να το προσθέσουμε ένα στοιχείο, για παράδειγμα: H1 REDCOLOR ();.

Με την πρώτη ματιά, η γραφίδα μπορεί να φαίνεται ακατανόητη. Όπου "συγγενείς" αγκύλες και τα ερωτηματικά; Αλλά βρίσκεται μόνο σε αυτό να βυθιστεί, πώς όλα γίνονται πολύ πιο σαφέστερα. Ωστόσο, θυμηθείτε ότι η μακροπρόθεσμη ανάπτυξη με αυτόν τον προεπεξεργαστή μπορεί να "μάθει" χρησιμοποιείτε την κλασική σύνταξη CSS. Αυτό προκαλεί μερικές φορές προβλήματα εάν είναι απαραίτητο να συνεργαστεί με "καθαρά" στυλ.

Τι προεπεξεργαστής να επιλέξει;

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

• Εάν είστε προγραμματιστής και θέλετε να εργαστείτε με στυλ με τον κώδικα, να χρησιμοποιήσετε τη Sass.
• Εάν είστε προβολή και θέλετε να εργαστείτε με στυλ όπως με μια τακτική διάταξη, δώστε προσοχή στο λιγότερο.
• Αν σας αρέσει ο μινιμαλισμός, χρησιμοποιήστε τη γραφίδα.

Για όλες τις επιλογές, είναι διαθέσιμες ένας τεράστιος αριθμός ενδιαφέρουσες βιβλιοθήκες που μπορούν εύκολα να απλουστεύσουν την ανάπτυξη. Οι χρήστες Sass ενθαρρύνονται να δώσουν προσοχή στην πυξίδα - ένα ισχυρό εργαλείο με πολλαπλά ολοκληρωμένα χαρακτηριστικά. Για παράδειγμα, μετά την εγκατάσταση, δεν θα πρέπει ποτέ να ανησυχείτε για τα προθέματα προμηθευτών. Απλοποιεί την εργασία με τα πλέγματα. Υπάρχουν βοηθητικά προγράμματα για την εργασία με λουλούδια, sprites. Ορισμένοι ήδη κηρικοί μίγματα είναι διαθέσιμοι. Στείλτε αυτό στο μέσο μερικές ημέρες - εξοικονομήστε έτσι πολλές προσπάθειες και χρόνο στο μέλλον.

Σύγχρονη CSS - Ισχύς και σε συνδυασμό με τους προεπεξεργαστές - στη γενική μηχανή μάχης για το σχεδιασμό περιεχομένου στις σελίδες. Το άρθρο παρέχει ένα εκτεταμένο εγχειρίδιο SASS / SCSS με παραδείγματα. Μετά την ανάγνωση, μάθετε πώς να χρησιμοποιείτε μίγματα, μεταβλητές και οδηγίες για ακόμη μεγαλύτερες μορφές.

Σημείωση Ολόκληρος ο κωδικός SASS / SCSS καταρτίζεται σε CSS έτσι ώστε τα προγράμματα περιήγησης να μπορούν να το κατανοήσουν και να εμφανιστούν σωστά. Επί του παρόντος, τα προγράμματα περιήγησης δεν υποστηρίζουν τις εργασίες SASS / SASS / SCS ή με οποιοδήποτε άλλο Preprocessor CSS απευθείας, η πρότυπη προδιαγραφή CSS δεν παρέχει παρόμοια λειτουργικότητα.

Γιατί να χρησιμοποιήσετε sass / scss αντί για CSS;

1. Φωλιά - Το SCSS σας επιτρέπει να επενδύσετε τους κανόνες του CSS μεταξύ τους. Οι ένθετο κανόνες ισχύουν μόνο για στοιχεία που αντιστοιχούν σε εξωτερικούς επιλογείς (και αν μιλάμε για sass, τότε όλα είναι όμορφα και διαισθητικά κατανοητά χωρίς αγκύλες).
2. Μεταβλητές - Το τυποποιημένο CSS διαθέτει επίσης την έννοια των μεταβλητών, αλλά σε sass μπορείτε να εργαστείτε λίγο διαφορετικά. Για παράδειγμα, επαναλάβετε τα μέσω της οδηγίας @for. Ή να δημιουργήσετε δυναμικά ιδιότητες. Περισσότερες λεπτομέρειες μπορείτε να εξερευνήσετε τη ρωσόφωνη τοποθεσία του έργου.
3. Βελτιωμένες μαθηματικές λειτουργίες- Μπορείτε να προσθέσετε, να αφαιρέσετε, να πολλαπλασιάσετε και να διαιρέσετε τιμές CSS. Σε αντίθεση με τα πρότυπα CSS, SASS / SCSS, σας επιτρέπει να κάνετε χωρίς Calc ().
4. Τριγωνομετρία - Το SCSS σας επιτρέπει να γράψετε τις δικές σας λειτουργίες (ημιτονοειδές και cosine) χρησιμοποιώντας μόνο SASS / SCSS Syntax, όπως μπορείτε να κάνετε σε άλλες γλώσσες όπως το JavaScript.
5. Διευθυντικός @Για λίγο και έκφραση @ Αν-άλλο - μπορείτε να γράψετε κώδικα CSS χρησιμοποιώντας γνωστά στοιχεία από άλλες γλώσσες. Αλλά μην μοιράζεστε - ως αποτέλεσμα, η έξοδος θα είναι η συνήθης CSS.
6. Μίγματα (ακαθαρσίες) - Μπορείτε να δημιουργήσετε ένα σύνολο ιδιοτήτων CSS μία φορά και να λειτουργήσετε ξανά μαζί τους ή να αναμειγνύονται με άλλες τιμές. Μπορούν να χρησιμοποιηθούν μίγματα για τη δημιουργία μιας μεμονωμένης διάταξης. Οι ακαθαρσίες ενδέχεται επίσης να περιέχουν ολόκληρους κανόνες CSS ή άλλοι επιτρέπονται στο έγγραφο SASS. Μπορούν ακόμη και να λάβουν επιχειρήματα, τα οποία σας δίνουν τη δυνατότητα να δημιουργήσετε μια μεγάλη ποικιλία στυλ με μια μικρή ποσότητα μιγμάτων.
7. Λειτουργίες - Μπορείτε να δημιουργήσετε ορισμούς CSS με τη μορφή λειτουργιών για επαναλαμβανόμενη χρήση.

PreProcessor Sass

Η SASS δεν είναι δυναμική. Δεν θα μπορείτε να δημιουργήσετε και / ή να ζωντανέψετε τις ιδιότητες CSS και τις τιμές σε πραγματικό χρόνο. Αλλά μπορείτε να τα δημιουργήσετε πιο αποτελεσματικά και να επιτρέψετε τις τυποποιημένες ιδιότητες (όπως το Animation on CSS) να τα δανειστείτε από εκεί.

Σύνταξη

Το SCSS δεν προσθέτει ιδιαίτερα καμία νέα χαρακτηριστικά CSS, εκτός από τη νέα σύνταξη, η οποία συχνά κόβει το χρόνο για τον κωδικό γραφής.

Προϋποθέσεις

Υπάρχουν 5 προεπεξεργαστές CSS: SASS, SCSS, Less, Stylus και Postcss.

Αυτό το άρθρο ως επί το πλείστον καλύπτει το SCSS, το οποίο είναι παρόμοιο με τη SASS. Μπορείτε να διαβάσετε περισσότερα σχετικά με αυτούς τους προεπεξεργαστές για να στοιβάζετε υπερχείλιση ή Qaru (μετάφραση στα ρωσικά).

Sass - (.sass) ΜΙΚΡΟ.yntactically. ΕΝΑ.wesome. ΜΙΚΡΟ.tyle. ΜΙΚΡΟ.heets.

SCSS - (.scss) Sass.y. ΝΤΟ.ascading. ΜΙΚΡΟ.tyle. ΜΙΚΡΟ.heets.

Επεκτάσεις .sass i.scss είναι παρόμοια, αλλά ακόμα δεν είναι τα ίδια. Για τους οπαδούς της γραμμής εντολών, δίνουμε μια μέθοδο μετατροπής:

Μετατροπή από sass σε sasss $ sass-convert style.sass style.css # μετατροπή από scss στη sass $ sass-convert style.sass style.sasss

Η Sass είναι η πρώτη προδιαγραφή για SCSs με την επέκταση του αρχείου. Η ανάπτυξή της ξεκίνησε το 2006, αλλά αργότερα αναπτύχθηκε μια εναλλακτική σύνταξη με επέκταση. CSSS.

Σημείωση Άλλοι προεπεξεργαστές με λειτουργικότητα είναι παρόμοιες με το SCSs, αλλά η σύνταξη μπορεί να διαφέρει. Και επίσης, όλα όσα εργάζονται σε CSS θα παίξουν επίσης τέλεια στη Sass και SCSs.

Μεταβλητές

Η Sass / SASSS σας επιτρέπει να εργάζεστε με μεταβλητές. Στο CSS, δηλώνονται με διπλή παύλα (-) και σε προεπεξεργαστές το σύμβολο του δολαρίου ($).

$ Αριθμός: 1; $ ΧΡΩΜΑ: # FF0000; $ Κείμενο: "TPROGER FOREVER."; $ Κείμενο: "Το για πάντα." ! Προκαθορισμένο; $ Τίποτα: Null;

Μπορείτε να ορίσετε μια προεπιλεγμένη τιμή με μεταβλητές που δεν έχουν αξία ακόμα προσθέτοντας μια ετικέτα! Προεπιλογή στο τέλος της τιμής. Σε αυτή την περίπτωση, εάν η μεταβλητή έχει ήδη δοθεί αξία, δεν θα αλλάξει. Εάν η μεταβλητή είναι κενή, θα αντιστοιχιστεί μια νέα καθορισμένη τιμή.

#Container (Περιεχόμενο: $ κείμενο;)

Οι μεταβλητές SASS μπορούν να ανατεθούν σε οποιαδήποτε ιδιοκτησία.

Κανόνες

Πρότυπτα ένθετα στοιχεία CSS χρησιμοποιώντας ένα κενό:

/ * Ένθετο κανόνες * / #a (χρώμα: κόκκινο,) #A #B (χρώμα: πράσινο;) # # #B #c p (χρώμα: μπλε;)

Τα ίδια ένθετα αντικείμενα με SCSs:

/ * Ένθετο κανόνες * / #A (χρώμα: κόκκινο, #B (χρώμα: πράσινο, # p p (χρώμα: μπλε;)))))

Όπως μπορεί να δει, η σύνταξη φαίνεται καθαρότερη και λιγότερο επαναλαμβάνεται.

Αυτό είναι ιδιαίτερα χρήσιμο όταν ελέγχετε τις υπερφορτωμένες διατάξεις. Έτσι, η ευθυγράμμιση στην οποία οι συνημμένες ιδιότητες καταγράφονται στον κώδικα, αντιστοιχεί πλήρως στην πραγματική δομή της διάταξης της εφαρμογής.

Πίσω από τις σκηνές του preprocessor εξακολουθεί να τον συντάβει στον τυπικό κώδικα CSS (που φαίνεται παραπάνω) έτσι ώστε να μπορεί να εμφανιστεί στο πρόγραμμα περιήγησης. Αλλάζουμε μόνο τον τρόπο γραφής CSS.

Ampersand

#P (Χρώμα: Μαύρο; Α (Γραμματοσειρά: Bold, &: Τοποθετήστε το πλήκτρο (χρώμα: κόκκινο;))))

Με το σύμβολο, μπορείτε να υποδείξετε ρητά πού πρέπει να εισαχθεί ο γονέας επιλογέας.

Το αποτέλεσμα της κατάρτισης Sass (από το προηγούμενο παράδειγμα) σε CSS παρακάτω.

#P (Χρώμα: Μαύρο;) #P Α (Γραμματοσειρά: Bold;) #P Α: Τοποθετήστε το πλήκτρο (χρώμα: κόκκινο;)

Ως αποτέλεσμα, ο ampersand καταρτίστηκε στο όνομα του γονικού στοιχείου Α (Α: αιωρείται).

Μίγματα (είναι ακαθαρσίες)

Οι μίγματα μπορούν επίσης να περιέχουν επιλογείς, συμπεριλαμβανομένων των ιδιοτήτων. Και οι επιλογείς ενδέχεται να περιέχουν συνδέσμους με το γονικό στοιχείο μέσω ampersand (&), θυμάστε γι 'αυτό;

Δείγμα που εργάζεται με πολλαπλά προγράμματα περιήγησης

Μερικά πράγματα στο CSS είναι πολύ κουραστικές για να γράψουν, ειδικά στο CSS3, όπου και απαιτεί συχνά ένα μεγάλο αριθμό προθέσεων προμηθευτών (-Webkit- ή -Moz-).

Οι Mixins σας επιτρέπουν να δημιουργήσετε ομάδες δήλωσης CSS που πρέπει να χρησιμοποιήσετε αρκετές φορές στον ιστότοπο. Η καλή πρακτική θα είναι η χρήση των μιγμάτων για τα προθέματα προμηθευτών. Παράδειγμα:

@Mixin-ακτίνα ($ ακτίνα) (// Προθέματα για: -Webkit-Border-Racius: $ ακτίνα; // Chrome και Safari -Moz-Border-Racius: $ ακτίνα; // Firefox-Mss-Bordius-Racius: $ Ακτίνα, // Internet Explorer-o-Border-Racius: $ ακτίνα, // ακτίνα όπερας: $ ακτίνα; // Standard CSS) // ένα παράδειγμα χρήσης του μίκτη περιγράμματος-ακτίνας μετά τη δημιουργία του. Κουτί (@include Ακτίνα των συνόρων (10px);)

Αριθμητικές λειτουργίες

Όπως και στην πραγματική ζωή, δεν μπορείτε να εργαστείτε με αριθμούς που είναι ασύμβατοι τύποι δεδομένων (για παράδειγμα, την προσθήκη PX και EM).

Πρόσθεση και αφαίρεση

P (Μέγεθος γραμματοσειράς: 10px + 2em; // Σφάλμα! Μέγεθος γραμματοσειράς: 10px + 6px; // 16px γραμματοσειράς: 10px + 2; // 12px)

Πάντα να δώσετε προσοχή στον τύπο των δεδομένων που διπλώνεται. Δηλαδή, τα εικονοστοιχεία για εικονοστοιχεία, ελέφαντες σε ελέφαντες. Με τον ίδιο τρόπο, η αφαίρεση λειτουργεί, αλλά με ένα σημάδι μείον.

Παράδειγμα εκτέλεσης:

Πολλαπλασιασμός

Εκτελείται με τον ίδιο τρόπο όπως στο CSS, χρησιμοποιώντας Calc (A * B), αλλά χωρίς υπάλληλα και στρογγυλά στηρίγματα. Επιπλέον, μπορείτε ακόμα να διαχωρίσετε το σημάδι του πολλαπλασιασμού με κενά από αριθμούς (5 * 6 \u003d\u003d 5 * 6).

Εξαίρεση δεν μπορεί να πολλαπλασιάσει τα pixels μεταξύ τους. Δηλαδή, 10px * 10px! \u003d 100px. 10px * 10 \u003d\u003d 100px.

P (πλάτος: 10px * 10px; // Σφάλμα! Πλάτος: 10px * 10; // 100px πλάτος: 1px * 5 + 5px; // 10px πλάτος: 5 * (5px + 5px); // 50px πλάτος: 5px + ( 10px / 2) * 3; // 20px)

Διαίρεση

Με τη διαίρεση των πραγμάτων, είναι λίγο πιο δύσκολο, αλλά μπορείτε να το καταλάβετε, επειδή στο πρότυπο CSS Oblique Line (Slash) προορίζεται για χρήση από μια σύντομη μορφή ιδιοτήτων γραφής. Παράδειγμα παρακάτω.

/ * Σύντομη μορφή καταγραφής ακινήτων * / γραμματοσειρά: πλάγια τολμηρή .8em / 1.2 Arial, Sans-Serif; / * Τυπική φόρμα εγγραφής φόρμας * / Στυλ γραμματοσειράς: Italic; Γραμματοσειρά γραμματοσειράς: Bold. Μέγεθος γραμματοσειράς:. 8em; Ύψος γραμμής: 1.2; Οικογένεια γραμματοσειράς: Arial, Sans-Serif;

Υπάρχουν τρεις βοηθοί που υπαινίστηκαν στη δυνατότητα διαίρεσης:

1. Η τιμή (ή οποιοδήποτε μέρος του) αποθηκεύεται σε μια μεταβλητή ή επιστρέφεται από τη λειτουργία.
2. Οι τιμές περικλείονται σε παρενθέσεις.
3. Η τιμή χρησιμοποιείται ως μέρος άλλης αριθμητικής έκφρασης.

$ var1: 20; $ var2: 4; P (πάνω: 16px / 24px; // εμφανίζεται αμετάβλητη στο πρότυπο CSS Top: (20px / 5px); // Απαλλαγή (αλλά μόνο όταν χρησιμοποιείτε αγκύλες) Κορυφή: # ($ var2) / / Εμφανίζεται ως ένας κανονικός κώδικας CSS, η διαίρεση δεν εκτελείται κορυφαίο: $ var1 / $ var2; // Απόφαση Top: Τυχαία (4) / 5; // Η παράδοση εκτελείται (εάν χρησιμοποιείται σε ένα ζευγάρι με μια συνάρτηση) κορυφή: 2px / 4px + 3px; // Division εκτελείται εάν προστεθεί μια ακόμη αριθμητική δράση)

CSS Αποτέλεσμα συλλογής:

P (Κορυφή: 16px / 24px; Κορυφή: 4; Κορυφή: 20/4; Κορυφή: 5; Κορυφή: 0.6; Κορυφή: 3.5px;)

Υπόλειμμα

Το υπόλειμμα υπολογίζει το υπόλοιπο της λειτουργίας διαίρεσης. Παρακάτω θα εξετάσει το πώς να δημιουργήσετε "ζέβρα" για μια λίστα HTML.

@mixin zebra () (@for $ i από 1 έως 7 (@ of ($ i% 2 \u003d\u003d 1) (. Stretripe - # ($ i) (Ιστορικό-Χρώμα: Μαύρο; Χρώμα: Λευκό;)) * (@include zebra (); Κείμενο-Ευθυγράμμιση: Κέντρο;)

Η δημιουργία μιας ανάμειξης της ζέβρας εμφανίζεται στην εισαγωγή του κώδικα από πάνω. Η οδηγία @for και @IF περιγράφονται στην παρακάτω ενότητα.

Για να δημιουργήσετε ένα δείγμα, πρέπει να γράψετε πολλά στοιχεία HTML.

Αποτέλεσμα στο πρόγραμμα περιήγησης:

Η ZEBRA δημιουργήθηκε με επιτυχία από το Mikcin Zebra

Σύγκριση χειριστών

Η οδηγία @IF αποδέχεται την έκφραση sassscript και χρησιμοποιεί τα στυλ που είναι ένθετα σε αυτό εάν η έκφραση επιστρέψει οποιαδήποτε τιμή εκτός από ψευδής ή μηδενική.

Παρακάτω εμφανίζεται ο τρόπος με τον οποίο οι οδηγίες @IF και @ @else επενδύονται σε ανάμειξη.

@Mixin spacer ($ padding, $ margin) (@IF ($ padding\u003e $ περιθώριο) (padding: $ padding;) @else (padding: $ περιθώριο;)) .container (@include spacing (10px, 20px);)

Σύγκριση σε δράση. Η SPACATION SPACIM θα επιλέξει το μέγεθος της επένδυσης και, εάν το ένα είναι μεγαλύτερο από το περιθώριο.

Μετά την κατάρτιση CSS:

Δοχείο (Padding: 20px;)

Λογικοί χειριστές

Περιγραφή των λογικών φορέων

Χρησιμοποιώντας τους λογικούς χειριστές SASS για να δημιουργήσετε ένα κουμπί που θα αλλάξει το φόντο ανάλογα με το πλάτος του.

@Mixin κουμπί-χρώμα ($ Ύψος, $ πλάτος) (@IF (($ Ύψος< $width) and ($width >\u003d 35px)) (φόντο-χρώμα: μπλε;) @else (φόντο-χρώμα: πράσινο;)) .Button (@include κουμπί-χρώμα (20px, 30px))

Χορδές

Στο CSS, ορίζονται 2 τύποι χορδών: με εισαγωγικά και χωρίς. Η Sass αναγνωρίζει και τα δύο. Ως αποτέλεσμα, θα λάβετε στο CSS που ο τύπος χορδών που χρησιμοποιούνται στη SASS.

Σε ορισμένες περιπτώσεις, μπορείτε να προσθέσετε συμβολοσειρές στις επιτρεπόμενες τιμές CSS χωρίς εισαγωγικά, αλλά μόνο εάν η προστιθέμενη συμβολοσειρά είναι το τελικό στοιχείο.

P (γραμματοσειρά: 50px ari + "al"; // που συντάχθηκε στο 50px Arial)

Το παρακάτω παράδειγμα καταδεικνύει πώς να κάνει καμία ανάγκη.

P (γραμματοσειρά: "50px" + arial; // Σφάλμα!)

Μπορείτε να διπλώσετε τις γραμμές των διαφόρων τύπων αν δεν υπάρχουν κενά σε αυτά. Το παρακάτω παράδειγμα δεν θα καταρτιστεί.

P: Μετά (Περιεχόμενο: "Επιστροφή Linus" + Torvalds!; // Σφάλμα!)

P: Μετά (Περιεχόμενο: "Επιστροφή Linus" + "Torvalds!" // Δώστε προσοχή στο Torvalds! ")

Ένα παράδειγμα προσθήκης αρκετών γραμμών:

P: Μετά (περιεχόμενο: "η παρτίδα" + "ανθρωπότητα" + "-" + "". ")

Προσθήκη γραμμών και αριθμών:

P: Μετά (Περιεχόμενο: "Επαφή" + 2013 + "συγκολλητές καταναλωτών";)

Σημείωση Το περιεχόμενο Το ακίνητο λειτουργεί μόνο με ψευδολεκτικούς επιλογείς: πριν και: μετά. Συνιστάται να μην χρησιμοποιείτε περιεχόμενο στο έγγραφο CSS, αλλά για να το χρησιμοποιήσετε απευθείας μεταξύ των ετικετών σε HTML.

Φορείς εκμετάλλευσης ελέγχου ροής

Το SCSS έχει λειτουργίες (δάχτυλα ()) και οδηγία (@directive). Ακριβώς πάνω, έχουμε ήδη εξετάσει ένα παράδειγμα της λειτουργίας όταν μελετήθηκε η μετάδοση επιχειρημάτων μέσα στα μίγματα.

Οι λειτουργίες αποτελούνται συνήθως σε παρένθεση που είναι τα εξής αμέσως για το όνομά του. Και η οδηγία αρχίζει με το σύμβολο @.

Όπως το JavaScript, το SCSs σας επιτρέπει να εργάζεστε με ένα τυπικό σύνολο φορέων ελέγχου ροής.

αν ()

Εάν () είναι μια λειτουργία (και μερικές φορές η βάση της τεχνητής νοημοσύνης).

Η χρήση του φαίνεται αρκετά πρωτόγονος: ο χειριστής θα επιστρέψει μία από τις δύο τιμές που ορίζονται στην κατάσταση.

/ * Χρησιμοποιώντας τη λειτουργία εάν () * / αν (TRUE, 1PX, 2PX) \u003d\u003e 1PX; Αν (FALSE, 1PX, 2PX) \u003d\u003e 2px;

@αν.

@IF είναι μια οδηγία που χρησιμοποιείται για διακλάδωση με βάση την κατάσταση.

/ * Χρήση της οδηγίας @IF * / P (@IF 1 + 1 \u003d\u003d 2 (σύνορα: 1px στερεό;) @IF 7< 5 { border: 2px dotted; } @if null { border: 3px double; } }

Αποτέλεσμα ολοκλήρωσης:

P (σύνορα: 1px στερεό;)

Παρακάτω είναι ένα combo διακλάδωση με την προσθήκη της οδηγίας @else.

/ * Δημιουργήστε μια μεταβλητή $ type * / $ Τύπος: Ποταμός. / * Δοχεία χρώσης σε μπλε σε περίπτωση που η τιμή για τη μεταβλητή τιμή $ τύπου - ποταμός * / div (@If $ type \u003d\u003d ποταμός (χρώμα: μπλε;)) / * υπό όρους χρώματα για κείμενο σε ετικέτα

* / P (@if $ type \u003d\u003d δέντρο (χρώμα: πράσινο;) @else αν $ type \u003d\u003d ποταμός (χρώμα: μπλε;) @else εάν $ type \u003d\u003d βρωμιά (χρώμα: καφέ;))

Ελέγξτε για την παρουσία του γονικού στοιχείου

Το Ampersand επιλέγει το γονικό στοιχείο αν υπάρχει. Σε αυτή την περίπτωση, η NULL θα επιστρέψει. Επομένως, μπορεί να χρησιμοποιηθεί σε συνδυασμό με την οδηγία @IF.

Στα ακόλουθα παραδείγματα, σκεφτείτε τη δημιουργία υπό όρους CSS-Styles ανάλογα με την παρουσία του γονικού στοιχείου.

/ * Ελέγξτε για την παρουσία ενός γονικού στοιχείου * / @mixin dide-γονέα-Υπάρχει (@Af & (/ * εφαρμογή μπλε χρώματος στο γονικό στοιχείο εάν υπάρχει * / &: hover: μπλε;)) @else ( / * Γονάριο Το στοιχείο απουσιάζει, η χρήση μπλε σε αναφορές * / α (χρώμα: μπλε;))))

Οδηγία @

Η οδηγία @for εμφανίζει ένα σύνολο στυλ ενός καθορισμένου αριθμού χρόνων. Για κάθε επανάληψη, χρησιμοποιείται μια μεταβλητή μετρητή για την αλλαγή εξόδου.

Η οδηγία @for είναι κατάλληλη 5 φορές.

@for $ i από 1 έως 5 (.definition - # (πλάτος: 10px * $ i;)))

CSS Αποτέλεσμα συλλογής:

Ορισμός-1 (πλάτος: 10px;) .definition-2 (πλάτος: 20px;) .definition-3 (πλάτος: 30px;) .definition-4 (πλάτος: 40px;) .definition-5 (Πλάτος: 50px;)

Οδηγία @)

Η οδηγία @AEP θέτει $ VAR σε κάθε μία από τις τιμές της λίστας ή του λεξικού και εμφανίζει τα στυλ που περιέχονται σε αυτό χρησιμοποιώντας την αντίστοιχη τιμή του $ var.

@each $ ζώο σε platypus, λιοντάρι, πρόβατα, περιστέρι (# ($ ζώο) -ICON (εικόνα: URL ("/ εικόνες / # ($ ζώο))))))))))))))))))))))).

CSS Αποτέλεσμα συλλογής:

Platypus-icon (Εικόνα: URL ("/ εικόνες / platypus.png");).) .Lion-icon (Εικόνα: URL ("/ εικόνες / lion.png");). Εικονίδιο (φόντο- Εικόνα: URL ("/ εικόνες / πρόβατα.png");) .dove-icon (εικόνα-εικόνα: URL ("/ εικόνες / dove.png");).

Οδηγία @ Όταν.

Η οδηγία @hile αποδέχεται την έκφραση sassscript και εμφανίζει κυκλικά τα στυλ που επενδύονται σε αυτήν έως ότου η έκφραση υπολογίζεται ως αλήθεια. Μπορεί να χρησιμοποιηθεί για να δημιουργήσει πιο πολύπλοους κύκλους από εκείνους για τους οποίους το @for είναι κατάλληλο, αν και χρειάζεται σπάνια. Για παράδειγμα:

Δείκτης $: 5; @Hile $ ευρετήριο\u003e 0 (. Selement - # (Δείκτης $) (πλάτος: 10px * $ Ευρετήριο;) $ Ευρετήριο: $ Index - 1;)

Αποτέλεσμα ολοκλήρωσης:

Στοιχείο-5 (πλάτος: 50px;) .ELEMEMED-4 (πλάτος: 40px;) .ELEMEMED-3 (πλάτος: 30px;) .ELEMEMEMED-2 (πλάτος: 20px;).

Λειτουργίες στη Sass / SASSS

Χρησιμοποιώντας SASS / SCSS, μπορείτε να χρησιμοποιήσετε λειτουργίες καθώς και σε άλλες γλώσσες.

Δημιουργήστε τη λειτουργία τριών εκατοντάδων px () που επιστρέφει 300px.

@function τρία εκατό-px () (@return 300px;) .Name (πλάτος: τρικόκοσια px (), σύνορα: 1px στερεό γκρι, οθόνη: μπλοκ; θέση: απόλυτη;)

Μετά την εφαρμογή μιας τάξης.Name το πλάτος του στοιχείου θα είναι ίσο με 300 pixels.

Οι λειτουργίες στη Sass μπορούν να επιστρέψουν οποιαδήποτε σωστή τιμή CSS και μπορούν να αντιστοιχιστούν σε οποιαδήποτε ιδιότητα. Μπορούν ακόμη και να υπολογιστούν με βάση το μεταδιδόμενο επιχείρημα.

@Function διπλό ($ πλάτος) (@return $ πλάτος * 2;)

Τριγωνομετρία

Οι τριγωνομετρικές λειτουργίες Οι αμαρτίες () και οι COS βρίσκονται συχνά με τη μορφή ενσωματωμένων τάφων σε πολλές γλώσσες, όπως το JavaScript, για παράδειγμα.

Το έργο τους θα πρέπει να μελετηθεί αν χρειαστεί να μειώσετε το χρόνο που θα δαπανηθεί για την ανάπτυξη κινούμενων εικόνων διεπαφής χρήστη, για παράδειγμα, για να δημιουργήσετε ένα trobrier. Με την ευκαιρία, είμαστε ήδη σε ένα από τα άρθρα. Αλλά σε αυτή την περίπτωση θα είναι ο κώδικας και όχι η εικόνα GIF που έχει εισαχθεί στο έγγραφο HTML.

Παρακάτω θα εξετάσει μερικά παραδείγματα για να δημιουργήσετε ενδιαφέρουσες επιδράσεις κινούμενων εικόνων χρησιμοποιώντας τη λειτουργία SIN (), στην οποία ελαχιστοποιείται ο αριθμός του κώδικα. Στη συνέχεια μπορείτε να κλιμακώσετε αυτές τις γνώσεις για να δημιουργήσετε στοιχεία διαδραστικής διεπαφής χρήστη (κίνηση σε κύκλο, κυματιστό κινούμενο σχέδιο).

Το πλεονέκτημα της χρήσης τριγωνομετρίας σε συνδυασμό με CSS εκφράζεται απουσία πρόσθετων αιτημάτων HTTP, όπως συμβαίνει με εικόνες gif.

Μπορείτε να γράψετε τριγωνομετρικές λειτουργίες στη Sass. Διαβάστε περισσότερα για αυτό.

Γράφοντας τις δικές σας λειτουργίες

Στην τριγωνομετρία, πολλές λειτουργίες βασίζονται σε λειτουργίες. Κάθε λειτουργία βασίζεται σε ένα άλλο. Για παράδειγμα, η λειτουργία Rad () απαιτεί τη χρήση του PI (). Οι λειτουργίες COS () και SIN () απαιτούν τη χρήση της RAD ().

@function pi () (@return 3.14159265359;)

Οι λειτουργίες γραφής στη Sass / SCSs είναι πολύ παρόμοιες με τις λειτουργίες γραφής σε άλλες γλώσσες.

Χρησιμοποιώντας τη λειτουργία POW ():

@Function POW ($ Αριθμός, $ EXP) ($ Αξία: 1; @If $ $\u003e 0 (@for $ i από 1 έως $ exp ($ Τιμή: $ value * $ Αριθμός;)) @else αν $ exp< 0 { @for $i from 1 through -$exp { $value: $value / $number; } } @return $value; }

Χρησιμοποιώντας τη λειτουργία Rad ():

@Function Rad ($ Γωνία) ($ Μονάδα: Μονάδα ($ Γωνία); $ Μηχανική: $ Γωνία / ($ Γωνία * 0 + 1); // Εάν η τιμή γωνίας ("DEG") καθορίζεται σε βαθμούς ("DEG") , Χρειάζεται να το μετατρέψετε σε ακτίνες. @IF $ UNIT \u003d\u003d DEG ($ Μείγμα: $ Unitless / 180 * Pi ();) @return $ Unitess;)

Για να υπολογίσετε την εφαπτομένη, η λειτουργία TAN () πρέπει να εφαρμόσει τις λειτουργίες SIN () και COS () ..

26.07.2017

5 καλύτεροι Preprocessors CSS 2017, οι οποίοι θα επιταχύνουν τη ροή εργασίας σας.

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

Με άλλα λόγια, ο Preprocessor CSS είναι μια προσθήκη στο CSS με νέα χαρακτηριστικά: μεταβλητές, επεκτάσεις, εισαγωγές και ούτω καθεξής.

Σε αυτό το άρθρο, θα μιλήσω για τους καλύτερους 5 προεπεξεργαστές CSS του 2017.

01. SASS

Η Sass είναι ο πιο δημοφιλής προεπεξεργαστής με μια τεράστια κοινότητα και ισχυρή λειτουργικότητα. Λειτουργεί μόνο σε συνδυασμό με ρουμπίνι και είναι πολύ απλή στη μάθηση. Τα περισσότερα front-end πλαίσια όπως το bootstrap, το ίδρυμα και το υλικό υλοποιούνται χτίζονται χρησιμοποιώντας sass.

Η Sass έχει δύο σύνταξη:

• .
• .sscss

02. Στυλός.

Η γραφίδα είναι ένας άλλος μεγάλος προεπεξεργαστής για δυναμική γενιά CSS. Εάν θέλετε να μειώσετε τις σγουρές αγκύλες, κόμματα και σημεία με ένα κόμμα, τότε μπορεί να είναι η καλύτερη επιλογή για εσάς. Η γραφίδα λειτουργεί στο Node.js και είναι πολύ εύκολο να εγκατασταθεί και να χρησιμοποιηθεί. Έχει πολλές προσαρμοσμένες λειτουργίες, όπως ο κορεσμός (). Μπορείτε επίσης να χρησιμοποιήσετε όλες τις λειτουργίες που παρέχονται από άλλους κορυφαίους μεταγλωττιστές.

03. Λιγότερο.

Λιγότερο, ο οποίος είναι επίσης γνωστός ως Less.js ή λιγότερο CSS, είναι ένας άλλος κορυφαίος preprocessor CSS. Αυτή είναι μια εξαιρετική επιλογή εάν χρειάζεστε τέτοιες τυπικές λειτουργίες ως μεταβλητές, ενσωματωμένα στυλ και ούτω καθεξής. Αυτή η βιβλιοθήκη Javascript γράφτηκε αρχικά στο Ruby.

• Δείτε επίσης:

04. STAILECOW.

Το STAILECOW είναι ένας προεπεξεργαστής γραμμένο σε κόμβο, το οποίο μπορεί να εγκατασταθεί χρησιμοποιώντας NPM. Έχει ένα ισχυρό API, με το οποίο μπορείτε εύκολα να δημιουργήσετε plugins.

05. CSS-CRUSH

Preprocessor, χτισμένο σε PHP, το οποίο θα γίνει μια εξαιρετική επιλογή για τους προγραμματιστές PHP, επειδή λειτουργεί σε πολλές πλατφόρμες. Το CSS-Crush έχει όλα τα συνηθισμένα χαρακτηριστικά του προεπεξεργαστή (μεταβλητές, ενσωματωμένα στυλ, κλπ.)

συμπέρασμα

Αν ψάχνετε για το καλύτερο Preprocessor CSS, θα βρείτε πολλές διαφορετικές επιλογές στο δίκτυο. Κατά τη γνώμη μου, οι καλύτερες επιλογές για αρχάριους είναι sass και γραφίδα.

Και όταν τελικά, αυτοί οι προγραμματιστές ηρεμούν και σταματούν να κοροϊδεύουν τους νεοφερμένους!? Δεν είχα χρόνο να ασχοληθώ με το τέλος CSS., Μου είπαν: "Όλοι οι πραγματικοί στίχοι έχουν μετατραπεί σε μεγάλο βαθμό στους προεπεξεργαστές. Λοιπόν, τι καθαρό CSS. Την παραμονή του 2020! "Τι να κάνετε;

Πρώτον, οι προγραμματιστές δεν θα σταματήσουν ποτέ να εφεύρουν νέες τεχνολογίες. Και επαγγελματίες στίχους - είναι ευγνώμονες γι 'αυτούς για αυτό. Γλώσσα γλώσσας CSS., εφευρέθηκε τη στιγμή που οι τοποθεσίες ήταν πρωτόγονοι. Αλλά τα χρόνια πήγαν, οι χώροι έγιναν πιο δύσκολες και μαζικές, αλλά οι μέθοδοι διάταξης παρέμειναν οι ίδιες. Οι λαβίδες σφραγίστηκαν για να γράψουν παρόμοια τμήματα του κώδικα. Ήταν αδύνατο να αλλάξετε γρήγορα το χρώμα στο χώρο. Υπάρχει ανάγκη για μεγαλύτερη αυτοματοποίηση διάταξης και εμφανίστηκε Προεπεξεργαστές CSS. Κώδικας. Και σήμερα θα μιλήσουμε για ένα από αυτά, προεπεξεργαστής λιγότερο.

Σύνταξη μείον και έναντι κώδικα

Το μόνο που θα χρειαστεί να καταρτίσουν Πιο λιγο Ο κώδικας είναι ο επεξεργαστής κώδικα Vs κώδικα. και επέκταση Εύκολο λιγότερο.. Πως δουλεύει?

1. Δημιουργία αρχείου στυλ με επέκταση .πιο λιγο.
2. Μετά την αποταμίευση, δημιουργεί αυτόματα .css Αρχείο στον ίδιο φάκελο.

Κάθε φορά που αποθηκεύετε αλλαγές Πιο λιγο Τα αρχεία καταρτίζονται από το B. CSS. Αρχεία. Τα προγράμματα περιήγησης δεν έχουν ακόμη μάθει να κατανοούν Πιο λιγο, χρειάζονται CSS. ο κώδικας.

Μεταβλητές λιγότερο.

Οι πιο συχνά χρησιμοποιούμενες ιδιότητες που τελειώνουν στις μεταβλητές. Ο ιστότοπος συνήθως χρησιμοποιεί επαναλαμβανόμενα χρώματα και οικογένειες γραμματοσειρών. Εισάγετε όλα τα χρώματα σε μεταβλητές και στη συνέχεια υποκαθιστούμε τον κανόνα όχι τον κώδικα χρώματος, αλλά η μεταβλητή. Ρωτάτε: "Ποιο είναι το αστείο; Δεν χρειάζεται να καταχωρίσετε κάτι ούτως ή άλλως, ποια είναι η διαφορά;"

Το κύριο χαρακτηριστικό είναι μια γρήγορη αντικατάσταση χρώματος. Το χρώμα αλλάζει μόνο μία φορά, σε μια μεταβλητή. Η αντικατάσταση του χρώματος σε μία μεταβλητή θα αντικαταστήσει το χρώμα σε όλες τις σελίδες του ιστότοπου. Μόνο ένα από αυτό το τσιπ είναι ήδη αρκετό για να αρχίσει να χρησιμοποιεί Πιο λιγο. Δηλώνω Μεταβλητές σε λιγότερο. Και διατηρούμε τους αξίες που χρειαζόμαστε, δίνουμε τα ονόματα των μεταβλητών σημαντική.

@Primary: # 194EB4;
@Secondary: # F2B834;
@Success: # 4CB514;
@Black: # 000;
@White: #fff;

Τώρα γράφουμε τον συνηθισμένο κώδικα όπως κάναμε μέσα CSS., Αλλά αντί των αξιών που υποκαθιστούμε μεταβλητές.

Πιο λιγο

Div (
Padding: 0;

Χρωμα μαυρο;
}

Μετά την αποταμίευση, κατάρτιση CSS. ο κώδικας. Δεν αγγίζουμε καθόλου CSS. Αρχείο, όλες οι εργασίες διεξάγονται στο Πιο λιγο αρχείο. Μπορείτε να κάνετε οποιεσδήποτε συχνά επαναλαμβανόμενες ιδιότητες σε μεταβλητές.

CSS.

Div (
Padding: 0;
Γραμματοσειρά: Roboto, Sans-Serif.
Χρώμα: # 000;
}

Mixin (mixin) σε λιγότερο

Μίγματα Χρήσιμο για την επαναχρησιμοποίηση του συνόλου των ιδιοτήτων - πλαίσια, κουμπιά, κεφαλίδες. Ένα ομαδοποιημένο σύνολο ιδιοτήτων μπορεί να εφαρμοστεί σε διαφορετικούς επιλογείς.

Στην περιοχή αρκετά παρόμοια κουμπιά διαφορετικών χρωμάτων, αλλά με τις ίδιες ιδιότητες γραμματοσειρών. Δημιουργήστε ένα μείγμα που βοηθά στην αυτοματοποίηση της διαδικασίας δημιουργίας κουμπιών.

Button_font (

Κείμενο-μετασχηματισμό: κεφαλαία;
Μέγεθος γραμματοσειράς: 18px;
}

Αναμιγνύουμε την ανάμιξη στις ιδιότητες του επιλογέα κουμπιού.

Portfolio__button (
Padding: 15px 80px;
Χρώμα: # 344258;
.Button_font;
}

Στην έξοδο έχουμε:

Portfolio__button (
Padding: 15px 80px;
Χρώμα: # 344258;
Οικογένεια γραμματοσειράς: "DIN PRO BOLD".
Κείμενο-μετασχηματισμό: κεφαλαία;
Μέγεθος γραμματοσειράς: 18px;
}

Σύμβολο ampersand

Αντί για την επανάληψη του ονόματος του επιλογέα, χρησιμοποιήστε το σύμβολο του Ampersand.

Portfolio__item (
Θέση: συγγενής.
Ιστορικό-χρώμα: # 3c3c3c;
}
&: Hover (
Ιστορικό-Χρώμα: #CCC;
}
}

CSS.

.portfolio__item (
Θέση: συγγενής.
Ιστορικό-χρώμα: # 3c3c3c;
}
.portfolio__item: hover (
Ιστορικό-Χρώμα: #CCC;
}

Τα αιτήματα των μέσων ενημέρωσης σε λιγότερο

Μπορείτε να εγγράψετε τα αιτήματα των μέσων ενημέρωσης απευθείας μέσα στον επιλογέα.

Πιο λιγο

.Header __title (
Χρώμα: # 344258;
Μέγεθος γραμματοσειράς: 40px;

Padding: 0 20px;
@ Μόνο οθόνη και (μέγιστο πλάτος: 320px) (
Μέγεθος γραμματοσειράς: 22px;
}
}

CSS.

.Header __title (
Χρώμα: # 344258;
Μέγεθος γραμματοσειράς: 40px;
Γραμματοσειρά: "DIN PRO", SANS-SERIF.
Padding: 0 20px;
}
@ Μόνο οθόνη και (μέγιστο πλάτος: 320px) (
.Header __title (
Μέγεθος γραμματοσειράς: 22px;
}
}

συμπέρασμα

Αυτό το άρθρο δεν αποκαλύπτει το 25% όλων των δυνατοτήτων που προσφέρει Πιο λιγο. Ναι, δεν είναι απαραίτητο, ο σκοπός του άρθρου είναι το κίνητρο των νεοεισερχομένων να αρχίσουν να χρησιμοποιούν τους προεπεξεργαστές. Ξεκινώντας από την απλούστερη, σταδιακά κινούνται προς πιο σύνθετο.