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

alogy 发布于2019-08-30 15:54 / 1999人阅读

摘要：首先我们安装以下框架这个框架有和两个版本。核心不大，只有个文件。在里面初始化了设置，而则存放了一些工具函数，例如。在项目跟目录下创建，这样就可以找到下面的了，或者自己写长路径。

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

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

idc机房托管专线服务怎么搭建一个自己的视频网站如何搭建一个自己的服务器如何搞一个自己的hyp加速专线开发框架的搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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内置对...

livem 2019-08-05 12:46 评论0 收藏0
大前端2018现在上车还还得及么

摘要：面向对象三大特征继承性多态性封装性接口。第五阶段封装一个属于自己的框架框架封装基础事件流冒泡捕获事件对象事件框架选择框架。核心模块和对象全局对象，，，事件驱动，事件发射器加密解密，路径操作，序列化和反序列化文件流操作服务端与客户端。第一阶段： HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础：Js基础教程、js内置对...

stormgens 2019-08-01 18:25 评论0 收藏0