LESS/CSS/Mixinsを使用し、クラスの値を渡す

Question

私は変換を使用して、それに回転を追加したいが、失敗を得るためにこの小さなスニペットを持っています...これは間違っていますか？私はこの間違ったことをする場合は、私は新しいので、ごめんなさい。

CSS：

.class { 
    &::before { 
     .transform(.rotate(@deg: 45deg)); 
    } 
    &::after { 
     .transform(.rotate(@deg: -45deg)); 
    } 
} 

MIXIN：あなたは上記の設定のものを持っている

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

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

Answer 1

そうな方法、あなたは基本的に変換ミックスインに全体の回転のミックスインを渡しています。それは実際に解析する方法を知っていれば、かなり歪んだコードに終わるでしょう。代わりに、トップミックスインを使用して、それに回転を渡すことができます。これはあなたが複数のトランスフォームを使用できるようにするために、より良いルートです（これはかなり一般的な使用法です）。ここでは例です：

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

.class { 
    &::before { 
    .transform(rotate(45deg)); 
    } 
} 

そして、あなたは、将来の時点で回転と平行移動を呼び出すしたい場合、それは同様に、翻訳の追加と同じくらい簡単だろう。

.class { 
    &::before { 
    .transform(translateY(-50%) rotate(45deg)); 
    } 
}