sass编写wxss_使用Sass编写更好的媒体查询

sass编写wxss

Let's face facts: media queries can be a pain. They're difficult to write and they tend to get duplicated a lot. Sass includes a few helpful features that make media queries easier to work with. This article will show you these tricks and how you can use them to simplify your stylesheets.

让我们面对现实：媒体查询可能会很痛苦。 它们很难编写，而且往往会重复很多。 Sass包括一些有用的功能，这些功能使媒体查询更易于使用。 本文将向您展示这些技巧以及如何使用它们来简化样式表。

基础 (The Basics)

Let's take a look at a simple example.

让我们看一个简单的例子。

p {
  font-size: 16px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  p {
    font-size: 18px;
  }
}

@media (min-width: 1024px) {
  p {
    font-size: 20px;
  }
}

Here, we've set the font size of paragraphs to 16 pixels. When the viewport width is greater than or equal to 768 pixels, and less than or equal to 1023 pixels, the font size is 18 pixels. When the viewport is greater than or equal to 1024 pixels, the font size is 20 pixels.

在这里，我们将段落的字体大小设置为16像素。 当视口宽度大于或等于768像素且小于或等于1023像素时，字体大小为18像素。 当视口大于或等于1024像素时，字体大小为20像素。

Right away, you should be struck by how much code is required to do something as simple as responsive typography. As projects grow larger, the above style of writing media queries usually leads in one of two directions:

立即，您需要为执行响应式排版之类的简单操作所需的代码量而感到震惊。 随着项目规模的扩大，以上编写媒体查询的方式通常会导致两个方向之一：

• Media queries are hardcoded in the code and copied where they're needed. If we want to change a media query, we have to do it in many places.
  媒体查询被硬编码在代码中，并复制到需要的地方。 如果要更改媒体查询，则必须在许多地方进行。
• The project is split up by viewport sizes. It's jarring and time-consuming to jump to multiple places to update a single element's styles.
  该项目按视口大小进行拆分。 跳到多个位置来更新单个元素的样式既费力又费时。

缩短事情 (Shortening Things Up)

Sass allows variables to be interpolated. This means that we can move our media queries into variables and reuse them.

Sass允许对变量进行插值。 这意味着我们可以将媒体查询移到变量中并重新使用它们。

$tablet: "(min-width: 768px) and (max-width: 1023px)";
$desktop: "(min-width: 1024px)";

p {
  font-size: 16px;
}

@media #{$tablet} {
  p {
    font-size: 18px;
  }
}

@media #{$desktop} {
  p {
    font-size: 20px;
  }
}

Now, we can use the $tablet and $desktop media queries anywhere in our project without duplicating code. However, it's still annoying that our media queries are separate from the code they style. The Sass folks fixed this problem by allowing media queries to be nested.

现在，我们可以在项目中的任何位置使用$tablet和$desktop媒体查询，而无需重复代码。 但是，令人讨厌的是我们的媒体查询与它们设置的代码是分开的。 Sass员工通过允许嵌套媒体查询来解决此问题。

$tablet: "(min-width: 768px) and (max-width: 1023px)";
$desktop: "(min-width: 1024px)";

p {
  font-size: 16px;

  @media #{$tablet} {
    font-size: 18px;
  }

  @media #{$desktop} {
    font-size: 20px;
  }
}

Mixins救援 (Mixins to the Rescue)

The code above works, but it's a bit difficult to read. We can clean it up by using Sass's mixins. Mixins are groups of styles that can be reused throughout your code. One of the nifty features of mixins is they can use blocks of content. This lets us write mixins like this:

上面的代码可以工作，但是很难读。 我们可以使用Sass的mixins清理它。 Mixins是可以在整个代码中重复使用的样式组。 mixin的漂亮功能之一是它们可以使用内容块。 这使我们可以这样编写mixin：

$tablet-width: 768px;
$desktop-width: 1024px;

@mixin tablet {
  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$desktop-width}) {
    @content;
  }
}

Now, we can rewrite our example above to use these new mixins.

现在，我们可以重写上面的示例以使用这些新的mixin。

p {
  font-size: 16px;

  @include tablet {
    font-size: 18px;
  }

  @include desktop {
    font-size: 20px;
  }
}

We're not just limited to device sizes. We can write media queries for many other useful things, such as Chris Coyier's retina media query or a print media query.

我们不仅限于设备尺寸。 我们可以为许多其他有用的东西编写媒体查询，例如Chris Coyier的视网膜媒体查询或印刷媒体查询。

@mixin retina {
  @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (min-resolution: 192dpi),
    only screen and (min-resolution: 2dppx) {
    @content;
  }
}

@mixin print {
  @media print {
    @content;
  }
}

结语 (Wrapping Up)

Media queries are great, and with Sass they can be even better. The next time you use one, remember these tricks to help make your code more readable and easier to maintain.

媒体查询很棒，而使用Sass可以更好。 下次使用时，请记住这些技巧，以使您的代码更具可读性且更易于维护。

翻译自: https://davidwalsh.name/write-media-queries-sass

sass编写wxss