開發一個自己的 CSS 框架（四）

alogy 發布于2019-08-30 15:54 / 2215人閱讀

摘要：首先我們安裝以下框架這個框架有和兩個版本。核心不大，只有個文件。在里面初始化了設置，而則存放了一些工具函數，例如。在項目跟目錄下創建，這樣就可以找到下面的了，或者自己寫長路徑。

這一節，我們來講規矩，談網格，做人可以不要臉，不講規矩，不講道理（特指傲嬌獸），但底線還是要有的，如同網格一樣，不能超出。

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, "gutter") 從 $jeet 字典里面拿 key 為 gutter 的 value

function-exists("set-nth") 判斷方法是否存在

append($result, "value") 往數組里面追加方法

if(true, 1, 0) 三元運算符

set-nth($list, $index, $tmp) 設置列表，$index 位置的值

index("ltr" "LTR", $direction) $direction 是否在前面的列表中

更多可以在 http://sass-lang.com/document... 找到

_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

GPU云服務器云服務器怎么搭建一個自己的視頻網站如何搭建一個自己的服務器如何搞一個自己的hyp加速專線開發框架的搭建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116932.html

前端開發知識點整理

摘要：前言本文主要是有關前端方面知識按照目前的認知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。前言：本文主要是有關前端方面知識按照 XX 目前的認知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學什么，還是要 follow your heart & follow your BOSS。初衷...

Blackjun 2019-08-20 17:14 評論0 收藏0
前端開發知識點整理

摘要：前言本文主要是有關前端方面知識按照目前的認知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。前言：本文主要是有關前端方面知識按照 XX 目前的認知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學什么，還是要 follow your heart & follow your BOSS。初衷...

Sike 2019-08-29 12:44 評論0 收藏0
前端開發知識點整理

摘要：前言本文主要是有關前端方面知識按照目前的認知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。前言：本文主要是有關前端方面知識按照 XX 目前的認知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學什么，還是要 follow your heart & follow your BOSS。初衷...

tracy 2019-08-01 16:59 評論0 收藏0
大前端2018現在上車還還得及么

摘要：面向對象三大特征繼承性多態性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象，，，事件驅動，事件發射器加密解密，路徑操作，序列化和反序列化文件流操作服務端與客戶端。第一階段： HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發、 JavaScript基礎：Js基礎教程、js內置對...

stormgens 2019-08-01 18:25 評論0 收藏0