2

私は初めてですLESS CSS。

私のミッドLESS CSSコードで。ほんの一例です。

@block : body;
@name  : color;
@value : #99CC00;

@block
{
    @name : @value
}

この出力が欲しい

body
{
    color : #99CC00
}

可能ですか？可能であれば、LESS CSSコードを教えてください。

これは私の問題です

.browser-fix(@key,@value)
{
    -webkit-@key: @value;
    -moz-@key: @value;
    -ms-@key: @value;
    -o-@key: @value;
    @key: @value;
}

p
{
    .browser-fix(box-shadow,1px 1px 5px rgba(0,0,0,0.2) inset);
    .browser-fix(transform,rotate(30deg));
}
4

4 に答える 4

4

変数を使用して割り当ての左側を定義することは、LESS では不可能であると確信しています。

しかし、パラメトリック mixinとセレクター補間を使用して、やろうとしていることの少なくとも半分を達成することができます。

@block: body;

.color-mixin(@value) {
    color: @value;
}

@{block} {
    .color-mixin(#99CC00);
}

編集：

あなたの問題に対処するために、ブラウザ固有の属性は、不透明度の設定など、指定したパターンと常に一致するとは限らないため、ブラウザ固有の属性ごとに個別のミックスインを個人的に行います。個別のミックスインも読みやすくなっています。

.box-shadow(@shadow) {
    -webkit-box-shadow: @shadow;
    -moz-box-shadow: @shadow;
    box-shadow: @shadow;
}

.rotate(@degrees) {
    -webkit-transform: rotate(@degrees);
    -moz-transform: rotate(@degrees);
    -ms-transform: rotate(@degrees);
    -o-transform: rotate(@degrees);
    transform: rotate(@degrees);
}

// Example of an attribute that does not match the pattern.
.opacity(@opacity) {
    opacity: @opacity / 100;
    filter: ~"alpha(opacity=@{opacity})";
}

p {
    .box-shadow(1px 1px 5px rgba(0,0,0,0.2) inset);
    .rotate(30deg);
}
于 2012-12-07T08:53:26.630 に答える
2

この単純な Less CSS mixin を使用してください

.vender-fix(@name; @value) {
  -webkit-@{name}: @value;
  -moz-@{name}: @value;
  -ms-@{name}: @value;
  -o-@{name}: @value;
  @{name}: @value;
}

.example {
  .vender-fix(transition, width 300ms);
}

出力：

.example {
  -webkit-transition: width 300ms;
  -moz-transition: width 300ms;
  -ms-transition: width 300ms;
  -o-transition: width 300ms;
  transition: width 300ms;
}
于 2014-04-08T06:43:36.407 に答える
1

mixins http://lesscss.org/#-mixins in less の接頭辞について読んでから、次のようにすることができます。

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
于 2012-12-07T08:52:25.500 に答える