資訊專欄INFORMATION COLUMN
摘要：首先我們安裝以下框架這個框架有和兩個版本。核心不大，只有個文件。在里面初始化了設(shè)置，而則存放了一些工具函數(shù)，例如。在項目跟目錄下創(chuàng)建，這樣就可以找到下面的了，或者自己寫長路徑。
這一節(jié)，我們來講規(guī)矩，談網(wǎng)格，做人可以不要臉，不講規(guī)矩，不講道理（特指傲嬌獸），但底線還是要有的，如同網(wǎng)格一樣，不能超出。
jeet這里我們別人封裝好的模塊，不過呢，我們也會詳細(xì)介紹一下原理。首先我們安裝以下 jeet 框架
npm install --save jeet
這個 jeet 框架有 scss 和 stylus 兩個版本。核心不大，只有 3 個文件。在 _settings.scss 里面初始化了設(shè)置，而 _function.scss 則存放了一些工具函數(shù)，例如。
_get-span 計算百分比
_get-column 根據(jù)欄數(shù)和間隔計算每一欄大小
_get-layout-direction 獲得對齊方式
_replace-nth 將某一列值替換
_reverse 反轉(zhuǎn)數(shù)組
_opposite-direction 將字符串的方向裝換為屬性值
假如讀者自己去閱讀源碼的話，筆者將之前沒見過的內(nèi)建方法做一下簡單的說明。
map-get($jeet, "gutter") 從 $jeet 字典里面拿 key 為 gutter 的 value
function-exists("set-nth") 判斷方法是否存在
append($result, "value") 往數(shù)組里面追加方法
if(true, 1, 0) 三元運(yùn)算符
set-nth($list, $index, $tmp) 設(shè)置列表，$index 位置的值
index("ltr" "LTR", $direction) $direction 是否在前面的列表中
更多可以在 http://sass-lang.com/document... 找到
_gird.scss 里面則封裝了一些布局范式，大多都是 @mixin ，在 sass 文件寫法則以 = 開頭。
column 通過浮動將容器設(shè)置為比例大小
span 通過浮動將容器設(shè)置為比例大小，不帶間隔
move 通過 relative 定位移動布局內(nèi)容
unmove 重置為不移動
debug 開啟調(diào)試，給以下每一個網(wǎng)格設(shè)置一個背景色
center block margin auto 居中
uncenter 取消居中
stack block 堆疊
unstack inline 取消堆疊
align 對齊，通過 translate 進(jìn)行各個方向?qū)R
clearfix 清楚浮動
模塊新建 src/vars/_jeet.sass，將配置復(fù)制過來，以備修改
$jeet: (gutter: 3, max-width: 1440px, layout-direction: LTR, parent-first: false, nth: child)
新建 src/vars/_query-size.sass 設(shè)置響應(yīng)式斷點(diǎn)，參考的 bootstrap。box 的代表是內(nèi)部 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 ， 構(gòu)建媒體查詢區(qū)間 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，導(dǎo)入依賴，這個時候會報錯，因為找不到 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"
在項目跟目錄下創(chuàng)建 .sassrc.js，這樣就可以找到 node_modules 下面的 jeet 了，或者自己寫長路徑。
const { resolve } = require("path")
const cwd = process.cwd()
module.exports = {
includePaths: [resolve(cwd, "node_modules"), resolve(cwd, "src")]
}
現(xiàn)在以非緩存模式啟動
parcel index.html --no-cache
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116932.html
摘要：前言本文主要是有關(guān)前端方面知識按照目前的認(rèn)知進(jìn)行的收集歸類概括和整理，涵蓋前端理論與前端實(shí)踐兩方面。 前言：本文主要是有關(guān)前端方面知識按照 XX 目前的認(rèn)知進(jìn)行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實(shí)踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學(xué)什么，還是要 follow your heart & follow your BOSS。 初衷...
摘要：前言本文主要是有關(guān)前端方面知識按照目前的認(rèn)知進(jìn)行的收集歸類概括和整理，涵蓋前端理論與前端實(shí)踐兩方面。 前言：本文主要是有關(guān)前端方面知識按照 XX 目前的認(rèn)知進(jìn)行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實(shí)踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學(xué)什么，還是要 follow your heart & follow your BOSS。 初衷...
摘要：前言本文主要是有關(guān)前端方面知識按照目前的認(rèn)知進(jìn)行的收集歸類概括和整理，涵蓋前端理論與前端實(shí)踐兩方面。 前言：本文主要是有關(guān)前端方面知識按照 XX 目前的認(rèn)知進(jìn)行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實(shí)踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學(xué)什么，還是要 follow your heart & follow your BOSS。 初衷...
摘要：面向?qū)ο笕筇卣骼^承性多態(tài)性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎(chǔ)事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象，，，事件驅(qū)動，事件發(fā)射器加密解密，路徑操作，序列化和反序列化文件流操作服務(wù)端與客戶端。 第一階段： HTML+CSS:HTML進(jìn)階、CSS進(jìn)階、div+css布局、HTML+css整站開發(fā)、 JavaScript基礎(chǔ)：Js基礎(chǔ)教程、js內(nèi)置對...
閱讀 2764·2021-11-25 09:43
閱讀 2128·2021-11-18 13:25
閱讀 4619·2021-09-22 15:52
閱讀 1887·2021-09-22 15:49
閱讀 2231·2019-08-30 15:54
閱讀 3023·2019-08-29 17:13
閱讀 2329·2019-08-29 16:54
閱讀 2268·2019-08-29 12:58
