旧木逢春的css原生变量还能起死回生嘛?

提起css原生变量,很多人估计就要挠头了,特别是近几年培训出身的“速成工作者”!一定也是满头的问号,是不是已经有画面感了!

七娃也是在“思否”这个平台看到,所以回顾一下这个被人遗忘在角落里的好工具!原生css最初被抛弃的原因就是“浏览器的不兼容,ie,欧朋等浏览器的不支持”,但是随着互联网的发展,逐渐的浏览器都已经支持了这个“老技术”,而这个技术相对于这几年的less和sass来说,一看就懂,容易入手,10分钟能学会!这就是css原生变量的强大优势,而且配合bootstrap的话,开发响应式网站,那可是溜得飞起!

一、基本用法

先声明这个变量的属性,然后再引入,声明初始css样式用 :root ,声明的属性必须带 –,命名可以随意,不过需要让别人看懂!引入格式 var(–变量名)

:root{
				--width: 100%;
				--height: auto;
				--border: 1px solid #ddd;
				--font: 16px/1.5 "微软雅黑" #333;
				--background: red;
				--br: 6px;
}
.box{
				width: var(--width);
				height:100px;
				background: var(--background);
				border-radius: var(--br);
}

上面我们声明了盒子的宽高背景色字体大小,以及圆角,特别是圆角,七娃专门自定义这样写,咱们看看能不能生效,效果如下:

很明显生效了!

二、变量作用域

我们知道js的变量有作用域,在这里原生的css变量也是有作用域的,我们默认的:root,里面声明的css样式,可以说成全局的作用域,每个地方都可以使用;

但是要是想局部生效怎么用?我不想用全局的样式的了,颜色不合适!我们看一下怎么想修改:

:root{
				--width: 100%;
				--height: auto;
				--border: 1px solid #ddd;
				--font: 16px/1.5 "微软雅黑" #333;
				--background: red;
				--br: 6px;
			}
			.box{
				width: var(--width);
				height:100px;
				--background: #333;
				background: var(--background);
				border-radius: var(--br);
			}

对,我们在box这个元素的样式里面,重新声明了这个背景色,并设置为#333,是全局的生效还是box元素里面的声明有效果呢!看结果:

生效了,所以需要局部作用域的使用就是在该元素的自身重新声明属性即可!

三、主要用途

主要用途,我们上面提到过就是和bootstrap结合使用,可以实现快速开发,果断你会放弃less和sass,那样太费劲了!

如下写法,对于不同分辨率,我们只需要修改相对分辨率里面的属性即可修改对应的值,是不是很方便!

	             :root {
			  --mainWidth:1000px;
			  --leftMargin:100px;
			}
			 
			.main {
			  width: var(--mainWidth);
			  margin-left: var(--leftMargin);
			}
			 
			@media screen and (min-width:1480px) {
			    :root {
			      --mainWidth:800px;
			      --leftMargin:50px;
			    }
			}

除此之外,css原生变量还可以用来计算和组合使用,也可以用到js中,更多的用途有待你去探索

赞(4) 打赏
未经允许不得转载:版权所有@七娃设计室七娃博客 » 旧木逢春的css原生变量还能起死回生嘛?
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

七娃设计,让设计贴近生活

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