媒體查詢是否可以嵌套在SCSS mixin中構建出使用列表的類似類？

Question

我原來的代碼已被大量修改和基於簡化與它的當前版本是一個建議的解決方案：

// List of properties for each class 
@mixin property($list) { 
    padding-top: nth($list, 1); 
    padding-bottom: nth($list, 2); 
    font-size: nth($list, 3); 
    line-height: nth($list, 4); 
    } 

// Function to build each class 
@mixin build($element, $device, $type) { 
    $i: 10; 
    @each $list in $type { 
     .#{$element}-#{$device}-#{$i} { 
      @include property($list); 
      } 
      $i: $i + 5; 
     } 
    } 

// Type list values 
$paragraph: (
    (5px, 5px, 15px, 20px), // 10 
    (7px, 8px, 20px, 30px), // 15 
    (8px, 7px, 30px, 35px) // 20 
); 

// Extra small devices 
@include build('p', 'xs', $paragraph); 

// Small devices 
@media (min-width: 768px) { 
    @include build('p', 'sm', $paragraph); 
    } 

// Medium devices 
@media (min-width: 992px) { 
    @include build('p', 'md', $paragraph); 
    } 

// Large devices 
@media (min-width: 1200px) { 
    @include build('p', 'lg', $paragraph); 
    } 

// Extra large devices 
@media (min-width: 1460px) { 
    @include build('p', 'xl', $paragraph); 
    } 

與所有的媒體查詢斷點和設備大小前綴（xs，sm，md等），如上所示，有必要將這些媒體查詢嵌套到@mixin build中，或者這是優雅且簡潔的，因爲此想法的代碼可以得到嗎？

更大的想法是，我想利用所有這一切與另一組值不同的列表。另一套類應該建立：@include build('h', $heading);

Answer 1

我做了重構以前的答案和解決方案應該看起來像這樣。我也改變了一下你的@mixin dimension。粘貼這個和它玩一下。另外我建議通過Sass文檔。很多想法都來自它;）

@mixin dimension($list) { 
    padding-top: nth($list, 1); 
    padding-bottom: nth($list, 2); 
    font-size: nth($list, 3); 
    line-height: nth($list, 4); 
} 

$valueSet: (
    (5px, 5px, 15px, 20px), 
    (7px, 8px, 20px, 30px), 
    (8px, 7px, 25px, 35px) 
); 

@mixin build($string, $list){ 
    $i: 10; 
    @each $a in $list { 
     .p-#{$string}-#{$i} { 
      @include dimension($a); 
     } 
     $i: $i + 5; 
    } 
} 

@include build('xs', $valueSet); 

@media (min-width: 768px) { 
    @include build('sm', $valueSet); 
} 

@media (min-width: 992px) { 
    @include build('md', $valueSet); 
} 

這應該爲你打造它。我會指出這是更少的代碼，但需要注意清楚下次訪問CSS時發生了什麼。