web前台入门到实战:CSS自己设置属性+CSS Grid网格实现超级的布局能力

作者 : 开心源码 本文共2665个字,预计阅读时间需要7分钟 发布时间: 2022-05-13 共152人阅读

CSS自己设置属性的工作方式有点像SASS和其余预解决器中的变量,主要的区别在于其它方法都是在浏览器中编译后生成,还是本来的CSS写法。CSS自己设置属性是真正的动态变量,可以在样式表中或者使用javascript即时升级,这使得它们具备更多的可能性。假如你熟习JavaScript,我喜欢把预解决器变量和CSS自己设置属性之间的区别想象成与const和let之间的区别类似——它们都有不同的用途。

CSS自己设置属性可以方便的实现很多功能(例如主题变化)。最近我一直在尝试利用CSS自己设置属性和CSS网格的组合能实现什么神奇的效果,我需要在不同的断点处重新定义grid-template-rows和grid-template-columns属性。下面的代码中有一个例子,我使用SASS变量定义了页面在不同的宽度下不同的列宽值,这些值将传递到grid-template-rows属性中。我对grid-gap属性也做了同样的操作,这样页面宽度不同时元素之间的间距也是不同的:

$wrapper: 1200px;$col: 1fr;$gutter: 20px;$wrapper-l: 90%;$col-l: calc((1000px - (13 * 40px)) / 12);$gutter-l: 40px;$col-xl: calc((1200px - (13 * 50px)) / 12);$gutter-xl: 50px;body {    background-color: lighten(grey, 30%);}.wrapper {    max-width: $wrapper;    margin: 20px auto;    @media (min-width: 1300px) {        max-width: $wrapper-l;    }}.grid {    display: grid;    padding: $gutter;    grid-template-columns: 1fr repeat(12, $col) 1fr;    grid-template-rows: repeat(2, minmax(150px, auto));    grid-gap: $gutter;    border: 1px solid grey;    background: white;    width: auto;    @media (min-width: 1300px) {        grid-template-columns: 1fr repeat(12, $col-l) 1fr;        grid-gap: $gutter-l;        padding: $col-l;    }    @media (min-width: 1500px) {        grid-template-columns: 1fr repeat(12, $col-xl) 1fr;        grid-gap: $gutter-xl;        padding: $col-xl;    }}.grid__item {    border: 1px solid blue;}.grid__item--heading {    grid-column: 2 / 11;}

就如你所看到的,基本上必需在媒体查询中再次写出整个代码块来改变样式,由于变量一旦定义就固定了。(我当然可以使用mixin,但是最终效果是一样的——一大块代码。)

使用CSS自己设置属性,可以减少代码量,由于我只要升级媒体查询中的变量,浏览器就会重新计算网格。十行(sass)代码可能看起来不是一个巨大的节省,但代码的可读性要高得多,由于不必在好几个地方增加媒体查询来解决我们的新变量,我只要在该组件的代码开头公告它们,并且无需担心能否已替换了正在使用的哪个值:

专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停升级最新的教程和学习技巧(从零基础开始到前台项目实战教程,学习工具,全栈开发学习路线以及规划):root {    --wrapper: 1200px;    --col: 1fr;    --gutter: 20px;    @media (min-width: 1300px) {        --wrapper: 90%;        --col: calc((1000px - (13 * 40px)) / 12);        --gutter: 40px;    }    @media (min-width: 1500px) {        --wrapper: 90%;        --col: calc((1200px - (13 * 50px)) / 12);        --gutter: 50px;    }}body {    background-color: lighten(grey, 30%);}.wrapper {    max-width: var(--wrapper);    margin: 20px auto;}.grid {    display: grid;    padding: var(--gutter);    grid-template-columns: 1fr repeat(12, var(--col)) 1fr;    grid-template-rows: repeat(2, minmax(150px, auto));    grid-gap: var(--gutter);    border: 1px solid grey;    background: white;    width: auto;}.grid__item {    border: 1px solid blue;}.grid__item--heading {    grid-column: 2 / 11;}.grid__item--body {    grid-column: 2 / 8;    grid-row: 2 / span 1;}.grid__item--media {    background: hotPink;    grid-column: 11 / 14;    grid-row: 1 / span 2;}

我发现使用CSS Grid的一个特点是,语法非常冗长,而且并不容易快速、轻松地看到正在发生的事情,特别是在复杂的网格中。但是在这个例子中,使用CSS自己设置属性,可以为网格项的大小和坐标设置变量,并且只写一次grid-column和grid-row属性。对我来说,这比每次都写出完整的属性要清楚得多,而且很容易一目了然地看到网格项的位置。

太多的可能性了!

浏览器支持
目前,全球88%的浏览器都支持CSS自己设置属性——Internet Explorer 11及以下版本是显著的例外。这与对CSS Grid网格布局的支持大致相同,这意味着要使用特性查询来区分支持与不支持的浏览器。

可以这样使用@supports公告来测试对css自己设置属性的支持:

@supports(--css: variables) {        .my-div {            --size: 2;            --posX: 3;            grid-column: var('--posX') / span var('--size');        }    }
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » web前台入门到实战:CSS自己设置属性+CSS Grid网格实现超级的布局能力

发表回复