401 lines
12 KiB
SCSS
401 lines
12 KiB
SCSS
// =======================================================================
|
||
// 方向属性核心生成器 (支持所有方向相关属性)
|
||
// =======================================================================
|
||
@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));
|
||
} |