Πώς να χρησιμοποιήσετε μεταβλητές στο CSS και να βελτιώσετε το στυλ σας

Οι περισσότεροι ιστότοποι χρησιμοποιούν CSS για να γυαλίσουν την εμφάνισή τους και να διαμορφώσουν διαφορετικά στοιχεία ιστοσελίδων. Το CSS, ή το Cascading Style Sheet, δεν είναι τεχνικά γλώσσα προγραμματισμού. Ωστόσο, το CSS μπορεί να χρησιμοποιηθεί με γλώσσες προγραμματισμού όπως η JavaScript για τη δημιουργία ιστοσελίδων με απόκριση και αλληλεπίδραση.

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

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

Πίνακας περιεχομένων

Τι είναι οι μεταβλητές στο CSS;

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

Γιατί να χρησιμοποιήσετε μεταβλητές CSS; Αυτοί είναι μερικοί από τους λόγους.

Διευκολύνει την ενημέρωση κώδικα: Μόλις δηλώσετε μια μεταβλητή, μπορείτε να χρησιμοποιήσετε ξανά ολόκληρο το φύλλο στυλ σας χωρίς να ενημερώσετε κάθε στοιχείο με μη αυτόματο τρόπο.
Μειώνει την επανάληψη: Καθώς η βάση κωδίκων σας μεγαλώνει, θα διαπιστώσετε ότι έχετε παρόμοιες κλάσεις και στοιχεία. Αντί να γράφετε κώδικα CSS για κάθε στοιχείο, μπορείτε απλά να χρησιμοποιήσετε μεταβλητές CSS.
Κάνει τον κώδικά σας πιο διατηρήσιμο: Η συντήρηση του κώδικα είναι σημαντική εάν θέλετε η επιχείρησή σας να είναι συνεχιζόμενη.
Βελτιώνει την αναγνωσιμότητα: Ο σύγχρονος κόσμος ενθαρρύνει τη συνεργασία. Η χρήση μεταβλητών στο CSS οδηγεί σε μια συμπαγή βάση κώδικα που είναι αναγνώσιμη.
Εύκολη διατήρηση της συνέπειας: Οι μεταβλητές CSS μπορούν να σας βοηθήσουν να διατηρήσετε ένα συνεπές στυλ καθώς μεγαλώνει ο πηγαίος κώδικας ή αυξάνεται το μέγεθος της εφαρμογής. Για παράδειγμα, μπορείτε να δηλώσετε τα περιθώρια, το padding, το στυλ γραμματοσειράς και τα χρώματα που θα χρησιμοποιηθούν στα κουμπιά σας σε ολόκληρο τον ιστότοπο.

Ξεμπλοκάρετε τις εφαρμογές βιντεοκλήσεων στο Ντουμπάι και τα ΗΑΕ

Πώς να δηλώσετε μεταβλητές στο CSS

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

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

element {

--variable-name: value;

}

Για παράδειγμα, εάν θέλετε να εφαρμόσετε padding σε ολόκληρο το έγγραφό σας, μπορείτε να το δηλώσετε ως:

body { 

--padding: 1rem;

}

Πεδίο εφαρμογής μεταβλητών στο CSS

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

Τοπικές μεταβλητές

Οι τοπικές μεταβλητές προστίθενται σε συγκεκριμένους επιλογείς. Για παράδειγμα, μπορείτε να τα προσθέσετε σε ένα κουμπί. Αυτό είναι ένα παράδειγμα.

.button {

    --button-bg-color: #33ff4e;

  }

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

Καθολικές μεταβλητές

Αφού δηλώσετε, μπορείτε να χρησιμοποιήσετε καθολικές μεταβλητές με οποιοδήποτε στοιχείο στον κώδικά σας. Χρησιμοποιούμε την ψευδο-κλάση :root για να δηλώσουμε καθολικές μεταβλητές. Έτσι τα δηλώνουμε.

:root {

    --primary-color: grey;

    --secondary-color: orange;

    --font-weight: 700:

  }

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

Πώς να χρησιμοποιήσετε τις μεταβλητές στο CSS

