[Day 21] Sass - Media Query

Sass媒体查询其实与Css媒体查询是差不多的～
只是在Sass中也可以使用SassScript expressions来表示喔～
像是...

$layout-breakpoint-small: 960px;

@media (min-width: $layout-breakpoint-small) {
  .hide-extra-small {
    display: none;
  }
}

编译为css

@media (min-width: 960px) {
  .hide-extra-small {
    display: none;
  }
}

或是...

@media (hover: hover) {
  .button:hover {
    border: 2px solid black;

    @media (color) {
      border-color: #036;
    }
  }
}

编译为css为

@media (hover: hover) {
  .button:hover {
    border: 2px solid black;
  }
}
@media (hover: hover) and (color) {
  .button:hover {
    border-color: #036;
  }
}

很简单吧！

参考资料：https://sass-lang.com/documentation/at-rules/css