|
@@ -1,811 +0,0 @@
|
|
|
-@charset "utf-8";
|
|
|
-
|
|
|
-
|
|
|
- * _mixin.scss 常见样式封装、兼容性封装、常见工具方法
|
|
|
- *
|
|
|
- * --- prefixer ---
|
|
|
- *
|
|
|
- * --- flex ----
|
|
|
- * display_flex
|
|
|
- * flex
|
|
|
- * flex_grow
|
|
|
- * flex_shrink
|
|
|
- * flex_basis
|
|
|
- * flex_align_items
|
|
|
- * flex_justify_content
|
|
|
- * flex_childPos
|
|
|
- *
|
|
|
- * --- layout ---
|
|
|
- * box_sizing
|
|
|
- * clear
|
|
|
- *
|
|
|
- * --- appearance ---
|
|
|
- * text_ellipsis
|
|
|
- * opacity
|
|
|
- * box_shadow
|
|
|
- * appearance
|
|
|
- * bg_gradient
|
|
|
- * #twoColor
|
|
|
- * #threeColor
|
|
|
- *
|
|
|
- * --- transform ---
|
|
|
- * transform
|
|
|
- * scale
|
|
|
- * skew
|
|
|
- * translate
|
|
|
- * rotate
|
|
|
- * perspective
|
|
|
- * origin
|
|
|
- *
|
|
|
- * --- transition ---
|
|
|
- * transition
|
|
|
- * transition-transform
|
|
|
- *
|
|
|
- * --- animation ---
|
|
|
- * animation
|
|
|
- * keyframes
|
|
|
- *
|
|
|
- * --- media ---
|
|
|
- * screenResolution
|
|
|
- * screenForIE10AndLater
|
|
|
- * screenForIE8
|
|
|
- * media
|
|
|
- *
|
|
|
- * --- other ---
|
|
|
- * inlineBlock
|
|
|
- * square
|
|
|
- * absoluteCenter
|
|
|
- * triangle
|
|
|
- * bfc
|
|
|
- * retina 1px line
|
|
|
- * update in 2016-05-18
|
|
|
- * setFontSizeForRem
|
|
|
- *
|
|
|
- * --- function ---
|
|
|
- * update in 2016-01-21
|
|
|
- * stripUnits
|
|
|
- * px2rem
|
|
|
- *
|
|
|
- */
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-$prefix-for-webkit: true !default;
|
|
|
-$prefix-for-mozilla: true !default;
|
|
|
-$prefix-for-microsoft: true !default;
|
|
|
-$prefix-for-opera: true !default;
|
|
|
-$prefix-for-spec: true !default;
|
|
|
-@mixin prefixer($property, $value, $prefixes) {
|
|
|
- @each $prefix in $prefixes {
|
|
|
- @if $prefix==webkit and $prefix-for-webkit==true {
|
|
|
- -webkit-#{$property}: $value;
|
|
|
- }
|
|
|
- @else if $prefix==moz and $prefix-for-mozilla==true {
|
|
|
- -moz-#{$property}: $value;
|
|
|
- }
|
|
|
- @else if $prefix==ms and $prefix-for-microsoft==true {
|
|
|
- -ms-#{$property}: $value;
|
|
|
- }
|
|
|
- @else if $prefix==o and $prefix-for-opera==true {
|
|
|
- -o-#{$property}: $value;
|
|
|
- }
|
|
|
- @else if $prefix==spec and $prefix-for-spec==true {
|
|
|
- #{$property}: $value;
|
|
|
- }
|
|
|
- @else {
|
|
|
- @warn "Unrecognized prefix: #{$prefix}";
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-%display_flex {
|
|
|
- display: -o-box;
|
|
|
- display: -moz-box;
|
|
|
- display: -webkit-box;
|
|
|
- display: box;
|
|
|
- display: -ms-flexbox;
|
|
|
- display: -webkit-flex;
|
|
|
- display: flex;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- * 容器的属性
|
|
|
- * flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content
|
|
|
- */
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- * flex_direction 伸缩流方向,决定主轴 main axis 的方向
|
|
|
- * @param: row | row-reverse | column | column-reverse
|
|
|
- */
|
|
|
-
|
|
|
-@mixin flex_direction_ForOld($direction) {
|
|
|
- @if $direction==row {
|
|
|
-
|
|
|
- @include prefixer(box-orient, horizontal, webkit moz spec);
|
|
|
- }
|
|
|
- @else if $direction==column {
|
|
|
- @include prefixer(box-orient, vertical, webkit moz spec);
|
|
|
- }
|
|
|
- @else if $direction==row-reverse {
|
|
|
- @include prefixer(box-orient, horizontal, webkit moz spec);
|
|
|
- @include prefixer(box-direction, reverse, webkit moz spec);
|
|
|
- }
|
|
|
- @else {
|
|
|
- @include prefixer(box-orient, vertical, webkit moz spec);
|
|
|
- @include prefixer(box-direction, reverse, webkit moz spec);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@mixin flex_direction($direction) {
|
|
|
- @include flex_direction_ForOld($direction);
|
|
|
- @include prefixer(flex-direction, $direction, webkit moz ms spec);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- * flex_justify_content 属性定义了项目在主轴上的对齐方式
|
|
|
- * @param: flex-start | flex-end | center | space-between | space-around
|
|
|
- */
|
|
|
-
|
|
|
-@mixin flex_justify_content($value) {
|
|
|
-
|
|
|
-
|
|
|
- @if $value=='space-around' {
|
|
|
- @include prefixer(box-pack, justify, webkit moz);
|
|
|
- -ms-flex-pack: distribute;
|
|
|
- }
|
|
|
- @else if $value=='flex-start' {
|
|
|
- @include prefixer(box-pack, start, webkit moz);
|
|
|
- -ms-flex-pack: start;
|
|
|
- }
|
|
|
- @else if $value=='flex-end' {
|
|
|
- @include prefixer(box-pack, end, webkit moz);
|
|
|
- -ms-flex-pack: end;
|
|
|
- }
|
|
|
- @else {
|
|
|
- @include prefixer(box-pack, $value, webkit moz);
|
|
|
- -ms-flex-pack: $value;
|
|
|
- }
|
|
|
- -ms-flex-pack: $value;
|
|
|
- @include prefixer(justify-content, $value, webkit ms spec);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- * flex_align_items 属性定义项目在交叉轴上如何对齐
|
|
|
- * @param: flex-start | flex-end | center | baseline | stretch
|
|
|
- */
|
|
|
-
|
|
|
-@mixin flex_align_items($value) {
|
|
|
-
|
|
|
- @if $value=='flex-start' {
|
|
|
- @include prefixer(box-align, start, webkit moz ms o);
|
|
|
- }
|
|
|
- @else if $value=='flex-end' {
|
|
|
- @include prefixer(box-align, end, webkit moz ms o);
|
|
|
- }
|
|
|
- @else {
|
|
|
- @include prefixer(box-align, $value, webkit moz ms o);
|
|
|
- }
|
|
|
- -ms-flex-align: $value;
|
|
|
- @include prefixer(align-items, $value, webkit moz ms o spec);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin flex_childPos($dir, $value) {
|
|
|
- @if $dir=='horizontal' {
|
|
|
- @include flex_justify_content($value);
|
|
|
- }
|
|
|
- @if $dir=='vertical' {
|
|
|
- @include flex_align_items($value);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- * flex_align_content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用,所以此时 flex-wrap 必须为 wrap。
|
|
|
- * @param: flex-start | flex-end | center | space-between | space-around | stretch
|
|
|
- */
|
|
|
-
|
|
|
-@mixin flex_align_content($value) {
|
|
|
- @include prefixer(align-content, $value, webkit moz ms o spec);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- * 项目的属性
|
|
|
- * order、flex-grow、flex-shrink、flex-basis、flex、align-self
|
|
|
- */
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- * flex_grow 属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
|
|
|
- * @param: <number>(default 0)
|
|
|
- */
|
|
|
-
|
|
|
-@mixin flex_grow($num) {
|
|
|
- -ms-flex: $num;
|
|
|
- -moz-box-flex-grow: $num;
|
|
|
- @include prefixer(box-flex, $num, webkit moz ms o);
|
|
|
- @include prefixer(flex-grow, $num, webkit ms spec);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- * flex_shrink 属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
|
|
|
- * @param: <number>(default 1)
|
|
|
- */
|
|
|
-
|
|
|
-@mixin flex_shrink($num) {
|
|
|
- @include prefixer(box-flex-shrink, $num, webkit moz);
|
|
|
- @include prefixer(flex-shrink, $num, webkit ms spec);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- * flex_basis 属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
|
|
|
- * @param: <length> | auto(default)
|
|
|
- */
|
|
|
-
|
|
|
-@mixin flex_basis($num) {
|
|
|
- @include prefixer(box-flex-basis, $num, webkit moz);
|
|
|
- @include prefixer(flex-basis, $num, webkit ms spec);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- * flex 是flex-grow, flex-shrink 和 flex-basis的简写,默认值为 0 1 auto,后两个属性可选。
|
|
|
- * @param: flex-grow flex-shrink flex-basis
|
|
|
- */
|
|
|
-
|
|
|
-@mixin flex($value) {
|
|
|
- display: -webkit-box;
|
|
|
- display: -moz-box;
|
|
|
- display: -ms-flexbox;
|
|
|
- @include prefixer(box-flex, $value, webkit moz ms o);
|
|
|
- @include prefixer(flex, $value, webkit moz ms o spec);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- * align_self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
|
|
|
- * @param: auto(default) | flex-start | flex-end | center | baseline | stretch
|
|
|
- */
|
|
|
-
|
|
|
-@mixin align_self($value) {
|
|
|
- @include prefixer(align-self, $value, webkit moz ms o spec);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin box_sizing($value) {
|
|
|
- @include prefixer(box-sizing, $value, webkit moz spec);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-%clear {
|
|
|
- *zoom: 1;
|
|
|
- &:after {
|
|
|
- clear: both;
|
|
|
- content: ".";
|
|
|
- display: block;
|
|
|
- line-height: 0;
|
|
|
- font-size: 0;
|
|
|
- overflow: hidden;
|
|
|
- visibility: hidden;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-%text_ellipsis {
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- -o-text-overflow: ellipsis;
|
|
|
- word-break: break-all;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin opacity($var) {
|
|
|
- -khtml-opacity: $var;
|
|
|
- filter: alpha(opacity=$var*100);
|
|
|
- @include prefixer(opacity, $var, webkit moz spec);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin box_shadow($value...) {
|
|
|
- @include prefixer(box-shadow, $value, webkit moz spec);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin appearance($value) {
|
|
|
-
|
|
|
- @include prefixer(appearance, $value, webkit moz spec);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin gradient_vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
|
|
|
- background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);
|
|
|
- background-image: -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);
|
|
|
- background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
|
|
|
- background-repeat: repeat-x;
|
|
|
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin gradient_horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
|
|
|
- background-image: -webkit-linear-gradient(left, color-stop($start-color $start-percent), color-stop($end-color $end-percent));
|
|
|
- background-image: -o-linear-gradient(left, $start-color $start-percent, $end-color $end-percent);
|
|
|
- background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
|
|
|
- background-repeat: repeat-x;
|
|
|
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin gradient_vertical_threeColor($start-color: #555, $middle-color: #444, $end-color: #333, $start-percent: 0%, $middle-percent: 50%, $end-percent: 100%) {
|
|
|
- background-image: -webkit-linear-gradient(top, $start-color $start-percent, $middle-color $middle-percent, $end-color $end-percent);
|
|
|
- background-image: -o-linear-gradient(top, $start-color $start-percent, $middle-color $middle-percent, $end-color $end-percent);
|
|
|
- background-image: linear-gradient(to bottom, $start-color $start-percent, $middle-color $middle-percent, $end-color $end-percent);
|
|
|
- background-repeat: repeat-x;
|
|
|
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin gradient_horizontal_threeColor($start-color: #555, $middle-color: #444, $end-color: #333, $start-percent: 0%, $middle-percent: 50%, $end-percent: 100%) {
|
|
|
- background-image: -webkit-linear-gradient(left, color-stop($start-color $start-percent), color-stop($middle-color $middle-percent), color-stop($end-color $end-percent));
|
|
|
- background-image: -o-linear-gradient(left, $start-color $start-percent, $middle-color $middle-percent, $end-color $end-percent);
|
|
|
- background-image: linear-gradient(to right, $start-color $start-percent, $middle-color $middle-percent, $end-color $end-percent);
|
|
|
- background-repeat: repeat-x;
|
|
|
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin transform($value...) {
|
|
|
- @include prefixer(transform, $value, webkit moz ms o spec);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin scale($ratio...) {
|
|
|
- @include prefixer(transform, scale($ratio), webkit moz ms o spec);
|
|
|
-}
|
|
|
-
|
|
|
-@mixin scale($ratioX, $ratioY...) {
|
|
|
- @include prefixer(transform, scale($ratioX, $ratioY), webkit moz ms o spec);
|
|
|
-}
|
|
|
-
|
|
|
-@mixin scaleX($ratio) {
|
|
|
- @include prefixer(transform, scaleX($ratio), webkit moz ms o spec);
|
|
|
-}
|
|
|
-
|
|
|
-@mixin scaleY($ratio) {
|
|
|
- @include prefixer(transform, scaleY($ratio), webkit moz ms o spec);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin skew($x, $y) {
|
|
|
- @include prefixer(transform, skew($x, $y), webkit moz o spec);
|
|
|
- -ms-transform: skewX($x) skewY($y);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin translate($x, $y) {
|
|
|
- @include prefixer(transform, translate($x, $y), webkit moz ms o spec);
|
|
|
-}
|
|
|
-
|
|
|
-@mixin translate3d($x, $y, $z) {
|
|
|
- @include prefixer(transform, translate3d($x, $y, $z), webkit moz spec);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin rotate($degrees) {
|
|
|
- @include prefixer(transform, rotate($degrees), webkit moz ms o spec);
|
|
|
-}
|
|
|
-
|
|
|
-@mixin rotateX($degrees) {
|
|
|
- @include prefixer(transform, rotateX($degrees), webkit moz ms o spec);
|
|
|
-}
|
|
|
-
|
|
|
-@mixin rotateY($degrees) {
|
|
|
- @include prefixer(transform, rotateY($degrees), webkit moz ms o spec);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin perspective($perspective) {
|
|
|
- @include prefixer(perspective, $perspective, webkit moz spec);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin perspective-origin($perspective) {
|
|
|
- @include prefixer(perspective-origin, $perspective, webkit moz spec);
|
|
|
-}
|
|
|
-
|
|
|
-@mixin transform-origin($origin) {
|
|
|
- @include prefixer(transform-origin, $origin, webkit moz ms spec);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin transition($transition...) {
|
|
|
- @include prefixer(transition, $transition, webkit moz o spec);
|
|
|
-}
|
|
|
-
|
|
|
-@mixin transition-property($transition-property...) {
|
|
|
- @include prefixer(transition-property, $transition-property, webkit moz o spec);
|
|
|
-}
|
|
|
-
|
|
|
-@mixin transition-delay($transition-delay) {
|
|
|
- @include prefixer(transition-delay, $transition-delay, webkit moz o spec);
|
|
|
-}
|
|
|
-
|
|
|
-@mixin transition-duration($transition-duration...) {
|
|
|
- @include prefixer(transition-duration, $transition-duration, webkit moz o spec);
|
|
|
-}
|
|
|
-
|
|
|
-@mixin transition-timing-function($timing-function) {
|
|
|
- @include prefixer(transition-timing-function, $timing-function, webkit moz o spec);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin animation($animation) {
|
|
|
- @include prefixer(animation, $animation, webkit moz o spec);
|
|
|
-}
|
|
|
-
|
|
|
-@mixin animation-name($name) {
|
|
|
- @include prefixer(animation-name, $name, webkit moz o spec);
|
|
|
-}
|
|
|
-
|
|
|
-@mixin animation-duration($duration) {
|
|
|
- @include prefixer(animation-duration, $duration, webkit moz o spec);
|
|
|
-}
|
|
|
-
|
|
|
-@mixin animation-timing-function($timing-function) {
|
|
|
- @include prefixer(animation-timing-function, $timing-function, webkit moz o spec);
|
|
|
-}
|
|
|
-
|
|
|
-@mixin animation-delay($delay) {
|
|
|
- @include prefixer(animation-delay, $delay, webkit moz o spec);
|
|
|
-}
|
|
|
-
|
|
|
-@mixin animation-iteration-count($iteration-count) {
|
|
|
- @include prefixer(animation-iteration-count, $iteration-count, webkit moz o spec);
|
|
|
-}
|
|
|
-
|
|
|
-@mixin animation-direction($direction) {
|
|
|
- @include prefixer(animation-direction, $direction, webkit moz o spec);
|
|
|
-}
|
|
|
-
|
|
|
-@mixin animation-fill-mode($fill-mode) {
|
|
|
- @include prefixer(animation-fill-mode, $fill-mode, webkit moz o spec);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin keyframes($name) {
|
|
|
- @-webkit-keyframes #{$name} {
|
|
|
- @content;
|
|
|
- }
|
|
|
- @-moz-keyframes #{$name} {
|
|
|
- @content;
|
|
|
- }
|
|
|
- @-o-keyframes #{$name} {
|
|
|
- @content;
|
|
|
- }
|
|
|
- @keyframes #{$name} {
|
|
|
- @content;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin screenResolution($num) {
|
|
|
- @media only screen and (-webkit-min-device-pixel-ratio: $num), only screen and (min--moz-device-pixel-ratio: $num), only screen and (-o-min-device-pixel-ratio: $num), only screen and (min-device-pixel-ratio: $num), only screen and (min-resolution: #{$num}dppx), only screen and (min-resolution: #{$num*96}dpi) {
|
|
|
- @content;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin screenForIE10AndLater {
|
|
|
- @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
|
|
- @content;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin forIE8 {
|
|
|
- @media \0screen {
|
|
|
- @content;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- * media 通用media设置
|
|
|
- * @param {String} $attr (eg: "min-width" "max-width")
|
|
|
- * @param {String} $val (eg: "1024px")
|
|
|
- */
|
|
|
-
|
|
|
-@mixin setMedia($attr, $val) {
|
|
|
- @media (#{$attr}: $val) {
|
|
|
- @content;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin inlineBlock {
|
|
|
- display: inline-block;
|
|
|
- *display: inline;
|
|
|
- *zoom: 1;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin square($length) {
|
|
|
- width: $length;
|
|
|
- height: $length;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin absoluteCenter($width, $height) {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- margin: (-$height)/2, 0, 0, (-$width)/2;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-%triangleCommonStyle {
|
|
|
- display: block;
|
|
|
- content: " ";
|
|
|
- width: 0;
|
|
|
- line-height: 0;
|
|
|
- font-size: 0;
|
|
|
- border-style: solid;
|
|
|
- border-color: transparent;
|
|
|
-}
|
|
|
-
|
|
|
-@mixin triangle($width, $height, $direction, $borderColor, $ie6borderColor:#f00) {
|
|
|
- @extend %triangleCommonStyle;
|
|
|
- border-width: $width $height;
|
|
|
- _border-color: $ie6borderColor;
|
|
|
- _filter: chroma(color=$ie6borderColor);
|
|
|
-
|
|
|
- @if $direction==top {
|
|
|
- border-top: 0;
|
|
|
- border-bottom-color: $borderColor;
|
|
|
- _border-bottom-color: $borderColor;
|
|
|
- }
|
|
|
-
|
|
|
- @else if $direction==bottom {
|
|
|
- border-bottom: 0;
|
|
|
- border-top-color: $borderColor;
|
|
|
- _border-top-color: $borderColor;
|
|
|
- }
|
|
|
-
|
|
|
- @else if $direction==left {
|
|
|
- border-left: 0;
|
|
|
- border-right-color: $borderColor;
|
|
|
- _border-right-color: $borderColor;
|
|
|
- }
|
|
|
-
|
|
|
- @else if $direction==right {
|
|
|
- border-right: 0;
|
|
|
- border-left-color: $borderColor;
|
|
|
- _border-left-color: $borderColor;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@mixin bfc {
|
|
|
- overflow: hidden;
|
|
|
- zoom: 1;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-%line1px {
|
|
|
- content: '';
|
|
|
- width: 200%;
|
|
|
- height: 1px;
|
|
|
- background: url(../images/bg_line.png) repeat-x 0 0;
|
|
|
- -webkit-transform: scale(0.5);
|
|
|
- transform: scale(0.5);
|
|
|
- -webkit-transform-origin: 0 0;
|
|
|
- transform-origin: 0 0;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- * setFontSizeForRem
|
|
|
- * 如果要精确控制,则用js来计算设置html的fontSize,如下:
|
|
|
- *
|
|
|
- * (function (doc, win) {
|
|
|
- var docEl = doc.documentElement,
|
|
|
- resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
|
|
|
- recalc = function () {
|
|
|
- var clientWidth = docEl.clientWidth;
|
|
|
- if (!clientWidth) return;
|
|
|
- docEl.style.fontSize = 37.5 * (clientWidth / 375) + 'px';
|
|
|
- };
|
|
|
-
|
|
|
- if (!doc.addEventListener) return;
|
|
|
- win.addEventListener(resizeEvt, recalc, false);
|
|
|
- doc.addEventListener('DOMContentLoaded', recalc, false);
|
|
|
- })(document, window);
|
|
|
- *
|
|
|
- */
|
|
|
-
|
|
|
-$driveWidth: (240, 320, 360, 375, 384, 412, 411, 414, 435, 480, 540, 600, 640, 720, 768, 800, 1080, 1280, 1440, 2160, 1600);
|
|
|
-@mixin remProject {
|
|
|
- @each $i in $driveWidth {
|
|
|
- @media (width: #{$i}px) {
|
|
|
- html {
|
|
|
- font-size: $i/10 * 1px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-@function stripUnits($val) {
|
|
|
- @return $val / ($val * 0 + 1);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-$design-width: 750px!default;
|
|
|
-$px-only: false;
|
|
|
-@function px2rem($pxs) {
|
|
|
- $list: ();
|
|
|
- @each $px in $pxs {
|
|
|
- @if (unitless($px)) {
|
|
|
-
|
|
|
- @return px2em($px + 0px);
|
|
|
- @warn 'No unit. Pls set "px" to the numbers.';
|
|
|
- }
|
|
|
- @else if (unit($px)=='px') {
|
|
|
- @if ($px-only) {
|
|
|
- $list: append($list, $px);
|
|
|
- }
|
|
|
- @else {
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- $list: append($list, ($px / ($design-width * 0.1)) * 1rem);
|
|
|
- }
|
|
|
- }
|
|
|
- @else {
|
|
|
- @warn 'Wrong unit. Pls set "px" to the numbers.';
|
|
|
- }
|
|
|
- }
|
|
|
- @return $list();
|
|
|
-}
|