这一节，我们来说说规则和网格。你可以不要脸，可以不守规矩，可以蛮不讲理（尤其是傲娇兽），但底线还是要有的，就像格子一样，不可逾越。在jeet这边，我们有别人封装的模块，但是也会详细介绍一下原理。首先我们安装如下jeet框架npminstall--savejeet这个jeet框架有scss和stylus两个版本。内核不大，只有3个文件。这些设置在_settings.scss中初始化，而_function.scss存储一些实用函数，例如。_get-span计算百分比_get-column根据列数和间隔计算每列的大小_get-layout-direction获取对齐方式_replace-nth替换一个列值_reverse反转数组用属性值替换方向如果读者自行阅读源码，笔者会对之前没见过的内置方法做简单的说明。map-get($jeet,'gutter')从$jeet字典中取gutter的值作为keyfunction-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通过相对定位移动布局内容unmove重置为不移动debug启用调试，为以下每个网格设置背景色中心blockmarginautocenteruncentercancelcenterstackblockstackunstackinlinecancelstackalignalign,aligninalldirectionsthroughtranslateclearfixclearfloatingmodulecreatenewsrc/vars/_jeet.sass,复制配置修改$jeet:(gutter:3,max-width:1440px,layout-direction:LTR,parent-first:false,nth:child)新建src/vars/_query-size.sass设置响应式断点，参考bootstrap。盒子的代表是内部容器尺寸$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!defaultnewsrc/fns/_media-query.sass，构建媒体查询范围mixin=media1@media-screenand(max-width:$media-size-2)@content=media2@mediascreenand(max-width:$media-size-3)and(min-width:$media-size-2)@content=media3@mediascreen和(max-width:$media-size-4)and(min-width:$media-size-3)@content=media4@mediascreenand(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')constcwd=process.cwd()module.exports={includePaths:[resolve(cwd,'node_modules'),resolve(cwd,'src')]}现在是非-缓存模式启动parcelindex.html--no-cache
