К содержанию

Μεταβλητές μέσα σε επιλογείς στο LESS

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

styles.less@var: div;

Ας κάνουμε εισαγωγή αυτής της μεταβλητής σε έναν επιλογέα. Ας εξετάσουμε διάφορες περιπτώσεις.

Παράδειγμα

Ας κάνουμε εισαγωγή της μεταβλητής μας ως επιλογέα:

styles.less@{var} {
  font-size: 20px;
}

Αποτέλεσμα μεταγλώττισης:

styles.cssdiv {
  font-size: 20px;
}

Παράδειγμα

Ας υποθέσουμε τώρα ότι η μεταβλητή μας περιέχει μέρος ενός επιλογέα:

styles.lessmain @{var} {
  font-size: 20px;
}

Αποτέλεσμα μεταγλώττισης:

styles.cssmain div {
  font-size: 20px;
}

Παράδειγμα

Ας υποθέσουμε τώρα ότι λέμε ότι στη μεταβλητή μας δεν περιέχεται το όνομα μιας ετικέτας, αλλά το id της. Ας προσθέσουμε ένα hash μπροστά από το όνομα της μεταβλητής:

styles.less#@{var} {
  font-size: 20px;
}

Αποτέλεσμα μεταγλώττισης:

styles.css#div {
  font-size: 20px;
}

Παράδειγμα

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

styles.less.@{var} {
  font-size: 20px;
}

Αποτέλεσμα μεταγλώττισης:

styles.css.div {
  font-size: 20px;
}

Πρακτικές Ασκήσεις

Задание 1

Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:

styles.less@var: ul;

@{var} {
  font-size: 20px;
}

Задание 2

Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:

styles.less@var: ul;

div @{var} {
  font-size: 20px;
}

Задание 3

Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:

styles.less@var: ul;

div @{var} {
  font-size: 20px;
}

Задание 4

Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:

styles.less@var: ul;

@{var} li {
  font-size: 20px;
}

Задание 5

Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:

styles.less@var: list;

.@{var} {
  font-size: 20px;
}

Задание 6

Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:

styles.less@var: list;

#@{var} li {
  font-size: 20px;
}

Задание 7

Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:

styles.less@var: list;

.@{var} li {
  font-size: 20px;
}

Задание 8

Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:

styles.less@var: list;

ul.@{var} li {
  font-size: 20px;
}

Задание 9

Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:

styles.less@var: list;

ul.@{var} li {
  font-size: 20px;
}

Задание 10

Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:

styles.less@var: .block;

ul@{var} {
  font-size: 20px;
}

Задание 11

Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:

styles.less@var: .block;

ul@{var} li {
  font-size: 20px;
}

Задание 12

Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:

styles.less@var: a;

@{var}:hover {
  text-decoration: none;
}

Задание 13

Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:

styles.less@var1: div;
@var2: a;

@{var1} @{var2}:hover {
  text-decoration: none;
}

Задание 14

Πείτε ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:

styles.less@var1: block1;
@var2: block2;

.@{var1}.@{var2} {
  font-size: 20px;
}