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

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

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

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

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

前端开发知识点整理

...用第二阶段：简单自动构建优化第三阶段：JS/CSS模块化开发第四阶段：组件化开发与资源管理项目技术选型造轮子版本规划致谢联系方式结语许可专业技能前端理论浏览器知己知彼浏览器内核渲染原理 HTML 解析...

Blackjun 2019-08-20 17:14 评论0 收藏0
前端开发知识点整理

...用第二阶段：简单自动构建优化第三阶段：JS/CSS模块化开发第四阶段：组件化开发与资源管理项目技术选型造轮子版本规划致谢联系方式结语许可专业技能前端理论浏览器知己知彼浏览器内核渲染原理 HTML 解析...

Sike 2019-08-29 12:44 评论0 收藏0
前端开发知识点整理

...用第二阶段：简单自动构建优化第三阶段：JS/CSS模块化开发第四阶段：组件化开发与资源管理项目技术选型造轮子版本规划致谢联系方式结语许可专业技能前端理论浏览器知己知彼浏览器内核渲染原理 HTML 解析...

tracy 2019-08-01 16:59 评论0 收藏0
大前端2018现在上车还还得及么

...阶段： HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础：Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。 JS基本特效：常见特效、例如：tab、导航、整页滚动、轮...

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

...阶段： HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础：Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。 JS基本特效：常见特效、例如：tab、导航、整页滚动、轮...

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