mixin出力を減らす

Question

私はextendのメディアクエリーを探していますが、extendは正しいことではありません。

私はそれぞれについてクラスとメディアクエリを作成するはずのミックスインを持っています。残念ながら、私の現在のmixinは、あなたが特定の問題を引き起こすと予想するように、それらを1つずつ作成します。

My current mixins次のよう

//create two classes and their media queries 
._responsive-margins-top(1, 6px); 
._responsive-margins-top(7, 60px); 

//globals 
@screen-xs: 480px; 
@screen-sm: 768px; 
@screen-md: 992px; 
@screen-lg: 1200px; 

//////////////////////////////////////| MARGINGS MIXIN 
/* 
* MARGINS-TOP 
* 
* @param @el   {string} Element name appendix, We use numbers 
* @param @value  {margin} Space for this margin, We use px 
*/ 
._responsive-margins-top(@el, @value) { 
    @xs: ~"top-margin@{el}-xs"; 
    @sm: ~"top-margin@{el}-sm"; 
    @md: ~"top-margin@{el}-md"; 
    @lg: ~"top-margin@{el}-lg"; 

    .@{xs}, 
    .@{sm}, 
    .@{md}, 
    .@{lg} { 
     &:extend(.no-top-margin-xs all); 
    } 

    //////////////////////////////////////| XS 
    .@{xs} { 
     margin-top: @value; 
    } 

    //////////////////////////////////////| SM 
    @media (min-width: @screen-sm) { 
     .@{sm} { 
      margin-top: @value; 
     } 
    } 

    //////////////////////////////////////| MD 
    @media (min-width: @screen-md) { 
     .@{md} { 
      margin-top: @value; 
     } 
    } 

    //////////////////////////////////////| LG 
    @media (min-width: @screen-lg) { 
     .@{lg} { 
      margin-top: @value; 
     } 
    } 
} 

本の出力である：ただし

.top-margin1-xs { 
    margin-top: 6px; 
} 
@media (min-width: 768px) { 
    .top-margin1-sm { 
     margin-top: 6px; 
    } 
} 
@media (min-width: 992px) { 
    .top-margin1-md { 
     margin-top: 6px; 
    } 
} 
@media (min-width: 1200px) { 
    .top-margin1-lg { 
     margin-top: 6px; 
    } 
} 
.top-margin7-xs { 
    margin-top: 60px; 
} 
@media (min-width: 768px) { 
    .top-margin7-sm { 
     margin-top: 60px; 
    } 
} 
@media (min-width: 992px) { 
    .top-margin7-md { 
     margin-top: 60px; 
    } 
} 
@media (min-width: 1200px) { 
    .top-margin7-lg { 
     margin-top: 60px; 
    } 
} 

what I need is this

：

.top-margin1-xs { 
    margin-top: 6px; 
} 
.top-margin7-xs { 
    margin-top: 60px; 
} 
@media (min-width: 768px) { 
    .top-margin1-sm { 
     margin-top: 6px; 
    } 
    .top-margin7-sm { 
     margin-top: 60px; 
    } 
} 
@media (min-width: 992px) { 
    .top-margin1-md { 
     margin-top: 6px; 
    } 
    .top-margin7-md { 
     margin-top: 60px; 
    } 
} 
@media (min-width: 1200px) { 
    .top-margin1-lg { 
     margin-top: 6px; 
    } 
    .top-margin7-lg { 
     margin-top: 60px; 
    } 
} 

任意の助けを理解されたいです。私はこれがLessで可能でないかもしれないと思う？

Answer 1

オプション1：（あなたはすべてのクラスを知っていれば）

それは確かに複雑ですが、あなたが少ないループを使用してこれを達成することができます。重要な部分は、複数の引数（すなわち、@el、@valueのペア）を受け入れるように親mixinを変更し、引数をループして必要な出力を生成する新しいmixinを追加しています。

._responsive-margins-top(1, 6px;7, 60px); /* send all el + value pairs as argument */ 

@screen-xs: 480px; 
@screen-sm: 768px; 
@screen-md: 992px; 
@screen-lg: 1200px; 

/* parent mixin supporting multiple args */ 
._responsive-margins-top(@args...) { 

    .loop-args(length(@args), xs); /* generate classes for xs size */ 

    @media (min-width: @screen-sm) { 
    /* call the loop within media query so that all classes are generated at one go */ 
    .loop-args(length(@args), sm); /* generate classes for sm size */ 
    } 

    @media (min-width: @screen-md) { 
    .loop-args(length(@args), md); /* generate classes for md size */ 
    } 

    @media (min-width: @screen-lg) { 
    .loop-args(length(@args), lg); /* generate classes for lg size */ 
    } 
} 

/* loop mixin for iterating through el + value pairs */ 
.loop-args(@index, @size) when (@index > 0){ 
    @arg: extract(@args, @index); /* extract each el + value pair based on iteration index */ 
    @el: extract(@arg, 1); /* extract 1st value in el + value pair*/ 
    @value: extract(@arg, 2); /* extract 2nd value in el + value pair */ 
    @sel: ~"top-margin@{el}-@{size}"; /* form selector by concatenating text + el + size */ 

    .@{sel} {margin-top: @value;} 
    .loop-args(@index - 1, @size); /* call the next iteration */ 
} 

---

オプション2：

以下の私の好みのために少しも冗長なようだ（後で編集ベースファイルO/Wクラスを追加する必要がある場合）が、オプションであることをあなたのユースケースに使用することができます。それは、親反応マージンmixin内の共通ミックスイン名にルールを書き込んだ後、メディアクエリの下でそれらを呼び出すことを含む。

フレームワーク（base.less）：

._responsive-margins-top(1, 6px); 
._responsive-margins-top(7, 60px); 

@screen-xs: 480px; 
@screen-sm: 768px; 
@screen-md: 992px; 
@screen-lg: 1200px; 

._responsive-margins-top(@el, @value) { 
    @xs: ~"top-margin@{el}-xs"; 
    @sm: ~"top-margin@{el}-sm"; 
    @md: ~"top-margin@{el}-md"; 
    @lg: ~"top-margin@{el}-lg"; 

    .xs() { 
    .@{xs} {margin-top: @value;} 
    } 
    .sm() { 
    .@{sm} {margin-top: @value;} 
    } 
    .md() { 
    .@{md} {margin-top: @value;} 
    } 
    .lg() { 
    .@{lg} {margin-top: @value;} 
    } 
} 

& {.xs();} 
@media (min-width: @screen-sm) {.sm();} 
@media (min-width: @screen-md) {.md();} 
@media (min-width: @screen-lg) {.lg();} 

アドオン：（フロントエンド開発者から余分なクラスとファイル（複数可））

@import "base.less"; /* import the base */ 

._responsive-margins-top(9, 90px); /* call the margins mixin */