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

  • 相关阅读:
    高级数据类型--字典(dict)
    一些JS常用的方法
    怎样提高WebService的性能
    Microsoft Enterprise Library 5.0 系列(三)
    Microsoft Enterprise Library 5.0 系列(四)
    Expression Blend学习二UI布局
    Expression Blend学习四控件
    Expression Blend学习5控件
    Expression Blend学习动画基础
    WPF三维图形
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13881474.html
Copyright © 2011-2022 走看看