Μεταβλητές μέσα σε επιλογείς στο LESS
Οι μεταβλητές μπορούν να χρησιμοποιηθούν και μέσα σε επιλογείς.
Ωστόσο, για αυτό χρειάζεται να χρησιμοποιήσετε
ελαφρώς διαφορετική σύνταξη εισαγωγής της μεταβλητής:
μετά το @ το όνομα της μεταβλητής πρέπει να περικλείεται
σε άγκιστρα. Ας δούμε σε παραδείγματα.
Ας υποθέσουμε ότι έχουμε την ακόλουθη μεταβλητή:
@var: div;
Ας κάνουμε εισαγωγή αυτής της μεταβλητής σε έναν επιλογέα. Ας εξετάσουμε διάφορες περιπτώσεις.
Παράδειγμα
Ας κάνουμε εισαγωγή της μεταβλητής μας ως επιλογέα:
@{var} {
font-size: 20px;
}
Αποτέλεσμα μεταγλώττισης:
div {
font-size: 20px;
}
Παράδειγμα
Ας υποθέσουμε τώρα ότι η μεταβλητή μας περιέχει μέρος ενός επιλογέα:
main @{var} {
font-size: 20px;
}
Αποτέλεσμα μεταγλώττισης:
main div {
font-size: 20px;
}
Παράδειγμα
Ας υποθέσουμε τώρα ότι λέμε ότι στη μεταβλητή μας
δεν περιέχεται το όνομα μιας ετικέτας, αλλά το id της.
Ας προσθέσουμε ένα hash μπροστά από το όνομα της μεταβλητής:
#@{var} {
font-size: 20px;
}
Αποτέλεσμα μεταγλώττισης:
#div {
font-size: 20px;
}
Παράδειγμα
Ας υποθέσουμε τώρα ότι λέμε ότι στη μεταβλητή μας δεν περιέχεται το όνομα μιας ετικέτας, αλλά η κλάση της. Ας προσθέσουμε μια τελεία μπροστά από το όνομα της μεταβλητής:
.@{var} {
font-size: 20px;
}
Αποτέλεσμα μεταγλώττισης:
.div {
font-size: 20px;
}
Πρακτικές Ασκήσεις
Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
@var: ul;
@{var} {
font-size: 20px;
}
Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
@var: ul;
div @{var} {
font-size: 20px;
}
Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
@var: ul;
div @{var} {
font-size: 20px;
}
Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
@var: ul;
@{var} li {
font-size: 20px;
}
Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
@var: list;
.@{var} {
font-size: 20px;
}
Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
@var: list;
#@{var} li {
font-size: 20px;
}
Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
@var: list;
.@{var} li {
font-size: 20px;
}
Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
@var: .block;
ul@{var} {
font-size: 20px;
}
Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
@var: a;
@{var}:hover {
text-decoration: none;
}
Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
