Πώς να ξεκινήσετε με τη Sass

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

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

• Τι είναι η SASS;

Θα δημιουργήσουμε μια λίστα με τη Sass για να δημιουργήσουμε τις κοινωνικές μας εικόνες, οι οποίες θα αποτελούνται από το όνομα, η αναφορά γραμματοσειράς και το χρώμα πρώτα - και αργότερα το Tooltip.

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

Υπάρχουν διάφοροι τρόποι εγκατάστασης και χρήσης SASS ανάλογα με το σύστημά σας και τις ανάγκες εργαλείων οικοδόμησης - Περισσότερες λεπτομέρειες μπορούν να βρεθούν εδώ - Ωστόσο, θα χρησιμοποιήσουμε το Codepen για να συντάξουμε τη SASS σε CSS για να διατηρήσουμε τα πράγματα όσο το δυνατόν πιο απλά.

Για να αξιοποιήσετε πραγματικά τη δύναμη της Sass και να μην πάρετε τον εαυτό σας σε ένα χάος εξειδίκευσης και πολυπλοκότητα απαιτείται μια σταθερή κατανόηση του CSS. Η ιδιαίτερη γεύση της Sass θα χρησιμοποιούμε είναι το SCSS (Sassy CSS), που σημαίνει ότι θα χρησιμοποιήσουμε ακόμα τις σγουρές αγκύλες {} στον κωδικό SASS.

Πάρτε τα αρχεία φροντιστηρίων

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

01. Ρυθμίστε το COSPEN CSS

Το πρώτο πράγμα που θα χρειαστεί να κάνουμε είναι Δημιουργήστε ένα νέο στυλό Και αλλάξτε μερικές από τις προεπιλεγμένες ρυθμίσεις για τον επεξεργαστή CSS στο Codepen. Θα αλλάξουμε τον προεπεξεργαστή CSS σε SCSs και θα ενεργοποιήσουμε κανονικοποίηση και autoprefixer.

02. Αρχίστε να γράφετε κάποιο κώδικα

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

Τα ονόματα που χρησιμοποιούνται εδώ θα χρησιμοποιηθούν στη λίστα SASS ως αναφορά στο CSS. Θα χρησιμοποιήσουμε επίσης τη σύμβαση ονομασίας BEM για τα ονόματά μας κατηγορίας.

 & lt; div class = "Social__container" & GT;
  & lt; div class = "Social__item" & GT;
  & lt; ένα στόχο = "_ κενό" href = "..."
  class = "Social__icon - Twitter" & GT;
  & lt; i class = "icon - twitter" & gt; / i & gt;
  & lt; / a & gt;
  & lt; / div & gt;
  ...
& lt; / div & gt; 

03. Ορίστε βασικά στυλ

