开发一个本身的 CSS 框架（四）

这一节，咱们来说规矩，谈网格，作人能够不要脸，不讲规矩，不讲道理（特指傲娇兽），但底线仍是要有的，如同网格同样，不能超出。

jeet

这里咱们别人封装好的模块，不过呢，咱们也会详细介绍一下原理。首先咱们安装如下 jeet 框架

npm install --save jeet
复制代码

这个 jeet 框架有 scss 和 stylus 两个版本。核心不大，只有 3 个文件。在 _settings.scss 里面初始化了设置，而 _function.scss 则存放了一些工具函数，例如。

• _get-span 计算百分比
• _get-column 根据栏数和间隔计算每一栏大小
• _get-layout-direction 得到对齐方式
• _replace-nth 将某一列值替换
• _reverse 反转数组
• _opposite-direction 将字符串的方向装换为属性值

假如读者本身去阅读源码的话，笔者将以前没见过的内建方法作一下简单的说明。

• map-get(jeet 字典里面拿 key 为 gutter 的 value
• function-exists('set-nth') 判断方法是否存在
• append($result, 'value') 往数组里面追加方法
• if(true, 1, 0) 三元运算符
• set-nth(index, index 位置的值
• index('ltr' 'LTR', direction 是否在前面的列表中

更多能够在 http://sass-lang.com/documentation/Sass/Script/Functions.html 找到

_gird.scss 里面则封装了一些布局范式，大多都是 @mixin ，在 sass 文件写法则以 = 开头。

• column 经过浮动将容器设置为比例大小
• span 经过浮动将容器设置为比例大小，不带间隔
• move 经过 relative 定位移动布局内容
• unmove 重置为不移动
• debug 开启调试，给如下每个网格设置一个背景色
• center block margin auto 居中
• uncenter 取消居中
• stack block 堆叠
• unstack inline 取消堆叠
• align 对齐，经过 translate 进行各个方向对齐
• clearfix 清楚浮动

模块

新建 src/vars/_jeet.sass，将配置复制过来，以备修改

$jeet: (gutter: 3, max-width: 1440px, layout-direction: LTR, parent-first: false, nth: child)
复制代码

新建 src/vars/_query-size.sass 设置响应式断点，参考的 bootstrap。box 的表明是内部 container 大小

$media-size-1: 576px !default
$media-size-2: 768px !default
$media-size-3: 992px !default
$media-size-4: 1200px !default

$media-size-box-1: 540px !default
$media-size-box-2: 720px !default
$media-size-box-3: 960px !default
$media-size-box-4: 1140px !default
复制代码

新建 src/fns/_media-query.sass ， 构建媒体查询区间 mixin

=media1
  @media screen and (max-width: $media-size-2)
    @content

=media2
  @media screen and (max-width: $media-size-3) and (min-width: $media-size-2)
    @content

=media3
  @media screen and (max-width: $media-size-4) and (min-width: $media-size-3)
    @content

=media4
  @media screen and (min-width: $media-size-4)
    @content
复制代码

新建 src/gird.sass，导入依赖，这个时候会报错，由于找不到 jeet。

@import './vars/_jeet.sass'
@import 'jeet/scss/_functions.scss'
@import 'jeet/scss/index.scss'

@import './vars/_query-size.sass'
@import './fns/_media-query.sass'
复制代码

在项目跟目录下建立 .sassrc.js，这样就能够找到 node_modules 下面的 jeet 了，或者本身写长路径。

const { resolve } = require('path')
const cwd = process.cwd()

module.exports = {
  includePaths: [resolve(cwd, 'node_modules'), resolve(cwd, 'src')]
}
复制代码

如今以非缓存模式启动

parcel index.html --no-cache
复制代码