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

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

开发一个自己的 CSS 框架(四)的更多相关文章

  1. Cardinal:一个用于移动项目开发的轻量 CSS 框架

    Cardinal 是一个适用于移动项目的 CSS 框架,包含很多有用的默认样式.矢量字体.可重用的模块以及一个简单的响应式模块系统.Cardinal 提供了一种在多种移动设备上实现可伸缩的字体和布局的 ...

  2. 开发一个项目之css

    background属性 5+3 image,color,position,repeat,attachment size: 保持纵横比 contain 再发大就cover了 clip:背景绘制区域 b ...

  3. 18 个最好的CSS框架用于提高开发效率

    根据维基百科,CSS框架是事先准备好的库,是为了让使用层叠样式表语言来美化网页更容易,更符合标准.在这篇文章中,我们已经收集了一些现成的框架,这将使你减少你的任务流程和代码.我们希望你会发现列表中的方 ...

  4. 架构漫谈:自己开发一个Log框架

    前言 在日常开发中我们常常都会用到写日志的功能,现在网上的写Log的框架有很多,但是对于我个人而言,过于庞大:我们往往只为了使用框架中的某一个功能就不得不引用整个框架. 所以,我们今天就来自己动手开发 ...

  5. 一些 CSS 框架

    利用 CSS 框架,可以简化你的工作,提高工作效率.CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版.网格布局.表单样式.通用规则等代码块.下面给你推荐了27款优秀的CSS框 ...

  6. css框架,一把锋利的剑

    CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版.网格布局.表单样式.通用规则等代码块,用于简化web前端开发的工作,提高工作效率. 产生原因 互联网行业已经发展了多年,浏览 ...

  7. 27款经典的CSS框架

    利用 CSS 框架,可以简化你的工作,提高工作效率.CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版.网格布局.表单样式.通用规则等代码块.下面给你推荐了27款优秀的CSS框 ...

  8. 8个强大的基于Bootstrap的CSS框架

    做过前端开发的小伙伴们应该对Bootstrap不会陌生,它是由Twitter推出的开源CSS框架,其中包含了很多Web前端开发的工具包和应用组件.当然,和jQuery一样,Bootstrap同时也是一 ...

  9. 使用css框架的优缺点

    使用css框架的优点 1.加速开发 CSS框架提供通用的代码(如reset,和移动端开发的一些常用设置)和许多丰富的UI组件样式——因此我们不需要从头开始写. 2.无兼容性烦恼 CSS框架解决了各个浏 ...

随机推荐

  1. Git教学教程--学生使用教程(非Git操作版)

    一.注册(必须) 注册完成后由"教师"将你加入高校/企业组即可: 二.查看项目(必须) 三.查看组织 打开后可查看到如下界面,列出的项目为可操作项目 四.查看高校/企业信息 五.上 ...

  2. Echarts图表类型

    每个系列通过 type 决定自己的图表类型: type: 'bar':柱状/条形图 type: 'line':折线/面积图 type: 'pie':饼图 type: 'scatter':散点(气泡)图 ...

  3. Qt:QJsonValue

    0.说明 QJsonValue类用于操作JSON中的各种数据. JSON是用于存储结构化数据的格式,JSON中的数据可以是六种类型: 基本类型 存储类型 bool QJsonValue::Bool d ...

  4. vue如何全局引用公共js

    在项目开发中需要调用一些工具类方法,所以需要将公共方法放在公共js中,并且需要全局引用这些公共js 1:创建公共JS(utils.js)  src/common/utils.js export def ...

  5. .net core 学习笔记一 Program与Startup

    一.Program文件: 1.CreateWebHostBuilder(): 构建web服务2.WebHost.CreateDefaulBuilder(): 使用默认配置,包括 1.使用了Kestre ...

  6. HTML的表格标签,列表标签,表单标签,HTML5有哪些新特性

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  7. Centos8 Yum 安装Nginx指定版本

    查看系统和EPEL的nginx版本   dnf info nginx 通过官方 yum 源安装nginx       vi /etc/yum.repos.d/nginx.repo 列出所有版本    ...

  8. SpringBoot学习入门之Hello项目的构建、单元测试和热部署等(配图文,配置信息详解,附案例源码)

    前言: 本文章主要是个人在学习SpringBoot框架时做的一些准备,参考老师讲解进行完善对SpringBoot构建简单项目的学习汇集成本篇文章,作为自己对SpringBoot框架的总结与笔记. 你将 ...

  9. 手写 Vue2 系列 之 patch —— diff

    前言 上一篇文章 手写 Vue2 系列 之 初始渲染 中完成了原始标签.自定义组件.插槽的的初始渲染,当然其中也涉及到 v-bind.v-model.v-on 指令的原理.完成首次渲染之后,接下来就该 ...

  10. python 之 matplotlib 练习

    import numpy as npimport matplotlib.pyplot as plt x = np.linspace(0,10,1000)# 自变量y = np.sin(x) + 1 # ...