美文网首页
sass常用

sass常用

作者: 江火渔枫 | 来源:发表于2021-01-16 14:59 被阅读0次

list

//定义动画
@keyframes run {
  0% {
    transform: translateX(0);
  }
  100% {
    left: -320%;
    transform: translateX(-100%);
  }
}
//定义list
$list: #66dacc, #d9e2ee, #4483de, #1391da, #f3bc41, #5197ca;

//随机取list值
  @function sample() {
    @return nth($list, random(length($list)));
  }

//循环
  @for $i from 1 through 15 {
    .item#{$i} {
      animation: run #{$i * 3 + 182}s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      font-size: (random(20) + 20) + px;
      color: sample();
    }
  }
}

相关文章

  • gulp常用插件整理(持续更新)

    gulp常用插件整理 1.gulp-sass(sass编译) 2.gulp-compass(sass编译) 3.g...

  • gulp常用插件整理

    gulp常用插件整理 1.gulp-sass(sass编译) 2.gulp-compass(sass编译) 3.g...

  • sass

    很好的总结:sass:常用备忘[https://www.cnblogs.com/chyingp/p/sass-ba...

  • vue 项目常用加载器及配置

    vue 项目常用加载器及配置 1.安装sass: 1.1 由于sass-loader依赖于node-sass,所以...

  • sass常用记录

    sass常用记录 多写才能记住 基础的语法 还是要记一下用法 安装sass 监听,sass --watch sas...

  • sass常用

    list

  • sass/git/gulp

    sass用法指南sass语法 常用git指令git-book gulp详细入门教程gulp使用指南segmentf...

  • 学会这两点,你就可以说会LESS

    为什么使用less? 常用的css预编译技术有sass、less、Stylus,三者各有特点。sass:出现最早,...

  • SASS常用样式总结

    关于媒体查询 关于flex布局 关于动画 透明度 超出的文本省略 圆角 阴影 居中

  • 常用的 Sass mixins

    Mixin 是 Sass 中用来方便地复用代码的方法,你可以简单点理解成函数,可以传递参数,参数名以$符号开始,多...

网友评论

      本文标题:sass常用

      本文链接:https://www.haomeiwen.com/subject/hiunaktx.html