Question

我一直在用CSS设计，但我现在才学习如何使用SASS。这是一个非常初学的问题，所以请耐心等待。

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

我相信原则上，像SASS这样的CSS预处理器应该有助于解决这个问题......但目前我还不明白这一点。

如果我有一个id为#squishable的div，并且在大屏幕上我希望它的宽度为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创建响应能力的元素吗？希望有一个类似于我上面的简单例子吗？

Answer 1

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

使用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和$media-type。这些参数分别默认为min-width和only all，但如果您通过@include传递它们，则只会针对该特定元素进行更改。

其他参数的示例：

<强> SCSS：

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

CSS输出：

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

希望这有帮助！

修改 Here's a pen如果你想玩它。

Answer 2

为了提高代码的可维护性，您可以使用变量来定义媒体查询断点：

// define breakpoints
$small-screen: 321px;
$large-screen: 1824px;

$small: "only screen and (min-width:"#{$small-screen}")";
$large: "only screen and (min-width:"#{$large-screen}")";
// and so on...


// now you can esely manipulate with your media breakpoints
@media #{$small} {
    ...
}

@media #{$large} {
    ...
}

Answer 3

强烈建议您开发SAAS css样式的导入引导框架，它将为您节省大量响应式网页设计时间

更多详细信息请看此链接： http://pivotallabs.com/sass-with-bootstrap/

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

3 个答案:

这是我用于媒体查询的混音：

以下是如何使用它的示例：

其他参数的示例：