API | 空闲星

settings

css 变量

包含 css 的颜色、字体、字号、行高。影响基础样式、mixins 和 atomic 颜色相关样式，

1.颜色

base：html 默认字色（--aoda-color2）
mixins：font-color、selection
atomic：animation、typography、visual

2.字体

base：html 默认字体（--aoda-font-family1）

3.字号

base：html 默认字号（--aoda-font-size1）、h1 和 h2 默认字号（--aoda-font-size2）
mixins：font-size

4.行高

base：html 默认行高（--aoda-line-height1）
mixins：font-size

:root {
  // 1.颜色
  --aoda-color1: #fff;
  --aoda-color2: #333;
  --aoda-color3: #666;
  --aoda-color4: #aaa;
  --aoda-color5: #f3f4f7;
  --aoda-color6: #3b7ff3;
  --aoda-color7: #fff;
  --aoda-color8: #fff;
  --aoda-color9: #fff;
  --aoda-color10: #fff;
  --aoda-color11: #fff;
  --aoda-color12: #fff;
  --aoda-color13: #fff;
  --aoda-color14: #fff;
  --aoda-color15: #fff;
  --aoda-color16: #fff;
  --aoda-color17: #fff;
  --aoda-color18: #fff;
  --aoda-color19: #fff;
  --aoda-color20: #fff;

  // 2.字体
  --aoda-font-family1: 'PingFangSC-Medium', 'PingFang SC', -apple-system, blinkmacsystemfont,
    'Helvetica Neue', helvetica, segoe ui, arial, roboto, 'miui',
    'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
  --aoda-font-family2: avenir-heavy, 'PingFang SC', 'Helvetica Neue', arial,
    sans-serif;

  // 3.字号
  --aoda-font-size1: 16px;
  --aoda-font-size2: 20px;

  // 4.行高
  --aoda-line-height1: normal;
}

scss 变量

包含 scss 的控制参数。影响基础样式、mixins 的函数参数和 atomic 的生成参数。

1.mixins 参数

base：dpr/暗色模式/响应式的媒体查询
mixins：image-dpr

2.atomic 参数

atomic：所有

/****************************** 一.mixins参数 ******************************/

// 媒体查询：576px-
$mixins-xs: 'only screen and (max-width: 575px)';

// 媒体查询：576px+
$mixins-sm: 'only screen and (min-width: 576px) and (max-width: 767px)';

// 媒体查询：768px+
$mixins-md: 'only screen and (min-width: 768px) and (max-width: 991px)';

// 媒体查询：992px+
$mixins-lg: 'only screen and (min-width: 992px) and (max-width: 1199px)';

// 媒体查询：1200px+
$mixins-xl: 'only screen and (min-width: 1200px) and (max-width: 1399px)';

// 媒体查询：1400px+
$mixins-xxl: 'only screen and (min-width: 1400px)';

// 媒体查询：dpr3
$mixins-dpr3: 'only screen and (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3)';

// 媒体查询：dpr2
$mixins-dpr2: 'only screen and (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)';

// 媒体查询：亮色模式（mac/iphone亮暗适配）
$mixins-light: 'only screen and (prefers-color-scheme: light)';

// 媒体查询：暗色模式（mac/iphone亮暗适配）
$mixins-dark: 'only screen and (prefers-color-scheme: dark)';

/****************************** 二.atomic参数 ******************************/

// 颜色：1 ~ 20色号
$atomic-color: 20 !default;

// 位置：0px ~ 100px
$atomic-location: 100 !default;

// 边距：0px ~ 100px
$atomic-size: 100 !default;

// 边框倒角：0px ~ 60px
$atomic-border: 60 !default;

// 字号：12px ~ 72px
$atomic-font-size: 72 !default;

// 文字行数：1 ~ 6
$atomic-line: 6 !default;

// z-index：0 ~ 1000
$atomic-zindex: (0, 1, 2, 3, 4, 5, 10, 100, 1000) !default;

// 不透明度：0 ~ 1
$atomic-opacity: (
  '0': 0,
  '1': 0.1,
  '2': 0.2,
  '3': 0.3,
  '4': 0.4,
  '5': 0.5,
  '6': 0.6,
  '7': 0.7,
  '8': 0.8,
  '9': 0.9,
  '10': 1
) !default;

// 盒模型
$atomic-box-sizing: (
  'c': content-box,
  'b': border-box
) !default;

// 盒边距
$atomic-edge: (
  'p': padding,
  'm': margin
) !default;

// 可见性
$atomic-visibility: (
  'h': hidden,
  'v': visible
) !default;

// 图片适配
$atomic-object-fit: (
  'cr': cover,
  'cn': contain
) !default;

