Как бы я получить $ значения, которые глубоко внутри списка в SCSS? - PullRequest
Новая
       34

Как бы я получить $ значения, которые глубоко внутри списка в SCSS?

0 голосов
/ 05 декабря 2018

Я хочу вызвать все значения из каждого $lists определенного $map (* в данном случае $value-tree) и выполнить для создания медиазапросов для этих номеров.

$map что явыглядит следующим образом: 

$breakpoints: (
    564
    768
    992
    1200
);

$value-tree: (
    width: (
        80%, 70%, 400px, 500px
    ),
    font-size: (
        20px, 30px, 40px, 50px
    ),
    color: (
        lightblue, orange, lime, crimson
    ),
    border: (
        1px solid black, 
        4px solid orange,
        7px solid brown, 
        10px solid lightblue  
    )
);

И это мой код: 

@mixin media-module($prefix, $properties...) {
    @each $names, $value in $properties {
        $myValue: map-get($names, $value);
        $myGrid: nth($breakpoints, $myValue);
        // doesn't work
        @media all and (min-width: $myGrid + px) {
            @each $names in $properties {
                #{$names}: 123;     
            } 
        }
    }
}

Основная проблема заключается в этих двух директивах map-get и map-values ​​ не может вызвать $values из $lists.

используемой директивы map-get для вызова $values:

Ошибка: $map: "width" не является картой для 'map-get' в строке 112 файла scss / app.scss, в 'media-module'

используются значения карты:

