開發一個本身的 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
複製代碼