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;
}