成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

開(kāi)發(fā)一個(gè)自己的 CSS 框架（四）

alogy / 2305人閱讀

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

這一節(jié)，我們來(lái)講規(guī)矩，談網(wǎng)格，做人可以不要臉，不講規(guī)矩，不講道理（特指傲嬌獸），但底線還是要有的，如同網(wǎng)格一樣，不能超出。

jeet

這里我們別人封裝好的模塊，不過(guò)呢，我們也會(huì)詳細(xì)介紹一下原理。首先我們安裝以下 jeet 框架

npm install --save jeet

這個(gè) jeet 框架有 scss 和 stylus 兩個(gè)版本。核心不大，只有 3 個(gè)文件。在 _settings.scss 里面初始化了設(shè)置，而 _function.scss 則存放了一些工具函數(shù)，例如。

_get-span 計(jì)算百分比

_get-column 根據(jù)欄數(shù)和間隔計(jì)算每一欄大小

_get-layout-direction 獲得對(duì)齊方式

_replace-nth 將某一列值替換

_reverse 反轉(zhuǎn)數(shù)組

_opposite-direction 將字符串的方向裝換為屬性值

假如讀者自己去閱讀源碼的話，筆者將之前沒(méi)見(jiàn)過(guò)的內(nèi)建方法做一下簡(jiǎn)單的說(shuō)明。

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 文件寫(xiě)法則以 = 開(kāi)頭。

column 通過(guò)浮動(dòng)將容器設(shè)置為比例大小

span 通過(guò)浮動(dòng)將容器設(shè)置為比例大小，不帶間隔

move 通過(guò) relative 定位移動(dòng)布局內(nèi)容

unmove 重置為不移動(dòng)

debug 開(kāi)啟調(diào)試，給以下每一個(gè)網(wǎng)格設(shè)置一個(gè)背景色

center block margin auto 居中

uncenter 取消居中

stack block 堆疊

unstack inline 取消堆疊

align 對(duì)齊，通過(guò) translate 進(jìn)行各個(gè)方向?qū)R

clearfix 清楚浮動(dòng)

模塊

新建 src/vars/_jeet.sass，將配置復(fù)制過(guò)來(lái)，以備修改

$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)入依賴，這個(gè)時(shí)候會(huì)報(bào)錯(cuò)，因?yàn)檎也坏?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"

在項(xiàng)目跟目錄下創(chuàng)建 .sassrc.js，這樣就可以找到 node_modules 下面的 jeet 了，或者自己寫(xiě)長(zhǎng)路徑。

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

module.exports = {
  includePaths: [resolve(cwd, "node_modules"), resolve(cwd, "src")]
}

現(xiàn)在以非緩存模式啟動(dòng)

parcel index.html --no-cache

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/116932.html

相關(guān)文章

  • 前端開(kāi)發(fā)知識(shí)點(diǎn)整理

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

    Blackjun 評(píng)論0 收藏0

  • 前端開(kāi)發(fā)知識(shí)點(diǎn)整理

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

    Sike 評(píng)論0 收藏0

  • 前端開(kāi)發(fā)知識(shí)點(diǎn)整理

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

    tracy 評(píng)論0 收藏0

  • 大前端2018現(xiàn)在上車還還得及么

    摘要：面向?qū)ο笕筇卣骼^承性多態(tài)性封裝性接口。第五階段封裝一個(gè)屬于自己的框架框架封裝基礎(chǔ)事件流冒泡捕獲事件對(duì)象事件框架選擇框架。核心模塊和對(duì)象全局對(duì)象，，，事件驅(qū)動(dòng)，事件發(fā)射器加密解密，路徑操作，序列化和反序列化文件流操作服務(wù)端與客戶端。 第一階段： HTML+CSS:HTML進(jìn)階、CSS進(jìn)階、div+css布局、HTML+css整站開(kāi)發(fā)、 JavaScript基礎(chǔ)：Js基礎(chǔ)教程、js內(nèi)置對(duì)...

    stormgens 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<