scss好用的用法汇总

版权声明：如需转载请参阅《转载说明》 https://blog.csdn.net/automation13/article/details/82704324

• 混合指令

1. 某一条件下可用使用某些样式，比如iPhone X条件下要适配刘海屏

@mixin isIphoneX() {
  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){
    @content;
  }
}

.myClassName{
  background: red;
  @include isIphoneX(){
    background: green;
  }
}

• 变量

1. 使用calc时使用变量

$myHeight: 50px;

.myClassName{
    height: calc(100% - #{$myHeight});
}

sass中文网：

https://www.sass.hk/docs/