如何在LESS CSS中編寫字體？

Question

我有點泡菜。 我大約兩天前才拿起WinLess（我正在使用的編譯器），我才隱約地學到了LESS的基礎。 無論如何，我在這段代碼上遇到了問題：

// Font
    @verdana: font-family:"verdana";
    @sans: font-family:"sans-serif";

當我對此進行編譯時，會收到以下消息：

ParseError：第4行第3列中的輸入無法識別：

3 // Font
4 @verdana: font-family:"verdana";
5 @sans: font-famlit:"sans-serif";

有人可以幫我嗎？ 謝謝！

Answer 1

對於LESS 1.7+

他們現在添加了規則集 ，其工作方式如下：

@verdana: {font-family:"verdana"};

.myClass {
    @verdana();
}

請注意語法 ：傳遞一組帶括號的{}屬性，並在變量名后用括號()進行訪問，就像混合。 如您所見，它的功能也很像mixin（類似於lucian的答案），但是它具有可以作為參數傳遞的附加值，因此這是可能的：

減

@verdana: {font-family:"verdana"};

.myMix(@font) {
    @font();
}

.test {
  .myMix(@verdana);
}

CSS輸出

.test {
  font-family: "verdana";
}

Answer 2

您可以這樣聲明： .myfont{ font-family:"some family, some generic family"} ，然后像這樣使用它： div{ .myfont; } div{ .myfont; }

Answer 3

我只知道這種方式：

@variable_name: 'individual_font_name', Verdana, sans-serif;

一個帶有名稱的字體變量，一個字體名稱，例如“ My_Verdana”和主字體，第二個作為主字體故障的示例。

希望對您有幫助，問候。