Μετακίνηση στον επεξεργαστή CSS, θα ξεκινήσουμε συμπεριλαμβάνοντας τη γραμματοσειρά-awesome, ορίζοντας μια μεταβλητή για το μέγεθος της γραμματοσειράς βάσης και μερικά βασικά στυλ για τη σελίδα.

 @ import URL (http://srt.lt/w8yt8);
// μεταβλητές
$ - μέγεθος γραμματοσειράς: 16px;
// Βασικό στυλ
σώμα {
  Μέγεθος γραμματοσειράς: $ base-font-size?
  ...
} 

04. Δημιουργήστε μια βασική λειτουργία

Στη συνέχεια, θα δημιουργήσουμε μια βασική λειτουργία για να μετατρέψουμε μια τιμή εικονοστοιχείων σε μια τιμή EM χρησιμοποιώντας τη μεταβλητή μας "$ βάσης-μεγέθους".

Οι λειτουργίες στη Sass δημιουργούνται χρησιμοποιώντας το "@function" που ακολουθείται από το όνομα της λειτουργίας και η είσοδος που χρησιμοποιείται για την εκτέλεση της λειτουργίας.

Στη συνέχεια, μέσα στη δήλωση χρησιμοποιούμε το '@return' για την έξοδο της τιμής κατά τη χρήση της λειτουργίας. Το "# {} 'που περιβάλλει τον υπολογισμό χρησιμοποιείται για παρεμβολή .

 // Λειτουργίες
@funcomin px-to-em ($ pixels) {
@return # {$ pixels / $ base-font-size} em;
} 

05. Κάντε mixins

Συνεχίζοντας με τη ρύθμισή μας, θα δημιουργήσουμε ανάμεινα για απλά ερωτήματα για τα απλά κινητά τηλέφωνα που χρησιμοποιούν τη λειτουργία "PX-to-EM", την οποία θα περάσουμε σε μια τιμή PX για να επιστρέψετε μια τιμή EM.

Οι μίγματα δημιουργούνται χρησιμοποιώντας το "@mixin" που ακολουθείται από ένα όνομα για το mixin. Στη συνέχεια, μέσα στη δήλωση χρησιμοποιούμε το '@CONTENT' για να εξάγει τον κώδικα που βάζουμε μέσα στο Mixin όταν το καλούμε αργότερα στο codebase μας.

 @mixin viewport - μεγάλο {
  @ Media οθόνη μόνο και
  (λεπτό πλάτος: px-to-em (1680px)) {
  @περιεχόμενο;
}}
@mixin viewport - medium {
  @ Media οθόνη μόνο και
  (λεπτό πλάτος: px-to-em (1080px)) {
  @περιεχόμενο;
}} 

06. Ρυθμίστε μια λίστα sass

Το τελευταίο βήμα στη ρύθμισή μας είναι να δημιουργήσετε μια λίστα. Οι λίστες στη Sass δημιουργούνται χρησιμοποιώντας μια μεταβλητή. Μετά από αυτό η ακριβής σύνταξη είναι αρκετά χαλαρή, αποδοχή μιας ευρείας ποικιλίας τρόπους να το ορίσετε .

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

 $ icon-list: (
  Vimeo "\ F27D" # 1AB7EA,
  Twitter "\ f099" # 1da1f2,
  ...
  github "\ f113" # 333,
  rss "\ f09e" # f26522
) · 

07. Εμφανίστε τα εικονίδια σας σε μια σειρά

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

 .Social__item {
  Οθόνη: Inline-Block.
  Περιθώριο-δεξί: 0,05em;
} 

08. Δημιουργήστε ένα κοινόχρηστο στυλ εικονιδίων

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

 [class ^ = "εικονίδιο"] {
  Γραμματοσειρά: «Fontawesome».
  Μιλήστε: Κανένα;
  Στυλ γραμματοσειράς: Κανονική.
  Γραμματοσειρά γραμματοσειράς: κανονική;
  Παραλλαγή γραμματοσειράς: Κανονική.
  Κείμενο-μετασχηματισμό: Κανένα;
  Ύψος γραμμής: 1;
  -Webkit-γραμματοσειρά-εξομάλυνση: αντιαλιακό?
  -moz-Osx-γραμματοσειρά-εξομάλυνση: κλίμακα γκρι? } 

09. Στυλ φόντο κουμπιού

Χρησιμοποιώντας την ίδια μέθοδο, θα κάνουμε το ίδιο για τα κουμπιά που καθορίζουν τις αξίες μας στο 'em', επιτρέποντάς μας αργότερα να το αλλάξουμε χρησιμοποιώντας το δοχείο.

 [Class ^ = "Social__icon"] {
  Μέγεθος γραμματοσειράς: 1em; Πλάτος: 2em; Ύψος: 2em;
  Ιστορικό-χρώμα: # 333;
  άσπρο χρώμα;
  Κείμενο-διακόσμηση: Κανένα;
  Ακτίνα συνοριακής ακτίνας: 100%.
  Κείμενο-Ευθυγράμμιση: Κέντρο;
  Εμφάνιση: Flex;
  Ευθυγράμμιση-αντικείμενα: Κέντρο;
  Δικαιολογήστε-περιεχόμενο: κέντρο;
} 

10. @each βρόχο για τις εικόνες μας

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

Για να δημιουργήσετε ένα βρόχο στη Sass που χρησιμοποιούμε το '@ach' που ακολουθείται από ονόματα για κάθε αξία κάθε στοιχείου - '$ icon', '$ Unicode' και '$ Icon-Background' - ακολουθούμενη από τη λέξη «in» και στη συνέχεια το όνομα της λίστας.

Μέσα στο βρόχο θα εφαρμόσουμε την τιμή "$ Unicode" στο "Πριν από το" Pseudo στοιχείο κάθε εικονιδίου που έχουμε δημιουργήσει στο HTML, επιτρέποντας στο κοινό στυλ που δημιουργήσαμε νωρίτερα για να φροντίσουμε όλα τα υπόλοιπα στυλ που χρειάζονται.

 @each $ icon, $ Unicode, $ icon-background
σε $ icon-list {
  .icon - # {$ icon} {
  & amp; :: πριν {
  Περιεχόμενο: $ Unicode;
  }
  }
} 