// 字重
$atomic-font-weight: (
  '100': 100,
  '200': 200,
  '300': 300,
  '400': 400,
  '500': 500,
  '600': 600,
  '700': 700,
  '800': 800,
  '900': 900,
  'l': lighter,
  'n': normal,
  'b': bold,
  'bo': bolder
) !default;

// 字行高
$atomic-line-height: (
  '1': 1,
  '11': 1.1,
  '12': 1.2,
  '13': 1.3,
  '14': 1.4,
  '15': 1.5,
  '2': 2,
  'n': normal
) !default;

// 字对齐
$atomic-text-align: (
  's': start,
  'c': center,
  'e': end,
  'l': left,
  'r': right
) !default;

// 定位：相对、绝对、固定、粘性
$atomic-position: (
  'r': relative,
  'a': absolute,
  'f': fixed,
  's': sticky
) !default;

// 方向：上、下、左、右
$atomic-direction: (
  't': top,
  'b': bottom,
  'l': left,
  'r': right
) !default;

// flex主轴方向
$atomic-flex-direction: (
  'r': row,
  'rr': row-reverse,
  'c': column,
  'cr': column-reverse
) !default;

// flex主轴换行
$atomic-flex-wrap: (
  'n': nowrap,
  'w': wrap
) !default;

// flex轴对齐
$atomic-flex-content: (
  'fs': flex-start,
  'fe': flex-end,
  'c': center,
  'sb': space-between,
  'sa': space-around,
  's': stretch
) !default;

mixins

在指定选择器内部调用 mixins 即可生成对应样式。

<style lang="scss">
/* 1.引入 aoda.css 的内置 mixins */
@import '~aoda.css/dist/mixins/index.scss';

.button {
  /* 2.使用cursor生成鼠标手势 */
  @include cursor;
  width: 100px;
  height: 100px;
}
</style>

transition 过渡动画

设置过渡动画效果

@include transition(
  $property: all,
  $duration: 0.35s,
  $timingFunction: ease,
  $delay: 0s
);

参数	说明	可选值
$property	css 属性名
$duration	动画时长
$timingFunction	动画曲线	linear（线性）、ease（快缓入慢缓出）、ease-in（缓入）、ease-out（缓出）、ease-in-out（缓入缓出）
$delay	动画延迟时长

animation 帧动画

设置帧动画效果

@include animation(
  $animationId,
  $duration: 0.5s,
  $timingFunction: ease,
  $delay: 0s,
  $iterationCount: 1,
  $direction: normal,
  $fillMode: forwards,
  $playState: running
);

参数	说明	可选值
$animationId	@keyframes 名称
$duration	动画时长
$timingFunction	动画曲线	linear（线性）、ease（快缓入慢缓出）、ease-in（缓入）、ease-out（缓出）、ease-in-out（缓入缓出）
$delay	动画延迟时长
$iterationCount	动画执行次数	number（次数）、infinite（无限次）
$direction	动画执行顺序	normal（正向）、reverse（反向）、alternate（先正向后反向）、alternate-reverse（先反向后正向）
$fillMode	动画执行结束样式	none（无）、backwards（动画起始帧样式）、forwards（动画结束帧样式）
$playState	动画执行状态	running（运行）、paused（暂停）

clip 路径裁切

根据指定路径裁切元素（不会改变容器尺寸）

@include clip($clipPath: inset(10px 10px));

参数	说明	可选值
$clipPath	裁切路径	inset(长宽)（矩形）、circle(半径 at x y)（圆形）

clip-svg 路径裁切

根据 svg 路径裁切元素（不会改变容器尺寸）

@include clip-svg($svgId: '#clip');

参数	说明	可选值
$svgId	svg 元素 Id

cursor 鼠标手势

设置系统样式鼠标手势

@include cursor($cursor: pointer);

参数	说明	可选值
$cursor	系统样式	default（默认箭头）、pointer（可点击）、move（移动）

cursor-locale 鼠标手势

设置本地图片作为鼠标手势

@include cursor-locale(
  $baseUrl,
  $imageName,
  $imageExtension: 'png',
  $cursor: default
);

参数	说明	可选值
$baseUrl	资源基础路径
$imageName	图片名
$imageExtension	图片扩展名
$cursor	系统样式	default（默认箭头）、pointer（可点击）、move（移动）

cursor-network 鼠标手势

设置网络图片作为鼠标手势

@include cursor-network($url, $cursor: default);

参数	说明	可选值
$url	资源路径
$cursor	系统样式	default（默认箭头）、pointer（可点击）、move（移动）

selection 鼠标选中

设置鼠标选中的样式（pc）

@include selection($color: var(--aoda-color4), $backgroundColor: transparent);

参数	说明	可选值
$color	字色
$backgroundColor	背景色