Ошибка: $ map: "width" не является картой для `map-values ​​'

Есть ли способы получить или вызвать значения из $lists, которые внутри $map?

Большое спасибо всегда.



================ ОБНОВЛЕНИЕ 12/6 ================

Я сделал это, чтобы создать количество медиазапросов для каждого из $breakpoints' значений, но он только вызывает значения ширины, как это: 

@media all and (min-width: 564px) {
  .qaz {
    width: 80%;
    display: 80%;
    border: 80%; } }
@media all and (min-width: 768px) {
  .qaz {
    width: 70%;
    display: 70%;
    border: 70%; } }
@media all and (min-width: 992px) {
  .qaz {
    width: 400px;
    display: 400px;
    border: 400px; } }
@media all and (min-width: 1200px) {
  .qaz {
    width: 500px;
    display: 500px;
    border: 500px; } }

Мой второй код выглядит так: 

@mixin mqg3($prefix, $properties...) {
    @each $contents, $dummy in $prefix, $properties {
        $myGroup: map-get($prefix, $contents);
        @each $values in $myGroup {
            $myIndex: index($myGroup, $values);
            $myGrid: nth($breakpoints, $myIndex);
            @media all and (min-width: $myGrid + px) {
                @each $names in $properties {
                    #{$names}: $values;
                }
            }    
        }
    }
}

PS

Спасибо, что ответили мне @Jakob, но я хочу, чтобы $properties можно было проверять внутри @include, чтобы пользователю не нужно было прокручивать каждуювремя проверки $properties:

.qaz {@include mqg3 ($ bp-values, width, display, border);}

Ответы [ 2 ]

0 голосов
/ 06 декабря 2018

Как я пытался сказать в этом посте: Как получить $ значения массива в SCSS? , на мой взгляд, вложенная карта поможет вам найти более понятное и простое решение: 

$bp-values:(
  xs:(
    display: 564px,
    width: 200px,
    font-size: 20px,
    color:lightblue,
    border:1px solid black
  ),
  md:(
    display: 768px,
    width: 300px,
    font-size: 30px,
    color:orange,
    border:4px solid orange
  ),
  lg:(
    display: 992px,
    width: 400px,
    font-size: 40px,
    color:lime,
    border:7px solid brown
  ),
  xl:(
    display: 1200px,
    width: 500px,
    font-size: 50px,
    color:crimson,
    border:10px solid lightblue
  )
);

@mixin mqg3($map, $keys...) {
  @each $keyMap, $valueMap in $map {
    @media all and (min-width: map-get($valueMap, display)) {
      @each $v in $keys {
        #{$v}: map-get($valueMap, $v);
      }
    }   
  }
}

Это более ясно, каждая корреляция.Нет необходимости вставлять display в ваши аргументы, потому что я полагаю, это ваша минимальная ширина: 

.qaz { @include mqg3($bp-values, width, border); }

.qaz1 { @include mqg3($bp-values, color, font-size); }

Это результат: 

@media all and (min-width: 564px) {
  .qaz {
    width: 200px;
    border: 1px solid black;
  }
}

@media all and (min-width: 768px) {
  .qaz {
    width: 300px;
    border: 4px solid orange;
  }
}

@media all and (min-width: 992px) {
  .qaz {
    width: 400px;
    border: 7px solid brown;
  }
}

@media all and (min-width: 1200px) {
  .qaz {
    width: 500px;
    border: 10px solid lightblue;
  }
}

@media all and (min-width: 564px) {
  .qaz1 {
    color: lightblue;
    font-size: 20px;
  }
}

@media all and (min-width: 768px) {
  .qaz1 {
    color: orange;
    font-size: 30px;
  }
}

@media all and (min-width: 992px) {
  .qaz1 {
    color: lime;
    font-size: 40px;
  }
}

@media all and (min-width: 1200px) {
  .qaz1 {
    color: crimson;
    font-size: 50px;
  }
}

РЕДАКТИРОВАТЬ 1

Как вы спросили в комментарии, если вы хотите работать со списками, это еще одно решение.Я положил ваш $breakpoints с другими списками.Вы можете удалить display в ваших аргументах, потому что по умолчанию я использую его всегда как min-width: 

$value-tree: (
    display:(
        564, 768, 992, 1200
    ),
    width: (
        80%, 70%, 400px, 500px
    ),
    font-size: (
        20px, 30px, 40px, 50px
    ),
    color: (
        lightblue, orange, lime, crimson
    ),
    border: (
        1px solid black, 
        4px solid orange,
        7px solid brown, 
        10px solid lightblue  
    )
);

@mixin mqg3($map, $keys...){
  $myList:map-get($map, display);

  @each $myItem in $myList {
    $i: index($myList, $myItem);
    @media all and (min-width: $myItem * 1px) {
      @each $v in $keys {
        #{$v}: nth(map-get($value-tree, $v), $i);
      }
    }  
  }
}

.qaz { @include mqg3($value-tree, width, border); }

Это вывод: 

@media all and (min-width: 564px) {
  .qaz {
    width: 80%;
    border: 1px solid black;
  }
}

@media all and (min-width: 768px) {
  .qaz {
    width: 70%;
    border: 4px solid orange;
  }
}

@media all and (min-width: 992px) {
  .qaz {
    width: 400px;
    border: 7px solid brown;
  }
}

@media all and (min-width: 1200px) {
  .qaz {
    width: 500px;
    border: 10px solid lightblue;
  }
}
0 голосов
/ 06 декабря 2018

Я думаю, вы хотите что-то вроде этого

SCSS 

@mixin media-module {
  $index: 1;
  @each $bp in $breakpoints {
    @media all and (min-width: $bp * 1px){
      @each $key, $list in $value-tree {
        #{$key}: nth($list, $index);
      }
      $index: $index + 1; 
    }
  }
}

.class {
  @include media-module;
}

Вывод CSS 

@media all and (min-width: 564px) {
  .class {
    width: 80%;
    font-size: 20px;
    color: lightblue;
    border: 1px solid black;
  }
}
@media all and (min-width: 768px) {
  .class {
    width: 70%;
    font-size: 30px;
    color: orange;
    border: 4px solid orange;
  }
}
@media all and (min-width: 992px) {
  .class {
    width: 400px;
    font-size: 40px;
    color: lime;
    border: 7px solid brown;
  }
}
@media all and (min-width: 1200px) {
  .class {
    width: 500px;
    font-size: 50px;
    color: crimson;
    border: 10px solid lightblue;
  }
}
...