API Docs for: 1.3.1
Show:

File: lib/core/classes.scss

@charset "utf-8";
/**
 * Yo框架全局基础方法
 -----------------------
 * Yo内置了包括响应式方案,CSS3兼容性方案,厂商前缀方案,iconfont方案,flex布局等全局方法
 *
 * @class classes
 * @module Yo
 */

/**
 * 给需要的属性加厂家前缀
 * @method prefix
 * @param {String} $appearance 指定属性
 * @param {String} $value 指定属性值
 */
@mixin prefix($property, $value) {
    // 是否开启厂商前缀支持
    @if map-get($setting, is-vendor-prefix) {
        // 遍历输出厂商代码
        @each $vendor in map-get($setting, vendor-prefix) {
            #{$vendor}#{$property}: $value;
        }
    }
    #{$property}: $value;
}

/**
 * 定义响应式方案
 * @method responsive
 * @param {String} $media 指定媒体查询条件
 */
@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;
    }
}

/**
 * 定义字体图标
 * @method yofont
 */
@mixin yofont() {
    // 是否开启图标字体
    @if map-get($ico, is-use) {
        @font-face {
            font-family: map-get($ico, font-name);
            // 如果只需要其中的某种字体,其它的几种字体可以使用空文件(不会请求),但必须存在
            // IE9 - 不考虑IE9
            // src: url("#{map-get($ico,font-path)}#{map-get($ico,font-name)}.eot");
            src:
                // IE6-8 - 不考虑
                // url("#{map-get($ico,font-path)}#{map-get($ico,font-name)}.eot?#iefix") format("embedded-opentype"),
                // chrome、firefox
                url("#{map-get($ico,font-path)}#{map-get($ico,font-name)}.woff") format("woff"),
                // chrome、firefox、opera、Safari, Android, iOS 4.2+
                url("#{map-get($ico,font-path)}#{map-get($ico,font-name)}.ttf") format("truetype");
                // iOS 4.1- - 不考虑
                // url("#{map-get($ico,font-path)}#{map-get($ico,font-name)}.svg#iconfont") format("svg");
        }
        .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;
        }
    }
}

/**
 * 定义UA默认外观
 * @method appearance
 * @param {String} $appearance 指定UA外观类型
 */
@mixin appearance($appearance: none) {
    @include prefix(appearance, $appearance);
}

/**
 * 定义是否可以选中元素
 * @method user-select
 * @param {String} $user-select 指定是否可以选中
 */
@mixin user-select($user-select: none) {
    @include prefix(user-select, $user-select);
}

/**
 * 定义渐变色值
 * @method gradient
 * @param {String} $type 指定渐变的4种类型:linear, repeating-linear, radial, repeating-radial
 * @param {String} $gradient 指定渐变取值,与原生语法一致
 */
@mixin gradient($type, $gradient...) {
    @if map-get($setting, is-vendor-prefix) {
        @each $vendor in map-get($setting, vendor-prefix) {
            background-image: #{$vendor}#{$type}-gradient($gradient);
        }
    }
    background-image: #{$type}-gradient($gradient);
}

/**
 * 定义背景图像缩放
 * @method background-size
 * @param {String | Length} $background-size 指定背景图缩放值
 */
@mixin background-size($background-size...) {
    @include prefix(background-size, $background-size);
}

/**
 * 定义盒模型
 * @method box-sizing
 * @param {String} $box-sizing 的2个值分别为:content-box(标准盒模型) | border-box(怪异盒模型)
 */
@mixin box-sizing($box-sizing: border-box) {
    @include prefix(box-sizing, $box-sizing);
}

/**
 * 定义简单变换
 * @method transform
 * @param {String} $transform 取值与原生语法一致
 */
@mixin transform($transform...) {
    @include prefix(transform, $transform);
}

/**
 * 定义变换原点
 * @method transform-origin
 * @param {String} $transform-origin 取值与原生语法一致
 */
@mixin transform-origin($transform-origin) {
    @include prefix(transform-origin, $transform-origin);
}

/**
 * 定义动画
 * @method animation
 * @param {String} $animation 取值与原生语法一致
 */
@mixin animation($animation...) {
    @include prefix(animation, $animation);
}

/**
 * 定义补间
 * @method transition
 * @param {String} $transition 取值与原生语法一致
 */
@mixin transition($transition...) {
    @include prefix(transition, $transition);
}

/**
 * 定义显示类型为伸缩盒
 * @method flexbox
 * @param {String} $flexbox 默认值:flex,取值与最新原生语法一致
 */
@mixin flexbox($flexbox: flex) {
    @if $flexbox == flex {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
    } @else {
        display: -webkit-inline-box;
        display: -webkit-inline-flex;
        display: inline-flex;
    }
}

/**
 * 定义伸缩盒子元素如何分配空间
 * @method flex
 * @param {String} $flex 默认值:1,取值与最新原生语法一致
 */
@mixin flex($flex: 1) {
    -webkit-box-flex: $flex;
    -webkit-flex: $flex;
    flex: $flex;
    // iOS6要求所有的伸缩盒子元素需要为非inline
    // display: block; // 如果参与flex布局,请自行使用非inline元素
    // 修复iOS6下不均分bug,任意非auto的值
    width: 100%;
}

/**
 * 定义伸缩盒子元素的排版顺序
 * @method order
 * @param {String} $order 默认值:1,取值与最新原生语法一致
 */
@mixin order($order: 1) {
    -webkit-box-ordinal-group: $order;
    -webkit-order: $order;
    order: $order;
}

/**
 * 定义伸缩盒子元素的流动方向
 * @method flex-direction
 * @param {String} $flex-direction 默认值:row,取值与最新原生语法一致
 */
