Yo 源文件
Yo 是一款基于 Mobile First 理念而设计的 CSS Framework,当然,它也适应于PC端的高级浏览器;其具备轻量,易用,快速且高度强大的自定义能力
Yo 是一款基于 Mobile First 理念而设计的 CSS Framework,当然,它也适应于PC端的高级浏览器;其具备轻量,易用,快速且高度强大的自定义能力
@charset "utf-8"; // 定义badge的基础构造 @mixin _badge { @include align(inline-flex); min-width: .16rem; min-height: .16rem; padding: map-get($badge, padding); @include border( $border-width: map-get($badge, border-width), $border-color: map-get($badge, border-color), $radius: map-get($badge, radius) ); background-color: map-get($badge, bgcolor); color: map-get($badge, color); font-size: map-get($badge, font-size); line-height: 1; } /** * @module element * @method yo-badge * @version 1.0.0 * @description 构造提醒气泡的自定义使用方法,可以扩展为:tag,文字ico等形态 * @demo http://doyoe.github.io/Yo/demo/element/yo-badge.html * @param {String} $name 定义扩展名称 {add: 1.0.0} * @param {Length} $padding 内补白 {add: 1.4.0} * @param {Length} $border-width 边框厚度 {add: 1.4.0} * @param {Color} $bordercolor 边框色 {add: 1.1.0}{del:2.0.0} * @param {Color} $border-color 边框色 {add:2.0.0} * @param {Color} $bgcolor 背景色 {add: 1.0.0} * @param {Color} $color 文本色 {add: 1.0.0} * @param {Length} $radius 圆角半径长度 {add: 1.0.0} * @param {Length} $font-size 字号大小 {add: 1.0.0} */ @mixin yo-badge( $name: default, $padding: default, $border-width: default, $border-color: default, $bgcolor: default, $color: default, $radius: default, $font-size: default) { // 区别是否新增实例还是修改本身 $name: if($name == default, "", "-#{$name}"); // 如果值为default,则取config的定义 @if $padding == default { $padding: map-get($badge, padding); } @if $border-width == default { $border-width: map-get($badge, border-width); } @if $border-color == default { $border-color: map-get($badge, border-color); } @if $bgcolor == default { $bgcolor: map-get($badge, bgcolor); } @if $color == default { $color: map-get($badge, color); } @if $radius == default { $radius: map-get($badge, radius); } @if $font-size == default { $font-size: map-get($badge, font-size); } .yo-badge#{$name} { // 如果$padding不等于config设定,则重绘内补白 @if $padding != map-get($badge, padding) { padding: $padding; } // 如果$radius不等于config设定,则重绘容器圆角 @if $radius != map-get($badge, radius) { border-radius: $radius; } &::after { // 如果$border-width不等于config设定,则重绘边框相关 @if $border-width != map-get($badge, border-width) { border-width: $border-width; } // 如果$border-color不等于config设定,则重绘边框颜色 @if $border-color != map-get($badge, border-color) { border-color: $border-color; } // 如果$radius不等于config设定,则重绘边框圆角 @if $radius != map-get($badge, radius) { @include responsive(retina1x) { border-radius: $radius; } @include responsive(retina2x) { border-radius: $radius * 2; } @include responsive(retina3x) { border-radius: $radius * 3; } } } // 如果$bgcolor不等于config设定,则重绘背景色 @if $bgcolor != map-get($badge, bgcolor) { background-color: $bgcolor; } // 如果$color不等于config设定,则重绘文本色 @if $color != map-get($badge, color) { color: $color; } // 如果$font-size不等于config设定,则重绘字号 @if $font-size != map-get($badge, font-size) { font-size: $font-size; } // 增量扩展 @content; } } // 调用本文件时载入气泡基础构造 .yo-badge { @include _badge; }