LESS CSS：選擇器替代？

這是現有的一般CSS規則（原始文件）：LESS CSS：選擇器替代？

.caption-top { 
    color: red; 
}

這是示意性的，因爲在現實生活中的情況下，我需要.caption-top選擇成爲別的東西，要看具體情況。但我想使用一個變量而不是改變選擇器的所有事件。例如，在一種情況下，它應該變成.field-name-field-caption-top。所以我這樣做（封裝文件）：

@caption-top: .field-name-field-caption-top; 
@caption-top { 
    color: red; 
}

這會產生一個都不能少解析錯誤。是否有另一種方法來建立一個規則來替代選擇器？因此，對於上面的例子中，該規則將最後是這樣的：

.field-name-field-caption-top { 
    color: red; 
}

其他信息

整點是不觸及原有的css文件，因爲它來自外界和意志被覆蓋，而是包裝它，並告訴更少如何用特定主題中使用的類替換現有的類。如果無法實現，則可接受的解決方案是以自動方式更改原始文件，例如，將所有出現的「.caption」替換爲「@caption」（我在上面的代碼示例中提到過）或者在開始時進行導入等等。然後使用一個包裝器Less文件（瞭解主題實現）來指定哪些類需要被什麼取代。

來源

2012-04-17 camcam

這不是[mixins]（http://lesscss.org/#-mixins）的用途嗎？ – cchana 2012-04-17 11:31:29

我不知道。但是當你去[在線較少工具]（http://leafo.net/lessphp/#demo）並輸入上面的代碼時，會出現致命的解析錯誤。 – camcam 2012-04-18 12:12:46

看起來混入是你所需要的：

.caption-top { 
    color: red; 
} 
.field-name-field-caption-top { 
    .caption-top 
}

可以定義，使用與否，則可以一次又一次的其他選擇中引用的類。你甚至可以用新的方式將它們結合起來，從而延長了什麼CSS的原始塊會做：

.field-name-field-caption-bottom { 
    font-size: 3em; 
    .caption-top 
}

給它的編譯器一展身手！

來源

2012-04-18 13:12:50 cchana

您可以使用轉義來實現這一目標：

@selector: '.myclass'; 

(~'@{selector}') { 
    color: red; 
}

但是你不能做到這一點：

(~'@{selector}') .another { 
    color: red; 
}

爲實現上述您需要改變變量

@selector: '.myclass .another';

來源

2012-04-24 16:23:35

你怎麼也可以使用'＆'？ '＆（〜'@ {selector}'）。另一個{}'不起作用。 – 2012-10-05 16:34:30

您需要生成一個生成所需CSS的兩個參數的函數：

.generator(@fieldName, @fieldCaption) { 
    [email protected]{fieldName}[email protected]{fieldCaption}-top { 
    color: red; 
    } 
} 
.generator(foo, bar);

（隨意嘗試這在online less compiler）

這段代碼產生用於與名稱「foo」和標題「欄中的」元件所需的CSS。您只需使用不同參數撥打.generator函數的更多調用即可獲得您所需的內容。

如果這不符合您的需要，請提供一個您想要的CSS輸出的額外示例。

來源

2013-06-05 13:51:19

LESS CSS：選擇器替代？

回答

相關問題