如果要定义CSS变量是全局变量,则需要将其添加到:root
声明中(:root
等效于)。 如果该变量特定于组件,则可以在该组内声明中定义它。
在下面的例子中,我定义了一个全局变量--size
,它用于square
元素的宽度和高度。
:root { --size: 50px; } .square { width: var(--size); height: var(--size); }
如果--size
没有定义,要怎么办呢?在传递的变量无效的情况下,CSS 支持定义默认变量或回退变量。
在下面的例子中的 var(--size, 10px)
。如果--size
无效,则宽度和高度值将为 10px
。
.square { width: var(--size, 10px); height: var(--size, 10px); }
除此之外,还可以在内联CSS样式中使用CSS变量。例如
HTML
.elem { background: var(--background); }接着, 我们以上述这些概念,还演示一些事例。
CSS网格示例
侧边栏和主内容
在此设计中,我将CSS网格用于以下各项:
- 边栏和主菜单
- 表单项
- 三列布局
侧边栏的宽度是固定的,主内容是变化。假设侧边栏的宽度是
240px
。1.边栏和主菜单
Html
Html
.o-grid { display: grid; grid-template-columns: var(--columns); }2. 表单项
按照设计,每行有两列,html 结构如下:
Html
CSS
.o-grid { display: grid; grid-template-columns: var(--columns); }3. 三列布局
在下面的示例中,我添加了
--repeat-number:3
和--gap:8px
作为内联CSS。 这些变量将添加到o-grid
类,网格的设置将基于这些变量。HTML
CSS
.o-grid { display: grid; grid-template-columns: repeat(var(--repeat-number), 1fr); grid-gap: var(--gap, 0); }我喜欢在CSS变量中添加默认值,以防变量没有被设置。在上面的代码中,我使用了
var(--gap, 0)
,如果使用者没有提供--gap
变量,则其默认值将为0
。动态网格项:
minmax
对我来说,这是一个广泛使用的用例,并且非常重要。我经常使用Grid
minmax
,但是当我在多个页面上使用它时,我遇到了一个问题。让我们举一个不使用 CSS 变量的基本示例。
在 CSS 中,我使用
minmax
为每个网格项目定义最小宽度250px
。CSS
.o-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr); grid-gap: 16px; }现在,如果设计要求网格项目的宽度至少为
300px
,应该怎么做? 我需要创建类似以下版本吗?.o-grid--2 { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }想象一下,有五个不同的网格,每个网格具有不同的项目宽度,所以以上不是正确的解决方案。
使用CSS变量,我可以执行以下操作
.o-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--item-width), 1fr); grid-gap: var(--gap); }在HTML中,就可以在标签上设置 CSS 变量:
事例源码:https://codepen.io/shadeed/pen/7d3e0d575a5cecb86233fc7d72fa90d4
Flexbox示例
在示例中,有一个文章标题,其中包含作者姓名和标签。 这些在页面中的排布方式是动态变化,所以需要一种快速切换这些布局方式的方法 。
HTML
Article title
By Ahmad Shadeed
Published under: CSS, Design
CSS
.article-header__meta { display: flex; justify-content: var(--justify); }有了它,我可以调整内联样式以将值更改为另一个关键字。 我发现这在进行快速原型制作甚至是制作网站时很有用。
按钮
按钮宽度
CSS 变量也适用于按钮元素。 假设有一个带有两个
input
字段和一个按钮的表单。我的目的是通过使用内联CSS变量来控制按钮的宽度。 有时,按钮应占据其父控件的
100%
宽度。html
按钮颜色
另一个有用的用途是当有重影按钮(轮廓按钮)时。 按钮的颜色可以是任何颜色,通过使用CSS变量,可以轻松更改颜色。
HTML
在CSS中,定义了以下样式:
.c-avatar { display: inline-block; margin-right: 2rem; width: calc(var(--size, 1) * 30px); height: calc(var(--size, 1) * 30px); object-fit: cover; border-radius: 50%; box-shadow: 0 3px 10px 0 rgba(#000, 0.2); }通过使用
Calc()
函数,我可以传递一个--size
变量,它将乘以一个基本宽度值,在HTML中定义--size
变量:事例源码:https://codepen.io/shadeed/pen/cdaac5ff667e1f7d9c8241655441f10d
英文原文地址:https://css-tricks.com/patterns-for-practical-css-custom-properties-use/
作者:Ahmad shaded
更多编程相关知识,请访问:编程入门!!
以上就是利用CSS变量来提高灵巧布局效率的小技巧的详细内容,更多请关注其它相关文章!
写下你的评论吧 !推荐阅读
本文主要解析了在Lodop中使用特殊符号打印设计和预览样式不同的问题。由于调用的本机ie引擎版本可能不同,导致在不同浏览器下样式解析不同。同时,未指定文字字体和样式设置也会导致打印设计和预览的差异。文章提出了通过指定具体字体和样式来解决问题的方法,并强调了以打印预览和虚拟打印机测试为准。 ... [详细]蜡笔小新 2023-12-14 18:29:32 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]蜡笔小新 2023-12-14 18:18:21 本文详细介绍了Java中final关键字的含义和用法。final关键字可以修饰非抽象类、非抽象类成员方法和变量。final类不能被继承,final类中的方法默认是final的。final方法不能被子类的方法覆盖,但可以被继承。final成员变量表示常量,只能被赋值一次,赋值后值不再改变。文章还讨论了final类和final方法的应用场景,以及使用final方法的两个原因:锁定方法防止修改和提高执行效率。 ... [详细]蜡笔小新 2023-12-14 18:07:46 本文介绍了求解gcdexgcd斐蜀定理的迭代法和递归法,并解释了exgcd的概念和应用。exgcd是指对于不完全为0的非负整数a和b,gcd(a,b)表示a和b的最大公约数,必然存在整数对x和y,使得gcd(a,b)=ax+by。此外,本文还给出了相应的代码示例。 ... [详细]蜡笔小新 2023-12-14 17:48:30 本文介绍了EPICS Archiver Appliance存储waveform记录的尝试过程,并分析了其所需的资源容量。通过解决错误提示和调整内存大小,成功存储了波形数据。然后,讨论了储存环逐束团信号的意义,以及通过记录多圈的束团信号进行参数分析的可能性。波形数据的存储需求巨大,每天需要近250G,一年需要90T。然而,储存环逐束团信号具有重要意义,可以揭示出每个束团的纵向振荡频率和模式。 ... [详细]蜡笔小新 2023-12-14 17:43:56 本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]蜡笔小新 2023-12-14 17:15:38 本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]蜡笔小新 2023-12-14 17:06:58 电销机器人作为一种人工智能技术载体,可以帮助企业提升电销效率并节省人工成本。然而,电销机器人市场缺乏统一的市场准入标准,产品品质良莠不齐。创业者在代理或购买电销机器人时应注意谨防用录音冒充真人语音通话以及宣传技术与实际效果不符的情况。选择电销机器人时需要考察公司资质和产品品质,尤其要关注语音识别率。 ... [详细]蜡笔小新 2023-12-14 16:31:48 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]蜡笔小新 2023-12-14 16:19:10 本文介绍了如何去除Win7快捷方式的箭头的方法,通过生成一个透明的ico图标并将其命名为Empty.ico,将图标复制到windows目录下,并导入注册表,即可去除箭头。这样做可以改善默认快捷方式的外观,提升桌面整洁度。 ... [详细]蜡笔小新 2023-12-14 16:17:05 本文介绍了数据库的存储结构及其重要性,强调了关系数据库范例中将逻辑存储与物理存储分开的必要性。通过逻辑结构和物理结构的分离,可以实现对物理存储的重新组织和数据库的迁移,而应用程序不会察觉到任何更改。文章还展示了Oracle数据库的逻辑结构和物理结构,并介绍了表空间的概念和作用。 ... [详细]蜡笔小新 2023-12-14 16:00:02 本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]蜡笔小新 2023-12-14 15:52:03 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]蜡笔小新 2023-12-14 15:43:50 本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]蜡笔小新 2023-12-14 15:39:51 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]蜡笔小新 2023-12-14 15:03:14 微微aviviya这个家伙很懒,什么也没留下!Tags | 热门标签RankList | 热门文章
- 1wave文件头解析
- 2初次使用go mod开发golang项目
- 3com.atlassian.plugin.spring.scanner.annotation.export.ExportAsService.
()方法的使用及代码示例 - 4centos 7 安装CUDA9.0 +CUDNN
- 5leetcode 179 自定义一个字符比较函数
- 6计算机网络:数据交换的三种方式及其比较
- 7空投活动预注册域名 激活教程
- 8c# – 此DateTime代码是否与DateTime.now有所不同
- 9python去除空行_python中去掉空行的问题
- 10从GitHub安装软件包的问题
- 11Arduino -- DHT11温湿度传感器自动发微博
- 12php网站上怎么实现全景,CSS3如何实现全景图
- 13开发笔记:LSJ_NHibernate
- 14【读】关系抽取—(1)AttentionBased Bidirectional Long ShortTerm Memory Networks for Relation Classification
- 15开发笔记:#yyds干货盘点#Java ASM系列:(096)检测潜在的NPE
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有