// ======================================================================= // 方向属性核心生成器 (支持所有方向相关属性) // ======================================================================= @mixin directional-property( $property, $values, $exclude: () ) { // 属性类型分组 $group-standard: padding, margin; // 标准方向属性 $group-radius: border-radius; // 圆角属性 $group-border: border, border-top, border-right, border-bottom, border-left; // 边框属性 $group-outline: outline, outline-top, outline-right, outline-bottom, outline-left; // 轮廓属性 $group-position: inset, inset-block, inset-inline, top, right, bottom, left; // 定位属性 $group-size: block-size, inline-size; // 块/行尺寸属性 // 定义每个方向的值 $top: null; $right: null; $bottom: null; $left: null; // 确定处理模式 $is-standard: index($group-standard, $property); $is-radius: index($group-radius, $property); $is-border: index($group-border, $property); $is-outline: index($group-outline, $property); $is-position: index($group-position, $property); $is-size: index($group-size, $property); // ===================================================================== // 解析输入值 - 根据属性类型处理 // ===================================================================== @if type-of($values) == 'list' { $length: length($values); // 单个值 - 所有方向相同值 @if $length == 1 { $top: nth($values, 1); $right: nth($values, 1); $bottom: nth($values, 1); $left: nth($values, 1); } // 两个值 @else if $length == 2 { // 特殊处理:border-radius @if $is-radius { $top: nth($values, 1); $right: nth($values, 2); $bottom: nth($values, 1); $left: nth($values, 2); } // 标准处理:上下 | 左右 @else if $is-standard or $is-border or $is-outline or $is-position { $top: nth($values, 1); $bottom: nth($values, 1); $right: nth($values, 2); $left: nth($values, 2); } // 块/行尺寸处理 @else if $is-size { $top: nth($values, 1); $right: nth($values, 2); } } // 三个值 @else if $length == 3 { // border-radius特殊处理 @if $is-radius { $top: nth($values, 1); $right: nth($values, 2); $bottom: nth($values, 3); $left: nth($values, 2); } // 标准处理 @else if $is-standard or $is-border or $is-outline or $is-position { $top: nth($values, 1); $right: nth($values, 2); $left: nth($values, 2); $bottom: nth($values, 3); } } // 四个值 @else if $length == 4 { $top: nth($values, 1); $right: nth($values, 2); $bottom: nth($values, 3); $left: nth($values, 4); } } @else { // 单个值传递 $top: $values; $right: $values; $bottom: $values; $left: $values; } // ===================================================================== // 生成CSS属性(排除指定方向) // ===================================================================== // 1. 圆角处理 @if $is-radius { @if not index($exclude, top-left) and $top != null { border-top-left-radius: $top; } @if not index($exclude, top-right) and $right != null { border-top-right-radius: $right; } @if not index($exclude, bottom-right) and $bottom != null { border-bottom-right-radius: $bottom; } @if not index($exclude, bottom-left) and $left != null { border-bottom-left-radius: $left; } } // 2. 标准方向处理 (padding, margin) @else if $is-standard { @if not index($exclude, top) and $top != null { #{$property}-top: $top; } @if not index($exclude, right) and $right != null { #{$property}-right: $right; } @if not index($exclude, bottom) and $bottom != null { #{$property}-bottom: $bottom; } @if not index($exclude, left) and $left != null { #{$property}-left: $left; } } // 3. 边框处理 @else if $is-border { // 完整边框设置 @if $property == 'border' { @if not index($exclude, top) and $top != null { border-top-width: nth($values, 1); border-top-style: nth($values, 2); border-top-color: nth($values, 3); } @if not index($exclude, right) and $right != null { border-right-width: nth($values, 1); border-right-style: nth($values, 2); border-right-color: nth($values, 3); } @if not index($exclude, bottom) and $bottom != null { // border-bottom: $bottom; border-bottom-width: nth($values, 1); border-bottom-style: nth($values, 2); border-bottom-color: nth($values, 3); } @if not index($exclude, left) and $left != null { // border-left: $left; border-left-width: nth($values, 1); border-left-style: nth($values, 2); border-left-color: nth($values, 3); } } // 单边边框 @else { $direction: str-slice($property, 8); // 提取方向 @if not index($exclude, $direction) { // #{$property}: $top; #{$property}-width: nth($values, 1); #{$property}-style: nth($values, 2); #{$property}-color: nth($values, 3); } } } // 4. 轮廓处理 @else if $is-outline { // 完整轮廓设置 @if $property == 'outline' { @if not index($exclude, top) and $top != null { outline-top: $top; } @if not index($exclude, right) and $right != null { outline-right: $right; } @if not index($exclude, bottom) and $bottom != null { outline-bottom: $bottom; } @if not index($exclude, left) and $left != null { outline-left: $left; } } // 单边轮廓 @else { $direction: str-slice($property, 8); // 提取方向 @if not index($exclude, $direction) { #{$property}: $top; } } } // 5. 定位处理 @else if $is-position { // inset简写处理 @if $property == 'inset' { @if not index($exclude, top) and $top != null { top: $top; } @if not index($exclude, right) and $right != null { right: $right; } @if not index($exclude, bottom) and $bottom != null { bottom: $bottom; } @if not index($exclude, left) and $left != null { left: $left; } } // inset-block 和 inset-inline @else if $property == 'inset-block' { @if not index($exclude, top) and $top != null { top: $top; } @if not index($exclude, bottom) and $bottom != null { bottom: $bottom; } } @else if $property == 'inset-inline' { @if not index($exclude, left) and $left != null { left: $left; } @if not index($exclude, right) and $right != null { right: $right; } } // 单一定位 @else { @if not index($exclude, $property) { #{$property}: $top; } } } // 6. 尺寸处理 @else if $is-size { @if $property == 'block-size' { @if not index($exclude, top) and $top != null { height: $top; } } @else if $property == 'inline-size' { @if not index($exclude, left) and $left != null { width: $left; } } } } // ======================================================================= // 快捷混合宏:标准属性 // ======================================================================= @mixin padding($values, $exclude: ()) { @include directional-property(padding, $values, $exclude); } @mixin margin($values, $exclude: ()) { @include directional-property(margin, $values, $exclude); } @mixin border-radius($values, $exclude: ()) { @include directional-property(border-radius, $values, $exclude); } // ======================================================================= // 快捷混合宏:边框属性 // ======================================================================= @mixin border($value, $exclude: ()) { @include directional-property(border, $value, $exclude); } @mixin border-top($value, $exclude: ()) { @include directional-property(border-top, $value, $exclude); } @mixin border-right($value, $exclude: ()) { @include directional-property(border-right, $value, $exclude); } @mixin border-bottom($value, $exclude: ()) { @include directional-property(border-bottom, $value, $exclude); } @mixin border-left($value, $exclude: ()) { @include directional-property(border-left, $value, $exclude); } // ======================================================================= // 快捷混合宏:轮廓属性 // ======================================================================= @mixin outline($value, $exclude: ()) { @include directional-property(outline, $value, $exclude); } @mixin outline-top($value, $exclude: ()) { @include directional-property(outline-top, $value, $exclude); } @mixin outline-right($value, $exclude: ()) { @include directional-property(outline-right, $value, $exclude); } @mixin outline-bottom($value, $exclude: ()) { @include directional-property(outline-bottom, $value, $exclude); } @mixin outline-left($value, $exclude: ()) { @include directional-property(outline-left, $value, $exclude); } // ======================================================================= // 快捷混合宏:定位属性 // ======================================================================= @mixin inset($values, $exclude: ()) { @include directional-property(inset, $values, $exclude); } @mixin inset-block($values, $exclude: ()) { @include directional-property(inset-block, $values, $exclude); } @mixin inset-inline($values, $exclude: ()) { @include directional-property(inset-inline, $values, $exclude); } @mixin top($value, $exclude: ()) { @include directional-property(top, $value, $exclude); } @mixin right($value, $exclude: ()) { @include directional-property(right, $value, $exclude); } @mixin bottom($value, $exclude: ()) { @include directional-property(bottom, $value, $exclude); } @mixin left($value, $exclude: ()) { @include directional-property(left, $value, $exclude); } // ======================================================================= // 快捷混合宏:尺寸属性 // ======================================================================= @mixin block-size($value, $exclude: ()) { @include directional-property(block-size, $value, $exclude); } @mixin inline-size($value, $exclude: ()) { @include directional-property(inline-size, $value, $exclude); } // ======================================================================= // 组合混合宏 // ======================================================================= // 带圆角的边框 @mixin bordered($border-value, $radius-value) { @include border($border-value); @include border-radius($radius-value); } // 绝对定位容器 @mixin absolute-container($inset: 0) { position: absolute; @include inset($inset); } // 固定定位容器 @mixin fixed-container($inset: 0) { position: fixed; @include inset($inset); } // ======================================================================= // 圆角辅助混合宏 // ======================================================================= @mixin border-top-radius($value) { @include border-radius($value 0 0, (bottom-right, bottom-left)); } @mixin border-right-radius($value) { @include border-radius(0 $value 0 0, (top-left, bottom-left)); } @mixin border-bottom-radius($value) { @include border-radius(0 0 $value, (top-right, top-left)); } @mixin border-left-radius($value) { @include border-radius(0 0 0 $value, (top-right, bottom-right)); }