0

CSS3属性セレクターに関連することをCSSの少ないものでやろうとしています...

私がやろうとしているのは、コードで使用されている次のクラスがあることです:-

*[class^="ui-icon-"] { 
    /*My Styles*/
}

それは、そのスタイルがその後に定義された別のクラスに実装されるように実装する必要があります。

/*Less*/
.another-class {
   *[class^="ui-icon-"];
}

/*Output CSS*/
.another-class {
   /*My Styles*/
}

ここで、これは現在私のウェブページにエラーが表示されていますが、解決策はありますか?

4

3 に答える 3

3

LESS 1.4 のもう 1 つの方法

マーティンの答えはとても良いです。完全を期すために、LESS 1.4で 2 番目のセレクターを拡張する別の方法があります。これにより、最初に属性セレクターでスタイルを定義できます。

*[class^="ui-icon-"] { 
    /*My Styles*/
}

.another-class {
  &:extend(*[class^='ui-icon-'] all);
}

次に、最終的な CSS 出力のために次のようにグループ化します。

*[class^="ui-icon-"],
.another-class {
  /*My Styles*/
}

もちろん、定義方法を逆にすることもできます。

.another-class  { 
    /*My Styles*/
}

*[class^="ui-icon-"] {
  &:extend(.another-class all);
}

同様のグループ化された出力を与える：

.another-class,
*[class^="ui-icon-"] {
  /*My Styles*/
}

必要な他のスタイルを追加することもできます:

*[class^="ui-icon-"] { 
    /*My Styles*/
}

.another-class {
  &:extend(*[class^='ui-icon-'] all);
  /* Other Styles for another-class */
}

この出力を与える：

*[class^="ui-icon-"],
.another-class {
  /*My Styles*/
}
.another-class {
  /* Other Styles for another-class */
}
于 2013-05-28T13:48:20.547 に答える
2

このように属性セレクターを呼び出そうとすると、2 つの問題があります。

  • LESS のミックスイン (再利用可能なルール) は、.または#で開始する必要があります。
  • "、、および(エスケープされていない場合)=などの文字を含めることはできません。*^

したがって、1つの解決策は、laatが彼の回答で提案するもので、ルールに追加のセレクターを追加し、後でミックスインとして呼び出すことができます。もう 1 つの方法は、.another-class(このセレクターは有効な mixin 名であるため) ですべてのプロパティを定義し、次のように、属性セレクターを使用してルール内からこれを呼び出すことです。

*[class^="ui-icon-"] {
    .another-class;
}

.another-class {
    /*My Styles*/
}

または、一連のプロパティを複数のルールに追加するさらに別の方法は、パラメトリック mixin を使用することです。このような：

.mystyles(){/*My Styles*/}

*[class^="ui-icon-"] {
    .mystyles;
}

.another-class {
    .mystyles;
}

どちらの例でも、レンダリングされた CSS は次のようになります。

*[class^="ui-icon-"] {
  /*My Styles*/
}
.another-class {
  /*My Styles*/
}
于 2013-05-28T09:06:07.877 に答える
1

実際にどのように行うべきかはわかりませんが、これは私にとってはうまくいきます。

._ui-icon, *[class^="ui-icon-"] { 
    color: black;
}

.another-class {
   ._ui-icon;
}
于 2013-05-28T08:06:49.103 に答える