Переписать цикл с SASS на LESS(или показать подобный) | Forum

24 Feb. 2016, 17:57

iNerV

Posts: 124

24 Feb. 2016, 17:57

iNerV

Posts: 124

Знатоки SASS/LESS помогите, нужно переписать или показать примерно тоже самое, что ниже, только на LESS:

$red: (
  "lighten-5":  #FFEBEE,
  "lighten-4":  #FFCDD2,
  "base":       #F44336
);

$pink: (
  "lighten-5":  #fce4ec,
  "lighten-4":  #f8bbd0,
  "base":       #e91e63
);

$colors: (
  "red": $red,
  "pink": $pink,

@each $color_name, $color in $colors {
  @each $color_type, $color_value in $color {
    @if $color_type == "base" {
      .#{$color_name} {
        background-color: $color_value !important;
      }
      .#{$color_name}-text {
        color: $color_value !important;
      }
    }
    @else {
      .#{$color_name}.#{$color_type} {
        background-color: $color_value !important;
      }
      .#{$color_name}-text.text-#{$color_type} {
        color: $color_value !important;
      }
    }
  }
}

битый час пытаюсь осознать как сделать такое на LESS, с одномерным массивом - получается, а так - нет ;( плюсег в карму обеспечен ;)

Answer | 0

24 Feb. 2016, 18:43 iNerV Posts: 124	24 Feb. 2016, 18:43 iNerV Posts: 124 или хотя бы ответьте на вопрос: это вообще реально сделать на LESS, или он такое не может?
	Answer \| 0

24 Feb. 2016, 19:01 alerion Posts: 5750 Location: Львов	24 Feb. 2016, 19:01 alerion Posts: 5750 Location: Львов Вы форумом ошиблись. Фиксю баги по трейсбеку.
	Answer \| 0

25 Feb. 2016, 15:07 N.E.M Posts: 1262	25 Feb. 2016, 15:07 N.E.M Posts: 1262 Вообще реально, но лучше не заморачиваться и оставить эту часть на sass.
	Answer \| 0

26 Feb. 2016, 18:28

iNerV

Posts: 124

26 Feb. 2016, 18:28

iNerV

Posts: 124

Я ведь сделал это, всего-то сутки на это потребовались..

нужно сделать два миксина:

if.less:

.if(...) {}
.if(@condition, @callback...) when (@condition) {
  @callback();
  .then();
}
.if(@condition, @callback...) when not(@condition) {
  .else(...){};
  @callback();
  @one:    extract(@condition, 1);
  @two:    extract(@condition, 3);
  @operator: extract(@condition, 2);
  .return(lt) {
    & when (@one < @two) {
      .if(true, @callback);
    }
    & when not (@one < @two) {
      .else();
    }
  }
  .return(lte) {
    & when (@one <= @two) {
      .if(true, @callback);
    }
    & when not(@one <= @two) {
      .else();
    }
  }
  .return(gt) {
    & when (@one > @two) {
      .if(true, @callback);
    }
    & when not(@one > @two) {
      .else();
    }
  }
  .return(gte) {
    & when (@one >= @two) {
      .if(true, @callback);
    }
    & when not(@one >= @two) {
      .else();
    }
  }
  .return(eq) {
    & when (@one = @two) {
      .if(true, @callback);
    }
    & when not(@one = @two) {
      .else();
    }
  }
  .return(neq) {
    & when not(@one = @two) {
      .if(true, @callback);
    }
    & when (@one = @two) {
      .else();
    }
  }
  .return(...) when (default()) {
    .else();
  }
  .return(@operator);
}

each.less:

.each(@list, @callback) when (default()) {
  .return(@i, @callback) when (@i > 1) {
    .return((@i - 1), @callback)
  }
  .return(@i, @callback) {
    .callback(...) when (default()) {};
   @callback();
    .callback(extract(@list, @i), @i);
  }
  .return(length(@list), @callback);
}

а вот так будет выглядеть основной код:

@import "each";
@import "if";

@red: 
  "lighten-5":  #FFEBEE,
  "lighten-4":  #FFCDD2,
  "base":       #F44336;

@pink: 
  "lighten-5":  #fce4ec,
  "lighten-4":  #f8bbd0,
  "base":       #e91e63;

@colors: 
  "red": $red,
  "pink": $pink;

.each(@colors, {.callback(@color, @index) {
  @main_color: extract(@color, 1);
  @color_type: extract(@color, 1);
  @color_value: extract(@color, 2);
    .each(@color_value, { .callback(@color2, @index) {
      @color_type2: extract(@color2, 1);
      @color_value2: extract(@color2, 2);

      .if(@color_type2 eq base, {
        .then(){
          .@{main_color} {
            background-color: @color_value2 !important;
          }
          .@{main_color}-text {
            color: @color_value2 !important;
          }
        }
        .else(){
          .@{main_color} {
            &.@{color_type2} {
              background-color: @color_value2 !important;
            }
            &.@{color_type2}-text {
              color: @color_value2 !important;
            }
          }
        }
      });
    }});
}});

Answer | 0