YO 库版本:0.1.2 moduleVersion
一个基于 Sass 开发的 CSS Framework,Mobile First 的设计理念使得 Yo 的体积超轻量,同时又能延伸到支持PC端。
一个基于 Sass 开发的 CSS Framework,Mobile First 的设计理念使得 Yo 的体积超轻量,同时又能延伸到支持PC端。
@charset "utf-8"; @import "../core/variables"; @import "../core/classes"; // 定义浮层tip的基础构造 @mixin _tip { position: fixed; min-width: 1rem; max-width: 90%; z-index: map-get($z-index, tip); padding: map-get($tip, padding); @include border-radius(map-get($tip, radius)); background-color: rgba(map-get($tip, bgcolor), .5); color: map-get($tip, color); text-align: center; } /** * @module widget * @method yo-tip * @description 构造列表的自定义使用方法 * @demo http://doyoe.github.io/Yo/demo/widget/yo-tip.html * @param {String} $name 定义yo-tip名称 * @param {Length} $padding 定义yo-tip内补白 * @param {Length} $radius 定义yo-tip圆角 * @param {Color} $bgcolor 定义yo-tip背景色 * @param {Color} $color 定义yo-tip文本色 */ @mixin yo-tip( $name: default, $padding: default, $radius: default, $bgcolor: default, $color: default) { // 区别是否新增实例还是修改本身 @if $name == default { $name: ""; } @else { $name: "-#{$name}"; } // 如果值为default,则取config的定义 @if $padding == default { $padding: map-get($tip, padding); } @if $radius == default { $radius: map-get($tip, radius); } @if $bgcolor == default { $bgcolor: map-get($tip, bgcolor); } @if $color == default { $color: map-get($tip,color); } .yo-tip#{$name} { @if $padding != map-get($tip, padding) { padding: $padding; } @if $radius != map-get($tip, radius) { border-radius: $radius; } @if $bgcolor != map-get($tip, bgcolor) { background-color: rgba($bgcolor, .5); } @if $color != map-get($tip, color) { color: $color; } // 增量扩展 @content; } } // 调用本文件时载入tip基础构造 .yo-tip { @include _tip; }