Sass 使用小技巧 css样式， SassScript 夜间模式 Sass函数 random() @for循环

SassScript

变量

在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能。 SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。
▪	变量
SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样：

$width: 5em;
	#main {
      width: $width;
    }

应用实例

.cast-box{
        height: 637rpx;       
         $left:0;
        @for $i from 0 through 5{
          & .numcast#{$i} {
            left: $left;
          }
          $left: $left + 151rpx;
        }
	}

Sass 函数

@for循环 和 random()的使用

实例应用

<view class="star-twinkle">
      <block v-for="i in 18" :key="i">
        <view :class="['radius',`border${i}`]"></view>
      </block>
    </view>

style

<style lang="scss" scoped>
.star-twinkle{
    width: 270rpx;
    height: 210rpx;
    position: absolute;
    top: 500rpx;
    right: 16rpx;
    .radius{
      border-radius: 50%;
      background: #A2D9F0;
      position: absolute;
      filter: blur(1px);
      box-shadow: 0 0 10px rgba(255, 255, 255,.6);
      $width:0;
      $time:-18;
      //  循环出若干个大小不一的点   通过random()使点出现不同的位置
      @for $i from 0 through 18{
        &.border#{$i}{
          width:$width;
          height:$width;
          top:#{random(210)}rpx;
          left:#{random(270)}rpx;
          animation: flymove 26s linear #{$time}s infinite normal;
        }
        $width:$width+1rpx;
        $time:$time+1;
      }
    }
  }
  @keyframes flymove {
   0% {
      transform: translate(0, 0);
    }
    18% {
      transform: translate(30rpx, -3rpx);
    }
    36% {
      transform: translate(60rpx, 2rpx);
    }
    48% {
      transform: translate(0rpx, 60rpx);
    }
    62% {
      transform: translate(-30rpx, 0rpx);
    }
    80% {
      transform: translate(10rpx, -30rpx);
    }
    100% {
      transform: translate(0rpx, 0rpx);
    }
}
</style>

编译之后代码 css样式

$alpha,透明度

• $alpha,透明度

background:rgba(51, 51, 51, 1)；
background:rgba($color:#333333,$alpha:1);

//¥  表示 ￥

夜间模式

filter: invert(xxx); —— CSS中的“反相”：其作用元素拥有这个值时会发生色调“翻转”，比如：白-黑；当作用元素是img图片时，会使图片色调也反转
xxx是定义转换的比例值。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。也可用0和1以及之间的小数表示。若值未设置，值默认是0。

   .btn{
	filter:invert(1); 
	}

这时候，就会对整个页面有效果。若页面中有图片元素，正如上面所说：invert会对图片造成“反转”效果（这才是它的本意！）。
这时我们可以在图片上用到filter的另一个属性值：inherit：

img{
filter: inherit;  /** 又做了一次反转 **/
}

当然，你还可以更简单的完成：

body{
	filter: invert(1) hue-rotate(180deg);
}

hue-rotate(deg)：给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。

更多内容

扫码关注微信公众号-前端程序猿Pro，不止于前端