1

So I've recently been playing around with CSS compilers, but I have no idea how (or if it's possible) to dynamically generate pieces of a selector.

For instance, let's say I wanted to make mixins to get

display: inline-block;

to work cross browser. I would have to do the styles, yeah, but I would have to do the IE6/7 selector hacks to get them to work in those browsers too. Ideally I'm looking for a one off thing to add to an element and have the ability for that to work. Some kind person recently gave me this solution: CSS compilers and converting IE hacks to conditional css

and it would be nice to implement that in a minimal way that would allow me to specify it for a given element and be on my way (for instance in Less, you can create a class with styles, pass that class to another element, and that element will inherit all of those styles. It would be nice to pass an element .inline-block; and it create the styles needed to support IE6/7 without having to resort to stuff like

_color: pink;

Any ideas?

EDIT: for instance as well, how could I do something like clearfix for LESS? (lesscss.org)? If Sass can only do it then that will work too.

4

3 に答える 3

3

だから私はドキュメンテーションを掘り下げ、いくつかの実験を行いました.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; }

そして、すべてのインラインブロックのものをクロスブラウザで生成/管理します:

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

クロスブラウザーの問題をセマンティックに処理する方法。スタイル用に 2 つの異なるファイルを管理する面倒な方法 (私には馬鹿げています) に対処する必要がなくなり、コード ブロックの目障りもなくなりました。

編集：もちろん、その機能は新しいドキュメントではなく古いドキュメントに記載されていたため、見つけることができませんでした。

于 2010-05-01T02:54:21.393 に答える
0

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

ここでは、インライン ブロックのクロスブラウザー ソリューションをご覧いただけます。シンプルで短い。

上記の例は、IE の要素にレイアウトを与えません。zoomたとえば、必要があります。

于 2012-03-02T08:54:44.880 に答える
0

inline-block のクロスブラウザー実装は、sass の上に構築されたフレームワークである compass によって提供されます。

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

于 2010-05-10T17:39:05.260 に答える