使用 Sass 开发一个栅格系统

确定样式
一个栅格系统所有的样式分为：

• 容器类：.container-*
• 行：.row、.row--flex
• 列：.col-*、.col-*-*
• 响应式工具类：.hidden-*、.visible-*-*

定义基本数据

$grid-columns: 12; // 每行的列数
$medias-list: xs, sm, md, lg, xl;	// 媒体类型

// 媒体尺寸断点
$screen-breakpoints-list: (
    xs: (max: 575px),
    sm: (min: 576px, max: 767px),
    md: (min: 768px, max: 991px),
    lg: (min: 992px, max: 1199px),
    xl: (min: 1200px)
);

// container 在不同屏幕下的最大尺寸
$container-max-widths: (
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px
);

定义需要使用的mixin

// 检测 媒体设备类型是否为 [xs, sm, md, lg, xl] 中的一个
@function mediaCheck ($media) {
    @if index($medias-list , $media) {