zoukankan      html  css  js  c++  java
  • [CSS] Use CSS Variables Almost like Boolean Values with Calc (maintainable css)

    In this lesson, we explore how you can use CSS variables almost like Boolean values in combination with calc().

    By setting a variable to 1 or 0 and then using logical operators, we can abstract and decouple areas of our CSS. This can ease maintenance when our CSS starts to get complicated. In this example, we walk through how a variable could be used to dictate part of an element's transform.

    <img class="transformed" src="https://assets.codepen.io/605876/avatar.png" />
    <img src="https://assets.codepen.io/605876/avatar.png" />
    img {
      height: 25vmin;
      --rotation: calc(var(--transformed) * 90deg);
      --translation: calc(var(--transformed) * -100%);
      --skew: calc(var(--transformed) * 20deg);
      transform: rotate(var(--rotation, 0deg)) scale(var(--scale)) translate(var(--translation, 0), 0) skew(var(--skew, 0));
    }
    
    img:nth-of-type(1) {
      --transformed: 1;
      --scale: 0.5;
    }
    img:nth-of-type(2) {
      --scale: 0.75;
    }

    All the variable in img is depended on '--transofrmed: 1' variable

      --rotation: calc(var(--transformed) * 90deg);
      --translation: calc(var(--transformed) * -100%);
      --skew: calc(var(--transformed) * 20deg);

    This is a good way to wirte maintainable css code

  • 相关阅读:
    一个菜鸟把Vue项目打包为APP的道路
    echarts
    no module named selenium
    git使用教程
    JDK安装与环境变量配置
    家具摆件
    家店分会场
    双十一电器城
    室内门锁
    http://cjy.suda.edu.cn/File.aspx?id=427
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13881474.html
Copyright © 2011-2022 走看看