Question

刚刚被scss语法替换的原始sass语法，很难掌握文档

Reading this post对于自适应函数，我想知道如何用原始sass语法编写以下内容：

$breakpoints: (
  'small'  : ( min-width:  767px ),
  'medium' : ( min-width:  992px ),
  'large'  : ( min-width: 1200px )
);
@mixin respond-to($name) {
  @if map-has-key($breakpoints, $name) {
    @media #{inspect(map-get($breakpoints, $name))} {
      @content;
    }
  }
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Please make sure it is defined in `$breakpoints` map.";
  }
}

是否可以完成，或者需要使用less / scss语法？

Answer 1

仍然没有正版sass的文档，但使用sass-convert可以作为答案

sass-convert file.scss file.sass

真正的sass中的以下输出：

$breakpoints: ("small": (min-width: 767px), "medium": (min-width: 992px), "large": (min-width: 1200px))
=respond-to($name)
  @if map-has-key($breakpoints, $name)
    @media #{inspect(map-get($breakpoints, $name))}
      @content
  @else
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " + "Please make sure it is defined in `$breakpoints` map."

原始SASS，响应函数语法

1 个答案: