SASS 如何帮助我开发响应式网页设计？

我使用 CSS 进行设计已有多年，但我现在才刚刚学习如何使用 SASS。这是一个非常初学者的问题，所以请耐心等待。

我开始研究 SASS 的原因是因为我想开发响应式网页设计，但希望有一种更好的方法来实现它，而不是为每个屏幕尺寸手动制作不同的样式表。

我相信原则上，像 SASS 这样的 CSS 预处理器应该可以帮助解决这个问题......但目前我不明白如何解决。

如果我有一个带有 id 的 div#squishable，在大屏幕上我希望它的宽度为 1000 像素，在小屏幕上宽度为 100 像素，但在这两种情况下都是红色背景，我想我会这样做：

$color = red;

#squishable {
    backgorundcolor: $color;
}

@media only screen
and (min-width : 321px) {

    #squishable {
        width:100px;
    }
}

@media only screen
and (min-width : 1824px) {
    #squishable {
        width:1000px;
    }
}

然而，我不确定这种方法比仅使用 CSS 有多大优势。也许举个例子，它太简单了。但是，无论如何，我不知道我会用 SASS 做什么不同的事情来使响应式网页设计的编码变得更容易。这就是全部内容了吗？

有人可以帮助我克服这个概念障碍，并让我知道如何利用 SASS 来创建响应式元素吗？希望有一个类似于我上面的简单例子？

您绝对可以进一步改进您的工作流程！

使用SASS@mixin, @include, @content和定期的variables您可以设置一个环境，在其中“内联”创建媒体查询，或者如果愿意，也可以在常规选择器内部创建。

这是我的媒体查询混合：

（不用介意愚蠢的变量名和占位符断点）

// Breakpoints
$mq-tiny:   5em;
$mq-small:  10em;
$mq-medium: 15em;
$mq-large:  20em;
$mq-huge:   25em;
$mq-crazy:  30em;

@mixin mq($size, $direction: min-width, $media-type: only all) {
  @if      $size == tiny   { @media #{$media-type} and (#{$direction}: $mq-tiny)   { @content; } }
  @else if $size == small  { @media #{$media-type} and (#{$direction}: $mq-small)  { @content; } }
  @else if $size == medium { @media #{$media-type} and (#{$direction}: $mq-medium) { @content; } }
  @else if $size == large  { @media #{$media-type} and (#{$direction}: $mq-large)  { @content; } }
  @else if $size == huge   { @media #{$media-type} and (#{$direction}: $mq-huge)   { @content; } }
  @else if $size == crazy  { @media #{$media-type} and (#{$direction}: $mq-crazy)  { @content; } }
  @else                    { @media #{$media-type} and (#{$direction}: $size)      { @content; } }
}

这是如何使用它的示例：

SCSS:

.selector {
  width: 100px;

  @include mq(large) {
    width: 1000px;
  }
}

CSS 输出：

.selector {
  width: 100px
}

@media only all and (min-width: 20em) {
  .selector {
    width: 1000px
  }
}

请注意，您不需要使用宽度变量名称。你可以通过1000px代替large如果你想。

您可能还注意到了中的可选参数@mixin; $direction and $media-type。这些参数默认为min-width and only all分别，但如果你通过它们@include它们只会针对该特定元素而改变。

带有其他参数的示例：

SCSS:

.selector {
  @include mq(1000px, min-height) {
    width: 100px;
  }
}

CSS 输出：

@media only all and (min-height: 1000px) {
  .selector {
    width: 100px
  }
}

希望这可以帮助！

Edit: 这是一支笔 http://codepen.io/Mest/pen/mAhxv?editors=110如果你想玩玩它。