scss 更改Susy 3中的配置

Posted 2021-05-18

// different maps for different configurations...
$susy: (
  columns: 4,
);

$medium: (
  columns: 8,
);

$large: (
  columns: 12,
);


// inline use
// (you can pass any config into the Susy functions)
.example {
  width: span(2);
  
  @media (min-width: 30em) {
    width: span(6, $medium);
  }
}


// block mixin
// change settings for a block of content
// (maybe we should add this to the Susy core?)
@mixin susy-settings-block($config) {
  // store the old settings
  $global: $susy;
  // apply the new settings
  $susy: map-merge($susy, $config) !global;
  
  // allow nested styles, using new settings
  @content;
  
  // return to the initial settings
  $susy: $global !global;
}


// block use
// (applies the new config to an entire section of code)
@media (min-width: 30em) {
  @include susy-settings-block($medium) {
    .example {
      width: span(6);
    }

    .example-2 {
      width: span(3);
    }
  }
}