Definiowanie zmiennych zmiennych przy użyciu LESS CSS
Powiedzmy, że mam trzy oddzielne schematy kolorów, które są używane na różnych stronach witryny. Każdy kolor ma zdefiniowany odcień jasny, średni i ciemny, a schemat kolorów jest zdefiniowany przez klasę w ciele. Załóżmy, że domyślny jest „czerwony” schemat kolorów. Lubię to:
Definicje kolorów:
@red-lt: #121;
@red-md: #232;
@red-dk: #343;
@green-lt: #454;
@green-md: #565;
@green-dk: #676;
@blue-lt: #787;
@blue-md: #898;
@blue-dk: #909;
Podstawowy przykład domyślnego stylu
body { background-color: @red-dk;
#container { background-color: @red-md;
p { color: @red-dk; }
}
}
Przykład stylu innego schematu kolorów
body.green { background-color: @green-dk;
#container { background-color: @green-md;
p { color: @green-dk; }
}
}
Chciałbym używać zmiennych, dzięki czemu nie muszę ponownie zapisywać wszystkich odmian kolorów dla każdego schematu, dzięki czemu mogę po prostu napisać coś takiego:
body.[color-var] { background-color: @[color-var]-dk;
#container { background-color: @[color-var]-md;
p { color: @[color-var]-dk; }
}
}
… Ale nie mogę oprzeć głowy, jak to osiągnąć. Wsparcie…?