Карты и темы

Question

Я новичок в использовании прекомпиляторов CSS и начал использовать Less.Я нашел код Sass для добавления тем в мое веб-приложение, и оно прекрасно работает.

https://codepen.io/dmitriy_borodiy/pen/RKzwJp

Я пытаюсь преобразовать его в Less и не могу переписать его.Я просмотрел меньше документации, но мне жаль говорить, что я даже не могу создать многоуровневую переменную темы.

Переменная sass выглядит следующим образом:

$themes: (
  light: (
    backgroundColor: white,
    textColor: #408bbd
  ),
  dark: (
    backgroundColor: #222,
    textColor: #ddd
  ),
);

Ниже преобразование совершенно неверно, но я попробовал вот что:

@set: {
  light: {
    backgroundColor: white,
    textColor: #408bbd
  },
  dark: {
    backgroundColor: #222,
    textColor: #ddd
  },
}

РЕДАКТИРОВАТЬ:

Пример того, что я пытаюсь достичь:

.theme(key) {  
    return all outcomes using @themes variable.  
}  

div {  
    background: .theme(divBackgroundColor)  
}   
  
it should return the following css :  
.light-theme div{  
    background: white  
}   
.dark-theme div{  
    background:grey  
}  

Любая помощь приветствуется.

Answer 1

Вопрос вроде этого ...

---

В любом случае, чтобы не оставить вопрос без ответа: Чтобы написать похожий код в Less, вам необходимо ознакомиться со следующими функциями:

• Карты
• Наборы правил в качестве значений / параметров
• плюс все типичные базовые возможности языка, такие как переменные, функции, область действия и т. Д. И т. Д., А также последние (, но не по значению * ) Mixins .

Ответ на вопрос о том, как сделать что-то вроде background: .theme(backgroundColor), чтобы сделать то, что вам нужно, потребует объяснения всего этого с нуля (то есть превращение ответа в книгу или очень простой учебник). Технически, вы не должны упускать из виду, что код в связанном фрагменте является более сложным, чем просто background: .theme(backgroundColor).

---

А вот (минималистичный) менее эквивалентный фрагмент кода, который вы указали в CodePen (Там нет комментариев. Они бессмысленны, так как в них не происходит ничего волшебного - чтобы понять, что это делает, вам просто нужно ознакомиться с функциями языков, которые я перечислил выше):

@theme: {
    @light: {
        backgroundColor: white;
        textColor: #408bbd;
    }
    @dark: {
        backgroundColor: #222;
        textColor: #ddd;
    }
}

// ....................................
// usage:

.themify({
    div {  
        background: .theme[backgroundColor]; 
    }

    span {  
        color: .theme[textColor]; 
    }

    // etc.
}); 

// ....................................
// impl.:

.themify(@style) {
    each(@theme, {
        @name: replace(@key, '@', '.');
        .theme() {@value()}
        @{name}-theme {@style()}      
    });
}

---

Для других возможных методов и решений, связанных с подобными «тематическими» сценариями использования, см. Также:

• Переменные, основанные на классе предков
• Как тематизировать в ...
• и другие Q / Как связаны / там ссылки.

Answer 2

Попробуйте этот код

@light: #f9f9f9;
@dark: #333333;
.theme(@theme: @color, @background: @background) {
  color: @theme;
  background: @background;
  a {
    color: @theme;
  }
}

.light-theme {
  .theme(@theme: @light, @background: @dark);
}

.dark-theme {
  .theme(@theme: @dark, @background: @light)
}

<div class="light-theme">
  <a href="">Light Theme</a><br> Light Theme
</div>

<div class="dark-theme">
  <a href="">Light Theme</a><br> Light Theme
</div>