zoukankan      html  css  js  c++  java
  • CSS-自定义变量

    使用背景:

    一些常见的例子:
    
    为风格统一而使用颜色变量
    一致的组件属性(布局,定位等)
    避免代码冗余
    
    *更方便的从CSS向JS传递数据(例如媒体断点)

    为什么使用:

    以下几点是未来CSS属性的简短说明:
    
    动态性,可以在运行时更改
    可以方便的从JS中读/写
    可继承,可组合,同时具有作用域

    定义:

    定义
    用这样的方式来声明一个变量:--variable-name: variable-value;(变量名是大小写敏感的)。变量的值可以是颜色、字符串、多个值的组合等:
    :root{
        --base_color:#398bd0;
        --bg_color:#4a4a4a;
    }

    为什么选择两根连词线(--)表示变量?

    为什么选择两根连词线(--)表示变量?
    $foo被 Sass 用掉了,
    @foo被 Less 用掉了。
    为了不产生冲突,官方的 CSS 变量就改用两根连词线了

    用法:

    .res_nav ul li:hover a{color:var(--base_color);}
    
    .res_contact_btn a:hover{background:var(--base_color);}

    作用域:

    使用:root 作用域来定义全局变量:

    :root{ --global-var: 'global'; }

    如果想让某个变量只在部分元素/组件下可见,只需要在特定的元素下定义该变量:

    <div class="block"> 
    My block is 
        <div class="block__highlight">awesome</div> 
    </div>

    /*css文件*/ .block
    { --block-font-size: 1rem; font-size: var(--block-font-size); }
    .block__highlight
    { --block-highlight-font-size: 1.5rem; font-size: var(--block-highlight-font-size); }

    媒体查询也可以提供作用域:

    @media screen and (min- 1025px) { 
        :root { 
            --screen-category: 'desktop';
         } 
    }    

    下面一个例子来展示伪类下的作用域(例如,:hover):

  • 相关阅读:
    html5不能播放视频的方法
    mysql找出重复数据的方法
    jquery each循环遍历完再执行的方法
    Android:TextView跑马灯-详解
    日志处理(一) log4j 入门和详解(转)
    周记 2014.11.08
    周记 2014.11.01
    linux下解压命令大全
    关于Context []startup failed due to previous errors
    周记 2014.10.25
  • 原文地址:https://www.cnblogs.com/limengjie0104/p/9097215.html
Copyright © 2011-2022 走看看