常见CSS场景

1.激活A元素的时候改变B元素的属性

    .A {
       xxxx
        &:focus .B{
         // 这里使用的过度属性，意思是在0.2秒内完成width=450px的动画
          width: 450px;
          transition: all 0.2s ease-in;
        }
      }

2.less/sass中鼠标划过时改变该元素的样式

    a {
      font-size: 14px;
      line-height: 30px;
      color: #506697;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      &:hover {
        color: #ff7624;
        text-decoration: underline;
      }
    }

等价于

   a {
      font-size: 14px;
      line-height: 30px;
      color: #506697;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    a:hover {
      color: #ff7624;
      text-decoration: underline;
    }

3、vue中绑定多个动态class

<i :class=" { classB: true, classC: isC }"></i>

    :class="[
      type ? 'el-button--' + type : '',
      buttonSize ? 'el-button--' + buttonSize : '',
      {
        'is-disabled': buttonDisabled,
        'is-loading': loading,
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle
      }
    ]"