sass 个人开发笔记

最新推荐文章于 2024-09-29 11:37:28 发布

鱼缸盖被子了

最新推荐文章于 2024-09-29 11:37:28 发布

阅读量79

点赞数

文章标签： sass 个人开发 css

本文链接：https://blog.csdn.net/yh8899abc/article/details/122000541

版权

sass个人开发笔记

语法
变量
- for循环
- if else 判断

语法

变量

<style lang="scss">
	$uint: 360 / 5;
</style>

for循环

@for
$i 变量
#{} 中填写变量

<style lang="scss">
@for $i from 1 through 12 {
    li:nth-of-type(#{$i}) span {
        transform: rotateY(#{$i}deg) translateZ(470px);
    }
}
</style>

if else 判断

@if
@else
$i == 1 判等

<style lang="scss">
@for $i from 1 through 6 {
    .zoetrope div:nth-child(#{$i}) {
        @if ($i == 1) {
            transform: rotateY(0deg) translateZ(470px);
        }
        @else {
            transform: rotateY(#{$unit * ($i - 1)}deg) translateZ(470px);
        }
    }
}
</style>