zoukankan      html  css  js  c++  java
  • 如何动态切换页面的可选肤色

    以下以less为例(其他框架的使用原理都相同)来描述如何动态切换背景肤色:

    1.创建var.less存放样式变量
    
    //绿色
    
    @green-background-color: green;
    
    //红色
    
    @red-background-color: red;
    
    2.创建mixin.less存放混合器 //注:&符号为嵌套外层的父选择器,放在.them-green前面则被拼接到.theme-green前面,放在.theme-green后面则被拼接到后面
    
    .mixin-background() {
    
      .theme-green & {
    
        background-color: @green-background-color;
    
      }
    
      .theme-red & {
    
        background-color: @red-background-color;
    
      }
    
    }
    
    3.在样式中使用混合器
    
    .container{
    
      .mixin-background;
    
    }

    编译结果
    .theme-green .container{background-color: green;}

    .theme-red .container{background-color: red;}

  • 相关阅读:
    deepin 系统更新命令
    安装mongdb
    读model所得
    上周某一天
    在项目中直接执行里面的文件
    数据库(六)
    数据库(五)
    数据库(四)
    数据库(三)
    数据库(二)
  • 原文地址:https://www.cnblogs.com/chenxiangling/p/10901390.html
Copyright © 2011-2022 走看看