Θα δημιουργήσουμε ένα έργο για σκοπούς επίδειξης και θα προσθέσουμε αρχεία index.html και styles.css.

Στο αρχείο index.html, μπορούμε να έχουμε ένα απλό div με δύο επικεφαλίδες (h1 και h2) και μια παράγραφο (p).

<div>

      <h1>Hello Front-end Dev!!!!</h1>

      <h2>This is how to use variables in CSS.</h2>

      <p> Keep scrolling</p>

    </div>

Στο αρχείο style.css, μπορούμε να έχουμε τα εξής.

:root {

    --primary-color: grey;

    --secondary-color: orange;

    --font-weight: 700:

    --font-size: 16px;

    --font-style: italic;

  }

  body {

    background-color: var(--primary-color);

    font-size: var(--font-size);

  }

  h1 {

    color: var(--secondary-color);

    font-style: var(--font-style)

  }

  h2 {

    font-weight: var(--font-weight)

  }

  p {

    font-size: calc(var(--font-size) * 1.2);

  }

Όταν αποδοθεί η ιστοσελίδα θα έχουμε τα εξής:

Από τον παραπάνω κώδικα, έχουμε δηλώσει καθολικές μεταβλητές στο στοιχείο :root. Πρέπει να χρησιμοποιήσουμε τη λέξη-κλειδί var για να χρησιμοποιήσουμε την καθολική μεταβλητή σε οποιοδήποτε από τα στοιχεία μας. Για παράδειγμα, για να εφαρμόσουμε το χρώμα φόντου που δηλώσαμε ως καθολική μεταβλητή, παρουσιάζουμε τον κώδικά μας ως εξής.

Τρόπος γρήγορης αναζήτησης κειμένου στην τρέχουσα ιστοσελίδα

φόντο-χρώμα: var(–κύριο χρώμα);

Ελέγξτε όλα τα άλλα στοιχεία και θα παρατηρήσετε μια τάση στον τρόπο με τον οποίο εφαρμόζεται η λέξη-κλειδί var.

Χρησιμοποιήστε μεταβλητές CSS με JavaScript

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

Μπορούμε να προσθέσουμε ένα στοιχείο ειδοποίησης στον υπάρχοντα κώδικά μας.

Κάντε κλικ σε εμένα!

Το νέο μας έγγραφο index.html θα είναι το εξής.

<div>

      <h1>Hello Front-end Dev!!!!</h1>

      <h2>This is how to use variables in CSS.</h2>

      <p> Keep scrolling</p>

    </div>

    <div class="alert">Click me!</div>

Μπορούμε να διαμορφώσουμε τη μεταβλητή μας. Προσθέστε τον ακόλουθο κώδικα στον υπάρχοντα κώδικα CSS σας.

.alert {

    --bg-color: red; /* Define local variable */

    background-color: var(--bg-color); /* Use the local variable for the background color */

    padding: 10px 20px;

    border-radius: 4px;

    font-weight: var(--font-weight); /*Use the global variable for font weight*/

    width: 50px;

  }

Έχουμε κάνει τα εξής.

Καθόρισε μια τοπική μεταβλητή μέσα στο στοιχείο ειδοποίησης.

–bg-χρώμα: κόκκινο

Χρησιμοποίησε τη λέξη-κλειδί var για πρόσβαση σε αυτήν την τοπική μεταβλητή.

χρώμα φόντου: var(–bg-color);

Χρησιμοποιήσαμε την καθολική μεταβλητή που δηλώσαμε νωρίτερα ως βάρος γραμματοσειράς μας.

font-weight: var(–font-weight);

Προσθήκη κώδικα JavaScript

Μπορούμε να κάνουμε το στοιχείο ειδοποίησης να ανταποκρίνεται. όταν κάνετε κλικ σε αυτό, εμφανίζεται ένα αναδυόμενο παράθυρο στο πρόγραμμα περιήγησής σας που λέει: “Έχουμε χρησιμοποιήσει μεταβλητές CSS με JavaScript!!!!”.

Μπορούμε να προσθέσουμε κώδικα JavaScript απευθείας στον κώδικα HTML περικλείοντάς τον χρησιμοποιώντας ετικέτες