11. @each βρόχο για τα χρώματα του φόντου μας

Τα εικονίδια τώρα εργάζονται, αλλά έχουμε ακόμα το χρώμα του φόντου. Θα προσθέσουμε λίγο περισσότερο κώδικα στη λίστα μας για να το διορθώσουμε. Χρησιμοποιώντας την ίδια μέθοδο όπως παραπάνω, θα εξάθουμε το όνομα '$ icon', αλλά αυτή τη φορά στις κατηγορίες "Social__icon" και μέσα στο χρώμα του '$ icon-background'.

 @each $ icon, $ Unicode, $ icon-background
σε $ icon-list {
  ...
  .Social__ICON - # {$ icon} {
  Ιστορικό-χρώμα: $ εικονίδιο-φόντο;
  }
} 

12. Χρησιμοποιήστε τα μίγματα

Χρησιμοποιώντας τα μίγματα που δημιουργήσαμε νωρίτερα και επειδή στιβάζσαμε τα εικονίδια χρησιμοποιώντας τις τιμές "em", μπορούμε να εφαρμόσουμε ένα μέγεθος γραμματοσειράς στο δοχείο και να την αυξήσουμε χρησιμοποιώντας το Mixin Mexy-Query χρησιμοποιώντας το '@include' και το όνομα του αναμειγνύσου που ακολουθείται από το Κωδικός που θέλουμε να συμπεριλάβουμε στο ερώτημα των μέσων ενημέρωσης.

 .Social__container {
  Μέγεθος γραμματοσειράς: 1em;
  @include viewport - medium {
  Μέγεθος γραμματοσειράς: 1.5em;
  }
  @include viewport - μεγάλο {
  Μέγεθος γραμματοσειράς: 2em;
  }} 

13. Προσθέστε τις κρατικές αλληλεπίδρασης και τις ενσωματωμένες λειτουργίες

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

Η sass έχει πολλά Ενσωματωμένες λειτουργίες χρώματος Επιτρέποντάς μας να πάρουμε το χρώμα φόντου που έχουμε θέσει στη λίστα μας και το ανακατεύουμε με μαύρο για να σκουρύνετε το κουμπί - όταν αλληλεπιδρούν.

 εικονίδιο - # {$ icon} {
  Ιστορικό-χρώμα: $ εικονίδιο-φόντο?
  & amp;: hover,
  & amp;: εστίαση,
  & amp;: ενεργή {
  χρώμα του φόντου:
  Ανακατέψτε (μαύρο, $ εικονίδιο-φόντο, 15%);
  }} 

14. Μετάβαση στο χρώμα του φόντου

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

 [class ^ = "Social__icon"]{
  ...
  Μετάβαση: Χρώμα φόντου
  150ms ease-in-out
  ?
} 

15. Προσθέστε περαιτέρω επιπτώσεις μετάβασης

Προσθέτοντας μια «σχετική» τοποθέτηση στα κουμπιά και μια κορυφαία τιμή και προσθέτοντας 'κορυφή' στην ιδιοκτησία μας "μετάβαση" μπορούμε να είναι έτοιμοι τα στοιχεία για περαιτέρω αλληλεπίδραση.

 [Class ^ = "Social__icon"] {
  Θέση: συγγενής.
  Κορυφή: 0;
  ...
  Μετάβαση: Χρώμα φόντου
   150ms ease-in-out,
    Κορυφή 250ms γραμμική
  ? } 

