使用任何CSS編譯器（Sass，Less）生成選擇器

所以我最近一直在使用CSS編譯器，但我不知道如何（或者如果有可能）動態生成選擇器片段。使用任何CSS編譯器（Sass，Less）生成選擇器

舉例來說，假設我想使混入得到

display: inline-block;

工作跨瀏覽器。我將不得不做風格，是的，但我必須做IE6/7選擇器黑客來讓他們在這些瀏覽器中工作。理想情況下，我正在尋找一種可以添加到元素中的方法，並有能力進行工作。有些人最近給了我這個解決方案：CSS compilers and converting IE hacks to conditional css

這將是很好的，以最小的方式實現，這將允許我指定它爲給定的元素，並在我的路上（例如在更少，你可以創建一個帶有樣式的類，將該類傳遞給另一個元素，並且該元素將繼承所有這些樣式。傳遞一個元素.inline-block會很好，並且它會創建支持IE6/7所需的樣式，而不必採取這樣的東西

_color: pink;

任何想法

編輯：例如爲好，怎麼可能我爲LESS做了一些類似clearfix的事情？（lesscss.org）？如果Sass只能做到這一點，那也是可以的。

來源

2010-04-30 xckpd7

因此，我在文檔中進行了一些挖掘，並且一些實驗和Sass（以我的安慰）支持這一點，儘管我不認爲LESS會這樣做（這就是爲什麼它會因Sass而下降）。

您可以使用＆符號作爲指向您在定義中使用的選擇器的指針，並且嵌套聲明中該＆符號的位置不必位於前面，您可以將選擇器放在前面。例如，您可以使用條件IE標記以不使用黑客的方式在相同樣式表中定位IE。下面以SCSS符號（但能很好地工作壓痕標記）：

@mixin inline-block { 

// Cross browser implementation of the inline-block attribute 

    display: inline-block; 
    body.ie6 & { display: inline; } 
    body.ie7 & { display: inline; } 

}

和所有你需要做的是放下這在任何你想要的：

#foo { @include inline-block; }

，它會產生/管理所有的inline-block的東西跨瀏覽器：

#foo { display: inline-block; } 
body.ie6 #foo { display: inline; } 
body.ie7 #foo { display: inline; }

處理跨瀏覽器的問題，沒有更多的不得不應付管理2個不同的文件ST的繁瑣方法語義的方式yles（對我來說是asinine），沒有更多的代碼塊eyesores。

編輯：當然這個功能是在舊文檔中陳述的，而不是在新的，這就是爲什麼我找不到它。

來源

2010-05-01 02:54:21 xckpd7

一個跨瀏覽器的實現inline-block的是由指南針提供的，建在上海社會科學院的頂部框架：

http://compass-style.org/docs/reference/compass/css3/inline_block/#mixin-inline-block-scss

來源

2010-05-10 17:39:05 chriseppstein

http://jsfiddle.net/zsitro/G74pT/

在這裏，你看到麪包車內聯塊的跨瀏覽器解決方案。簡單而簡短。

上面的例子不會給IE中元素的佈局。例如，您需要zoom。

來源

2012-03-02 08:54:44 zsitro

使用任何CSS編譯器（Sass，Less）生成選擇器

回答

相關問題