nomo-web/src/styles/variables.scss

// 主题色
$primary-color: #1890ff;
$success-color: #52c41a;
$warning-color: #faad14;
$error-color: #f5222d;

// 文字颜色
$text-color: rgba(0, 0, 0, 0.85);
$text-color-secondary: rgba(0, 0, 0, 0.45);
$disabled-color: rgba(0, 0, 0, 0.25);

// 背景色
$bg-color: #f0f2f5;
$bg-color-light: #fafafa;

// 边框颜色
$border-color: #d9d9d9;
$border-color-split: #f0f0f0;

// 字体大小
$font-size-base: 14px;
$font-size-lg: 16px;
$font-size-sm: 12px;

// 圆角
$border-radius-base: 2px;
$border-radius-sm: 2px;
$border-radius-lg: 4px;

// 间距
$spacing-unit: 8px;
$spacing-xs: $spacing-unit;
$spacing-sm: $spacing-unit * 2;
$spacing-md: $spacing-unit * 3;
$spacing-lg: $spacing-unit * 4;
$spacing-xl: $spacing-unit * 5;

// 阴影
$box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15);
$box-shadow-card:
    0 1px 2px -2px rgba(0, 0, 0, 0.16),
    0 3px 6px 0 rgba(0, 0, 0, 0.12),
    0 5px 12px 4px rgba(0, 0, 0, 0.09);

// 响应式断点
$screen-xs: 480px;
$screen-sm: 576px;
$screen-md: 768px;
$screen-lg: 992px;
$screen-xl: 1200px;
$screen-xxl: 1600px;

// 混合器
@mixin flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

@mixin text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@mixin multi-line-ellipsis($lines: 2) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $lines;
    overflow: hidden;
}

@mixin responsive($breakpoint) {
    @if $breakpoint == xs {
        @media (max-width: $screen-xs) {
            @content;
        }
    } @else if $breakpoint == sm {
        @media (max-width: $screen-sm) {
            @content;
        }
    } @else if $breakpoint == md {
        @media (max-width: $screen-md) {
            @content;
        }
    } @else if $breakpoint == lg {
        @media (max-width: $screen-lg) {
            @content;
        }
    } @else if $breakpoint == xl {
        @media (max-width: $screen-xl) {
            @content;
        }
    } @else if $breakpoint == xxl {
        @media (max-width: $screen-xxl) {
            @content;
        }
    }
}

// 函数
@function rem($px) {
    @return calc($px / 16) + rem;
}

@function vw($px, $base: 375) {
    @return calc($px / $base * 100) + vw;
}