使用Sass快速创建响应式布局

介绍如何使用Sass预处理器以及媒体查询快速创建响应式布局，包括如何使用变量、嵌套规则和mixin。

/* 定义一些变量，方便调用和修改 */
$breakpoint-xs: 480px;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;

/* 定义一个mixin，方便在不同分辨率下对元素进行样式设置 */
@mixin respond-to($viewport) {
  @media (max-width: $viewport) {
    @content;
  }
}

/* 定义一个响应式布局 */
.container {
  max-width: $breakpoint-xl;
  margin: 0 auto;
  padding: 0 15px;

  /* 在不同分辨率下设置不同的样式 */
  @include respond-to($breakpoint-lg) {
    max-width: $breakpoint-lg;
  }

  @include respond-to($breakpoint-md) {
    max-width: $breakpoint-md;
  }

  @include respond-to($breakpoint-sm) {
    max-width: $breakpoint-sm;
  }

  @include respond-to($breakpoint-xs) {
    max-width: $breakpoint-xs;
  }
}

/* 一个使用上述响应式布局的div */
.box {
  width: 100%;
  height: 200px;
  background-color: green;

  @include respond-to($breakpoint-md) {
    height: 150px;
  }

  @include respond-to($breakpoint-sm) {
    height: 100px;
  }

  @include respond-to($breakpoint-xs) {
    height: 50px;
  }
}

免责申明：文章和图片全部来源于公开网络，如有侵权，请通知删除 server@dude6.com