开发一个自己的 CSS 框架（四）

2018-07-21 本文已影响48人 Nodelover

这一节，我们来讲规矩，谈网格，做人可以不要脸，不讲规矩，不讲道理（特指傲娇兽），但底线还是要有的，如同网格一样，不能超出。

image.png

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 是否在前面的列表中

_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

开发一个自己的 CSS 框架（四）

jeet

模块

猜你喜欢

热点阅读