@charset "utf-8";
/**
* Yo框架全局基础方法
* 包括响应式方案，CSS3兼容性方案，厂商前缀方案，iconfont方案，flex布局等全局方法
*/
/**
* @module 功能
* @description 给需要的属性加厂家前缀
* @method _prefix
* @version 1.0.0
* @param {String} $property 指定属性 <1.0.0>
* @param {String} $value 指定属性值 <1.0.0>
* @skip
*/
@mixin _prefix($property, $value) {
// 老式浏览器
// 是否开启厂商前缀支持
@if map-get($setting, is-vendor-prefix) {
// 遍历输出厂商代码
@each $vendor in map-get($setting, vendor-prefix) {
#{$vendor}#{$property}: $value;
}
}
// 现代浏览器（支持最新草案）
#{$property}: $value;
}
/**
* @module 功能
* @description 定义字体图标
* @method _yofont
* @version 1.0.0
* @skip
*/
@mixin _yofont() {
// 是否开启图标字体
@if map-get($ico, is-use) {
@font-face {
font-family: map-get($ico, font-name);
src:
// 现代浏览器
url(#{map-get($ico,font-path)}#{map-get($ico,font-name)}.woff) format("woff"),
// Android2.2+
url(#{map-get($ico,font-path)}#{map-get($ico,font-name)}.ttf) format("truetype");
}
.yo-ico {
font-family: map-get($ico, font-name) !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
// PC端chrome有锯齿问题，Mobile不需要
// -webkit-text-stroke-width: .1px;
-moz-osx-font-smoothing: grayscale;
vertical-align: middle;
}
}
}
/**
* @module 功能
* @description 四则运算(iOS6.0+,Android4.4+)
* @method calc
* @version 1.7.0
* @param {String} $property 指定需要进行计算的CSS属性 <1.7.0>
* @param {String} $value 与原生CSS语法一致，区别在于需要使用引号包裹表达式 <1.7.0>
* @example 四则运算
* .calc { @include calc(width, "100% - 100px"); }
*/
@mixin calc($property, $value) {
// 是否开启厂商前缀支持
@if map-get($setting, is-vendor-prefix) {
// 遍历输出厂商代码
@each $vendor in map-get($setting, vendor-prefix) {
// 输出所有厂商前缀（IE9.0+支持标准写法，更早版本不支持该函数）
@if $vendor != -ms- {
#{$property}: #{$vendor}calc(#{$value});
}
}
}
#{$property}: calc(#{$value});
}
/**
* @module 功能
* @description 定义响应式方案
* @method responsive
* @version 1.0.0
* @param {String} $media 指定媒体查询条件，取值为`config`文件map `media-types`中的值 <1.0.0>
*/
@mixin responsive($media) {
@if not map-has-key($media-types, $media) {
@warn "#{$media} is not a known media type. Using portrait instead.";
$media: portrait;
}
@media #{map-get($media-types, $media)} {
@content;
}
}
/**
* @module 功能
* @description 清除浮动方案
* @method clearfix
* @version 1.0.0
* @param {String} $type 指定清除浮动的方式，包括：pseudo-element | bfc，默认值：pseudo-element <1.8.5>
*/
@mixin clearfix($type: pseudo-element) {
@if $type == pseudo-element {
// 创建伪元素用以清除自身浮动
&::after{
display: block;
overflow: hidden;
clear: both;
height: 0;
content: "\0020";
}
} @else {
// 创建BFC用以清除自身浮动
overflow: hidden;
}
}
/**
* @module 功能
* @description 清除行内级元素间间隙方案
* @method killspace
* @version 1.0.0
* @param {Length} $font-size 指定子元素字号，默认值：config基准字号 <2.0.0>
* @example
*
* 1
* 2
* 3
*
* .demo {@include killspace;}
*/
@mixin killspace($font-size: map-get($base, font-size-baseline)) {
font-size: 0;
font-family: arial;
> .item {
display: inline-block;
font-size: $font-size;
font-family: map-get($base, font-family);
}
}
/**
* @module 功能
* @description 元素在包含块中的对齐方式，默认为水平垂直对齐
* @method align
* @version 2.0.0
* @param {String} $flexbox 指定包含块布局方式，可选值：flex | inline-flex，默认值：flex <2.0.0>
* @param {String} $type 指定居中元素类型，可选值：image | text | other，默认值：text <2.0.0>
* @param {Keywords} $justify-content 指定元素水平对齐方式，取值与`justify-content`属性一致，默认值：center <2.0.0>
* @param {Keywords} $align-items 指定元素垂直对齐方式，取值与`align-items`属性一致，默认值：center <2.0.0>
* @example
*
*
![未知尺寸图片居中]()
*