SASS--使用混合元素和变量的媒体查询实例

SASS是流行的预处理风格语言，它提供了各种功能来支持DRY原则。

在CSS中引入了媒体查询功能，根据屏幕尺寸或媒体类型应用样式。在SASS中，@media query被用来声明不同的设备，如sass

最新的css支持媒体查询，所以每一行css代码在SASS中都是有效的。 以下是应用不同屏幕尺寸的选择器，媒体查询在浏览器运行时执行，而SASS规则在编译时执行，生成CSS样式。

简单的例子使用媒体查询来设置不同屏幕尺寸的背景色

body {
  background-color: red;
}

@media screen and (min-width: 600px) {
  body {
    background-color: blue;
  }
}
@media  (min-width: 1000px) {
  body {
    background-color: black;
  }
}

SASS代码在编译时工作，而浏览器和css代码在运行时与媒体查询一起工作，所以很难动态设置可变宽度，相反，我们可以使用mixin来接受媒体查询内容指令的宽度，允许以后放置内容，而不是预先定义。

@mixin changewidth($originwidth) {
        @Contents {
            width: $originwidth;
        }
    }
  @media screen and (max-width: 600px) {
        @include changewidth($originwidth: 400px);
    }
    @media screen and (max-width: 1100px) {
        @include changewidth($originwidth: 970px);
    }
    @media screen and (min-width: 1300px) {
        @include changewidth($originwidth: 1180px);
    }

其他使用媒体查询和默认参数的mixin为不同屏幕传递变量的例子:

• 用默认的mixin定义margin值并设置该值
• 在div标签中使用include指令为默认屏幕设置margin值
• 使用媒体查询和include指令标签改变最大宽度=900px的默认边距

@mixin changeMargin($margin: 5px){
  margin: $margin
}
div{
  @include  changeMargin
}

@media screen and (max-width: 900px){
  div{
    @include changeMargin(10px)
  }
}

生成的css代码是

div {
  margin: 5px;
}

@media screen and (max-width: 900px) {
  div {
    margin: 10px;
  }
}