码迷,mamicode.com
首页 > Web开发 > 详细

学习CSS自定义属性

时间:2017-07-23 12:32:20      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:any   自定义   定义   一个   全局   variable   title   root   post   

 
 

今天看了阮一峰老师的博客,看到一篇关于css变量的文章。。。自己在这边整理一下。

1.声明css变量:

  body{          

   --foo: #7F583F;
   --bar: #F7EFD2;

  }  

  用--来声明变量,原因很简单因为$foo被sass用掉了,@foo被less用掉了,所以css变量声明选择--foo。

  注意:变量只能用作属性值,不能用作属性名。如:--foo:margin-top; --foo:20px  错误!!!

2.var()函数:一个参数var(--foo)用于读取变量的值;两个参数 var (--foo,#456798)时,第二个参数为默认值,当变量不存在时,使用默认值。

  注意:第二个参数不处理内部的逗号和空格:

  var(--foo,“tom”,“jack”),tom和jack为var()的第二个参数。

  var(--foo,10px 20px 15px),同理10px 20px 15px为第二个参数。

3.变量值的类型:变量为字符串时可以与其他字符串拼接。

  --bar :"hello";

  --foo : var(--bar)" world";

  变量为数值时不能与单位直接连用,需要用calc()函数进行拼接

  --foo:20;

  margin-top:var(--foo)px  //无效

  margin-top:calc(var(--foo)*1px); // 有效

  变量带有单位时,不能是字符串,写成字符串无效。              

  /* 无效 */
  .foo {
    --foo: ‘20px‘;
    font-size: var(--foo);
  }

  /* 有效 */
  .foo {
    --foo: 20px;
    font-size: var(--foo);
  }

4.变量的作用域:变量的作用域与css层叠样式的规则一致             

  <style>
   :root { --color: blue; }
   div { --color: green; }
   #alert { --color: red; }
   * { color: var(--color); }
    </style>

   <p>blue</p>
   <div>green</div>
   <div id="alert">red</div>

  全局变量通常放在 :root {} 里面

基本的语法就这些,详情请看:http://www.ruanyifeng.com/blog/2017/05/css-variables.html。

学习CSS自定义属性

标签:any   自定义   定义   一个   全局   variable   title   root   post   

原文地址:http://www.cnblogs.com/wildWolf10041520/p/7224123.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!