@mixin flex-direction($flex-direction: row) {
    @if $flex-direction == row {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
    } @else if $flex-direction == column {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
    } @else if $flex-direction == row-reverse {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
    } @else if $flex-direction == column-reverse {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
    }
    -webkit-flex-direction: $flex-direction;
    flex-direction: $flex-direction;
}

/**
 * 定义伸缩盒子元素溢出排版
 * @method flex-wrap
 * @param {String} $flex-wrap 默认值:nowrap,取值与最新原生语法一致
 */
@mixin flex-wrap($flex-wrap: nowrap) {
    @if $flex-wrap == nowrap {
        -webkit-box-lines: single;
    } @else {
        -webkit-box-lines: multiple;
    }
    -webkit-flex-wrap: $flex-wrap;
    flex-wrap: $flex-wrap;
}

/**
 * 定义伸缩盒子元素的水平对齐方式
 * @method justify-content
 * @param {String} $justify-content 默认值:center,取值与最新原生语法一致
 */
@mixin justify-content($justify-content: center) {
    @if $justify-content == center {
        -webkit-box-pack: center;
    } @else if $justify-content == flex-start {
        -webkit-box-pack: start;
    } @else if $justify-content == flex-end {
        -webkit-box-pack: end;
    } @else if $justify-content == space-between {
        -webkit-box-pack: justify;
    }
    -webkit-justify-content: $justify-content;
    justify-content: $justify-content;
}

/**
 * 定义伸缩盒子元素的垂直对齐方式
 * @method align-items
 * @param {String} $align-items 默认值:center,取值与最新原生语法一致
 */
@mixin align-items($align-items: center) {
    @if $align-items == center {
        -webkit-box-align: center;
    } @else if $align-items == flex-start {
        -webkit-box-align: start;
    } @else if $align-items == flex-end {
        -webkit-box-align: end;
    } @else {
        -webkit-box-align: $align-items;
    }
    -webkit-align-items: $align-items;
    align-items: $align-items;
}

/**
 * 定义伸缩盒子元素自身的垂直对齐方式
 * @method align-self
 * @param {String} $align-self 默认值:center,取值与最新原生语法一致
 */
@mixin align-self($align-self: center) {
    -webkit-align-self: $align-self;
    align-self: $align-self;
}

/**
 * 定义root root-scroll
 * @method root-scroll
 * @param {String} $root-scroll 指定scroll类型,取值overflow属性的标准值
 */
@mixin root-scroll($root-scroll: hidden) {
    html,
    body {
        overflow: $root-scroll;
        height: 100%;
    }
}

/**
 * 定义是否有滚动条
 * @method overflow
 * @param {String} $overflow 默认值:auto,取值与最新原生语法一致
 */
@mixin overflow($overflow: auto) {
    @if $overflow == auto {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    } @else {
        overflow: $overflow;
    }
}

/**
 * 生成矩形方法
 * @method rect
 * @param {Length} $width 定义矩形的长度
 * @param {Length} $height 定义矩形的高度
 */
@mixin rect($width, $height) {
    width: $width;
    height: $height;
}

/**
 * 生成正方形方法
 * @method square
 * @param {Length} $size 定义正方形的边长
 */
@mixin square($size) {
    width: $size;
    height: $size;
}

/**
 * 生成圆形方法
 * @method circle
 * @param {Length} $size 定义圆的半径长度
 * @param {Length} $radius 定义圆的圆角半径长度
 */
@mixin circle($size, $radius: 50%) {
    @include square($size);
    border-radius: $radius;
}

/**
 * 清除浮动方案
 * @method clearfix
 */
@mixin clearfix() {
    &::after{
        display: block;
        overflow: hidden;
        clear: both;
        height: 0;
        content: "\0020";
    }
}

/**
 * 链接处理方法
 * @method link
 * @param {Color} $color 定义链接颜色
 */
@mixin link($color: map-get($base, link-color)) {
    color: $color;
    cursor: pointer;
    &:active{
        opacity: .5;
    }
}

/**
 * 强制换行方案
 * @method wrap
 */
@mixin wrap() {
    word-wrap: break-word;
    word-break: break-all;
}

/**
 * 单行文本溢出显示方案
 * @method ellipsis
 * @param {Boolen} $ellipsis 定义是否需要省略号
 */
@mixin ellipsis($ellipsis: true) {
    overflow: hidden;
    white-space: nowrap;
    @if $ellipsis {
        text-overflow: ellipsis;
    }
}

/**
 * 文字隐藏方案
 * @method texthide
 */
@mixin texthide() {
    overflow: hidden;
    white-space: nowrap;
    text-indent: 100%;
}

/**
 * 清除间隙方案-容器
 * @method killspace
 */
@mixin killspace() {
    font-size: 0;
    font-family: arial;
}

/**
 * 清除间隙方案-子级
 * @method killspace-item
 */
@mixin killspace-item() {
    display: inline-block;
    font-size: map-get($base, font-size);
    font-family: map-get($base, font-family);
}

/**
 * 未知尺寸元素垂直居中解决方案-容器
 * @method valign
 */
@mixin valign() {
    @include killspace();
    &::after{
        overflow: hidden;
        width: 0;
        height: 100%;
        content: "\0020";
        vertical-align: middle;
    }
}

/**
 * 未知尺寸元素垂直居中解决方案-子级
 * @method valign-item
 */
@mixin valign-item() {
    @include killspace-item();
    vertical-align: middle;
}

/**
 * 已经尺寸元素垂直居中解决方案
 * @method alignment
 * @param {Length} $width 居中元素的宽度
 * @param {Length} $height 居中元素的高度
 */
@mixin alignment($width: 2rem, $height: 2rem) {
    position: absolute;
    top: 50%;
    left: 50%;
    width: $width;
    height: $height;
    margin-top: -$height/2;
    margin-left: -$width/2;
}