用法

复用

===== extend =====
#default {
 font-size: 14px;
}
.text-primary{
 @extend #default;
 color: red;
}

===== mixin =====
@mixin() {
 font-size: 14px;
  @content;
}
.text-primary{
 @include @default(){
  color: red;
 }
}

// 使用 as 可以重命名
@use './vars.scss' as a;

.footer {
    color: a.$primary_color;
}

@import url('./vars.scss'); // 该行不会被编译，跟 css 的写法是一样的；也就是动态 css，当该文件执行的时候，会再去请求下载对应文件

遍历

// 遍历列表
$colors: #333, #666, #999, #ccc;

@each $color in $colors {
    .box-#{$color} {
        background-color: $color;
    }
}

// 遍历 map
$sizes: (
    small: 12px,
    medium: 16px,
    large: 20px,
);

@each $name, $size in $sizes {
    .text-#{$name} {
        font-size: $size;
    }
}

@for $i from 1 through 4 {
    &:nth-child(#{$i}) {
        [data-role='interface'] {
            &::after {
                background-image: url('../components/sections/assets/about_card_#{$i}.webp');
            }
        }
    }
}

Sass 媒体查询

// 混合
@mixin flex {
    display: flex;
    justify-content: center;
    align-items: center;
}
.header {
    @include flex;
}
// 混合2
@mixin flex($layout) {
    display: flex;
    justify-content: $layout;
    align-items: $layout;
    @content;
}
.header {
    width: 100%;
    @include flex(start) {
        height: 50px;
    }
}
// 实现
$BreakPoints: (
    'phone': (
        320px,
        480px,
    ),
    'pad': (
        481px,
        768px,
    ),
    'tv': 1200px,
);
@mixin responseTo($breakname) {
    $bp: map-get($BreakPoints, $breakname);
    @if type-of($bp) == 'list' {
        @media (min-width: nth($bp, 1)) and (max-width: nth($bp, 2)) {
            @content;
        }
    } @else {
        @media (min-width: $bp) {
            @content;
        }
    }
}

Houdini API

定义一个 css 变量，那么动画就可以监听到这个参数的变化，实现动画效果

@property --direc {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.card {
    --direc: 0deg;
    background-image: linear-gradient(var(--direc) #222 #333 60% #666);
    animation: rotate 3s linear infinite;
}
@keyframes rotate {
    to {
        --direc: 360deg;
    }
}