水平居中
// Center-align a block level element
// block得有宽度margin左右为auto才能居中
// 引用:@extend %center-block;
@mixin center-block {
margin-left: auto;
margin-right: auto;
}
%center-block{
@include center-block;
}
绝对居中
// 引用:@include center();、@include center(100px,100px);、@include center(100px,null);
@mixin center($width: null, $height: null) {
position: absolute;
top: 50%;
left: 50%;
display: block;
overflow: hidden;
@if not $width and not $height {
transform: translate(-50%, -50%);
} @else if $width and $height {
width: $width;
height: $height;
margin: -($height / 2) #{0 0} -($width / 2);
} @else if not $height {
width: $width;
margin-left: -($width / 2);
transform: translateY(-50%);
} @else {
height: $height;
margin-top: -($height / 2);
transform: translateX(-50%);
}
}
浮动
// 引用:@extend %fl;
// float left & right
@mixin fl($float:left) {
float: $float;
}
%fl{
@include fl;
}
// 引用:@extend %fr;
// float left & right
@mixin fr($float:right) {
float: $float;
}
%fr{
@include fr;
}
闭合子元素浮动
// 引用:@extend %clearfix;
$lte7: false !default; //是否兼容ie6-7
@mixin clearfix {
@if $lte7 {
*zoom: 1;
}
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
%clearfix{
@include clearfix;
}
单行文本溢出显示省略号
// 引用: @extend %ellipsis-basic;
// 元素可以设置宽度才可应用省略号
%ellipsis-basic{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@mixin ellipsis($width:100%) {
@extend %ellipsis-basic;
width:$width;
}
三角符号
// 引用:@include triangle(bottom,10px,#f2f2f2);
// @include triangle(top,20px,#f2f2f2);
// @include triangle(left,20px,#f2f2f2);
// @include triangle(right,20px,#f2f2f2);
// 三角符号
%triangle-basic{
content:"";
height: 0;
width: 0;
overflow:hidden;
}
@mixin triangle($direction, $size, $borderColor ) {
@extend %triangle-basic;
@if $direction == top {
border-bottom:$size solid $borderColor;
border-left:$size dashed transparent;
border-right:$size dashed transparent;
}
@else if $direction == right {
border-left:$size solid $borderColor;
border-top:$size dashed transparent;
border-bottom:$size dashed transparent;
}
@else if $direction == bottom {
border-top:$size solid $borderColor;
border-left:$size dashed transparent;
border-right:$size dashed transparent;
}
@else if $direction == left {
border-right:$size solid $borderColor;
border-top:$size dashed transparent;
border-bottom:$size dashed transparent;
}
}
移动端字体大小设置
@mixin font-dpr($font-size){
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;
}
[data-dpr="3"] & {
font-size: $font-size * 3;
}
}
渐变
// 水平渐变,从左往右
// @include gradient-horizontal(#333, #ccc);
@mixin gradient-horizontal($gradient...){
background-image: -webkit-linear-gradient(left, $gradient); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, $gradient); // Opera 11.10
background-image: linear-gradient(to right, $gradient); // Standard, IE10
}
// 水平渐变,从左往右,平铺
// @include gradient-horizontal-repeating(#333 5%, #ccc 10%);
@mixin gradient-horizontal-repeating($gradient...){
background-image: -webkit-repeating-linear-gradient(left, $gradient); // Safari 5.1+, Chrome 10+
background-image: -o-repeating-linear-gradient(left, $gradient); // Opera 11.10
background-image: repeating-linear-gradient(to right, $gradient); // Standard, IE10
}
// 垂直渐变,从上往下
// @include gradient-vertical(#333 30%, #ccc);
@mixin gradient-vertical($gradient...) {
background-image: -webkit-linear-gradient(top, $gradient); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, $gradient); // Opera 11.10
background-image: linear-gradient(to bottom, $gradient); // Standard, IE10
}
// 垂直渐变,从上往下,平铺
// @include gradient-vertical-repeating(#333 30%, #ccc 50%);
@mixin gradient-vertical($gradient...) {
background-image: -webkit-repeating-linear-gradient(top, $gradient); // Safari 5.1+, Chrome 10+
background-image: -o-repeating-linear-gradient(top, $gradient); // Opera 11.10
background-image: repeating-linear-gradient(to bottom, $gradient); // Standard, IE10
}
// 角度渐变
// @include gradient-angle(45deg, #333 30%, #ccc);
@mixin gradient-angle($gradient...) {
background-image: -webkit-linear-gradient($gradient); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient($gradient); // Opera 11.10
background-image: linear-gradient($gradient); // Standard, IE1
}
// 角度渐变
// @include gradient-angle(45deg, #333 30%, #ccc 50%);
@mixin gradient-angle-repeating($gradient...) {
background-image: -webkit-repeating-linear-gradient($gradient); // Safari 5.1+, Chrome 10+
background-image: -o-repeating-linear-gradient($gradient); // Opera 11.10
background-image: repeating-linear-gradient($gradient); // Standard, IE1
}
// 径向渐变,可以写点简单的
// 如:@include gradient-radial(#00F,#FFF);
// 而@include gradient-radial(farthest-side circle at right,#00F,#FFF);这种的将不会兼容,所以不要调用这个,可以去找工具生成
@mixin gradient-radial($gradient...){
background-image: -webkit-radial-gradient($gradient); // Safari 5.1+, Chrome 10+
background-image: -o-radial-gradient($gradient); // Opera 11.10
background-image: radial-gradient($gradient); // Standard, IE1
background-repeat: no-repeat;
}
单行文本超出显示省略号
// 元素可以设置宽度才可应用省略号
// 引用: @extend %ellipsis-basic
%ellipsis-basic{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
lt8使用filter兼容
// 引用 @include opacity(60)
@mixin opacity($opacity:50) {
opacity: $opacity / 100;
@if $filter{
filter: alpha(opacity=$opacity);
}
}
px换算成rem
// 引用 font-size: pxToRem(32);padding: pxToRem(20) pxToRem(30) pxToRem(10);
$browser-default-font-size: 75px !default;
@function strip-units($number){
@return $number / ($number * 0 + 1);
}
@function pxToRem($px){
@return ($px/strip-units($browser-default-font-size))+rem;
}