16. Μετακινήστε τα κουμπιά κατά την αλληλεπίδραση

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

 [Class ^ = "Social__icon"] {
  ...
  & amp;: hover,
  & amp;: εστίαση,
  & amp;: ενεργή {
  Περίγραμμα: Κανένα;
  Κορυφή: -0.25em;
  }} 

17. Προσθέστε μια σκιά σταγόνας

Μπορούμε επίσης να χρησιμοποιήσουμε την ίδια μέθοδο για να δημιουργήσουμε και να ζωντανέψουν μια «σκιά κουτί» - προσθέτοντας λίγο περισσότερο βάθος στην αλληλεπίδραση - αλλάζοντας το κατακόρυφο ύψος της σκιάς ταυτόχρονα με την κορυφαία τιμή.

 Σκιά:
  0 0 0.25EM -0.25EM RGBA (0,0,0,0,2).
& amp;: hover,
& amp;: εστίαση,
& amp;: ενεργή {
  ...
  Box-Shadow:
  0 0.5EM 0.25EM -0.25EM RGBA (0,0,0,0,3).
} 

18. Προσθήκη εργαλείων

Μπορούμε εύκολα να προσθέσουμε εργαλεία με το CSS για να προσθέσουμε περαιτέρω σαφήνεια για τους χρήστες μας. Το πρώτο πράγμα που θα κάνουμε είναι να προσθέσουμε την τιμή Tooltip στη λίστα. Φροντίζοντας να τα γράψετε σε αποσπάσματα για να επιτρέψετε τη χρήση χώρων εάν απαιτείται.

 $ icon-list: (
  Vimeo "Vimeo" "\ F27D" # 1AB7EA,
  Twitter "Twitter" "\ f099" # 1da1f2,
  ...
  github "github" "\ f113" # 333,
  RSS "RSS" "\ f09e" # f26522,
) · 

19. Τροποποιήστε τον βρόχο @each

Λόγω της προσθήκης στη λίστα μας θα χρειαστεί να τροποποιήσουμε τον βρόχο "@ach" για να συμπεριλάβετε την τιμή Tooltip ('$ όνομα). Μπορούμε στη συνέχεια να εξάγουμε το όνομα ως το περιεχόμενο του στοιχείου "πριν από το ψευδό" στα κουμπιά μας.

 @each $ icon, $ όνομα, $ Unicode,
  $ icon-background in $ icon-list {
  ...
  .Social__ICON - # {$ icon} {
  ...
  & amp; :: πριν {
  Περιεχόμενο: '# {$ όνομα}';
  }
  }} 

20. Στυλ το πριν από το ψευδο στοιχείο

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

 & amp; :: πριν {...
  Κορυφή: -3.5em;
  αδιαφάνεια: 0;
  μετάβαση:
  Top 250ms γραμμική, αδιαφάνεια 150ms γραμμική 150ms.
}
& amp;: hover, ... {...
  & amp; :: πριν {
  αδιαφάνεια: 1;
  Κορυφή: -2.5em; }
} 

21. Στυλ το μετά το ψευδοειδές στοιχείο

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

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

 & amp; :: Μετά την {...
  Κορυφή: -1.9em;
  αδιαφάνεια: 0;
  μετάβαση:
  Top 250ms γραμμική, αδιαφάνεια 150ms γραμμική 150ms.
}
& amp;: hover, ... {...
  & amp; :: μετά {
  αδιαφάνεια: 1;
  Κορυφή: -0.9em; }
} 

Η συλλογή Codepen Collection of Tutorial Steps μπορεί να βρεθεί εδώ .

Αυτό το άρθρο εμφανίστηκε αρχικά στο θέμα του περιοδικού Web Designer 264. Αγοράστε το εδώ .

Διαβάστε περισσότερα:

• Τι είναι η SASS;
• 8 Χαρακτηριστικά Codepen δεν γνωρίζατε
• 5 συμβουλές για εξαιρετικά γρήγορη CSS