grid-kiss让网格制作变得更容易

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

去年在CSS Conf科普了一下《CSS Grid Layout》相关的概念。会后PostCSS的作者@Andrey Sitnik给我力荐grid-kiss这个PostCSS插件。说这个插件可以让CSS Grid变得更为简单。一直都想尝试一下,就是没动手,今天体验了一下,还是很有意思的。今天花点时间整理一下,跟大家一起分享。

CSS Grid是什么

在详细介绍这个插件之前,先简单的告诉大家,我们这里所说的Grid是CSS布局中的一个模块。它不是早前所说的网格系统(Grid system),而是CSS 布局自带的一个布局模块。这个模块被称为CSS Grid,也有人把其称为CSS原生网格。

如果你从未接触过CSS Grid相关的知识,建议你先阅读站上早前分享过的CSS Grid相关教程。特别推荐大家阅读这篇译文《CSS Grid布局指南》,如果你觉得译文质量不够好,你也可以移步阅读@Chris House写的原文《A Complete Guide to CSS Grid Layout》。

这里假设你已经对CSS Grid有了一定的基础了解,哪怕是最基础的知识。因为我们今天不是来介绍CSS Grid的基础知识,而是介绍如何使用PostCSS插件grid-kiss让制作网格变得更容易、更简单。如果你感兴趣的话,欢迎继续往下阅读。

grid-kiss目的

grid-kiss是PostCSS万千插件中的一个,旨在用一个形象的网格(代码中画的网格)来取代CSS Grid自带的24个属性。简单的说,就是grid-kiss把在代码中画好的网格编译出CSS Grid对应的网格属性。

先来看个示例

上面也说过了,grid-kiss是用来把画好的网格编译成CSS对应的网格属性。那究竟是怎么样的,先给大家看一个作者在Github提供的示例,让大家在脑海中有一个简单印象。

比如,在编译前的CSS代码中有这样一段代码:

body {
    grid-kiss:
        "+-------------------------------+      "
        "|           header ↑            | 120px"
        "+-------------------------------+      "
        "                                       "
        "+-- 30% ---+  +--- auto --------+      "
        "| .sidebar |  |       main      | auto "
        "+----------+  +-----------------+      "
        "                                       "
        "+-------------------------------+      "
        "|              ↓                | 60px "
        "|         → footer ←            |      "
        "+-------------------------------+      "
}

经过PostCSS编译之后出来的CSS代码:

body > header {
    grid-area: header;
    align-self: start
}

body > .sidebar {
    grid-area: sidebar
}

body > main {
    grid-area: main
}

body > footer {
    grid-area: footer;
    justify-self: center;
    align-self: end
}

body {
    display: grid;
    align-content: space-between;
    grid-template-rows: 120px 1fr 60px;
    grid-template-columns: 30% 1fr;
    grid-template-areas: 
    "header  header"
    "sidebar main  "
    "footer  footer"
}

在浏览器中将看到如下图的效果:

如果你想立马体验的话,你可以通过playground在线工具尝试一把。另外还可以在Codepen上看看@jonathanneal在Codepen上提供的插件模板

如果grid-kiss和媒体查询结合在一起,可以轻易的实现响应式布局效果。如下图所示:

是不是很神奇,是不是没想到未来的CSS还可以这么的写。可以说,大家把CSS都给玩坏了。同时也能证明@Sylvain写的这个PostCSS插件是多么的强大,又是多有意思。

配置环境

文章开头就说了grid-kiss是PostCSS的一个插件,如果你想要正常的使用这个插件,或者尝试玩一把另类的网格制作方式。那么本地就要有一个PostCSS的工作环境。当然了,如果你为了省事的话,你可以使用playground。这里还是说怎么在本地使用吧。

我个人喜欢使用PostCSS和Gulp配合使用,如果从没接触过PostCSS,也不用担心,你可以通过PostCSS深入学习这个系列中的《PostCSS深入学习:Gulp设置》一文配置好环境。接下来的内容假设你配置好PostCSS和Gulp的本地环境。

环境有了,咱们就来安装grid-kiss吧。你可以通过yarn或者npm的方式来进行安装。

yarn:

yarn add postcss-grid-kiss --dev

npm:

npm install postcss-grid-kiss --save-dev

我采用的是后面这种方式安装的。安装完成后,需要在gulpfile.js做一些简单的配置:

var gridkiss = require('postcss-grid-kiss');

gulp.task('css', function(){
    var processors = [
        // autoprefixer(browserOptions),
        cssnext(browserOptions),
        gridkiss({
            fallback: false,
            screwIE: false,
            optimizeCalc: false
        })
    ];

    return gulp.src('./src/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dest'));
});

其中最重要的,也是很关键的部分:

gridkiss({
    fallback: false,
    screwIE: false,
    optimizeCalc: false
})

这三个是grid-kiss的配置选项。具体这几个选项是什么意思?稍后介绍。为了让你能本地更好的运行起来,可以把gulpfile.jspackage.json保存到你项目的根目录下。同时建议你的测试项目结构如图那样:

这个时候打开命令终端,把路径切换到项目根目下,执行:

npm i

然后在命令终端执行gulp命令。这个时候src/style.css(编译前的样式文件)就会编译到dest/style.css(编译后的样式文件)。同时也表明你的环境是OK的。后面我们的样式都是在src/style.css中编辑。另外,你的命令终端不要关闭,这样你只要修改了style.css文件,保存之后,dest/style.css就会自动更新。

配置参数

前面的环境配置中也展示了,grid-kiss有三个选项,在使用的时候可以自行配置。

postcss([ gridkiss({ ...options }) ])

fallback

截至2016年12月,CSS Grid布局规范只是一个候选规范,并没有得到广泛的支持。到2017年3月,支持的浏览器会越来越多,Chrome和Firefox将开始默认支持Grid布局。其中,Mozilla将在3月7日发布的Firefox 52版本上开始支持。@meyerweb也说CSS G

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/keep-css-grids-simple-with-postcss-grid-kiss.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部