SASS的一些經常使用工具樣式

less 和 sass 是兩種 css 預編譯語言，就是說經過 less 或者 scss 寫的代碼最終都會被編譯成 css 再使用。其目的是爲了更快、更結構的編寫 css 文件，都能使用 變量、運算符、判斷、方法等等

這個是最經常使用的，經過 @mixin 定義一個類或方法，在其它地方經過 @include 引用這個方法或類，下面這些方法不是不少可是很實用

/* 左右居中 */
@mixin horizontal-center {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

/* 右浮動 */
@mixin pull-right {
    float: right !important;
}

/* 左浮動 */
@mixin pull-left {
    float: left !important;
}

/* 文本居右 */
@mixin text-right {
    text-align: right !important;
}

/* 文本居左 */
@mixin text-left {
    text-align: left !important;
}

/* 文本居中 */
@mixin text-center {
    text-align: center !important;
}

/* 隱藏 */
@mixin hide {
    display: none !important;
}

/* 顯示 */
@mixin show {
    display: block !important;
}

/* 隱藏 */
@mixin invisible {
    visibility: hidden;
}

/* 清楚浮動 */
@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

.clearfix:after,
.clearfix:before {
    content: " ";
    display: block;
}

.clearfix:after {
    clear: both;
}


@function calculateRem($size) {
    $remSize: $size / 16px;
    @return $remSize * 1rem;
}

/* 行高 */
@mixin line-height($heightValue: 12) {
    line-height: $heightValue + px; //fallback for old browsers
    line-height: (0.125 * $heightValue) + rem;
}


/* Retina 背景圖片 */
/* @include imgRetina(images/waterlily, jpg, 200px, 200px, no-repeat, center); */
@mixin imgRetina($image, $extension, $width, $height, $position: center, $repeat: no-repeat) {
    background: url($image + '.' + $extension) $repeat $position;
         
    @media 
    screen and (-webkit-min-device-pixel-ratio: 2),
    screen and (   min--moz-device-pixel-ratio: 2),
    screen and (   -moz-min-device-pixel-ratio: 2),
    screen and (     -o-min-device-pixel-ratio: 2/1),
    screen and (        min-device-pixel-ratio: 2),
    screen and (             min-resolution: 192dpi), 
    screen and (             min-resolution: 2dppx) {    
       background: url($image + '@2x' + '.' + $extension) $repeat $position;
       background-size: $width $height;
    }
}

/* 字體大小 */
@mixin font-size($size) {
    font-size: $size;
    font-size: calculateRem($size);
}

/* 超出一行文本省略 */
@mixin text-ellipsis() {
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 多行超出文本省略 */
@mixin text-ellipsis-more($num) {
  display:-webkit-box; 
  -webkit-box-orient:vertical;
  -webkit-line-clamp:$num;
  display: -moz-box; 
  -moz-line-clamp: $num !important;
  -moz-box-orient: vertical;
  overflow: hidden;
}

/* 圓角 */
@mixin border-radius($radius) {
  -webkit-border-radius:$radius;
  -moz-border-radius:$radius;
  -o-border-radius:$radius;
  border-radius:$radius;
}

/* 設置陰影 */
@mixin shadow($shadow...) {
  -webkit-box-shadow:$shadow;
  -moz-box-shadow:$shadow;
  -o-box-shadow:$shadow;
  box-shadow:$shadow;
}

/* 絕對居中 */
@mixin center($width, $height) {
  position: absolute;
  left:50%;
  top:50%;
  width:$width;
  height:$height;
  margin:(-$height / 2) 0 0 (-$width / 2);
}

/* 最小高度，IE6不支持min-height，可是使用height能達到同樣的效果 */
@mixin minHeight($min-height) {
    min-height: $min-height;
    height: auto !important;
    height: $min-height;
}

/* display:inline-block;IE6,7塊級元素對inline-block支持很差，須要觸發Layout；內聯元素就不須要了。 */
@mixin dib() {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

/* flex佈局 */
@mixin flex-box{
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;  
  display: -ms-flex;
  display: flex;
}

@mixin flex-1($percent){
  width:$percent;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}


@mixin justify-content{
    -webkit-justify-content:space-between;
    justify-content:space-between;
  }

/* 關於動畫 */
@mixin transition($property:all,$duration:0.5s,$timing:ease){
    -webkit-transition:$property $duration $timing;
    -moz-transition:$property $duration $timing;
    -ms-transition:$property $duration $timing;
    -o-transition:$property $duration $timing;
    transition:$property $duration $timing;
}

@mixin transform-origin($origin) {
    -moz-transform-origin:$origin;
    -webkit-transform-origin:$origin;
    -ms-transform-origin:$origin;
    -o-transform-origin:$origin;
    transform-origin:$origin;
}

@mixin scale($scale) {
    -moz-transform:scale($scale);
    -webkit-transform:scale($scale);
    -ms-transform:scale($scale);
    -o-transform:scale($scale);
    transform:scale($scale);
}

/* 透明度 */
@mixin opacity($opacity) {
    opacity: $opacity;
    filter: alpha(opacity=$opacity * 100);//兼容IE
  }
  

/* 使用純CSS現實三角形，兼容全部瀏覽器；使用了三個參數，第一個是"方向"，第二個是"大小"，第三個是"顏色"，免得每次都寫一大堆代碼，很是方便啦； */
@mixin arrow($direction,
$size,
$color) {
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    border-width: $size;
    cursor: pointer;
    @if $direction == top {
        border-style: dashed dashed solid dashed;
        border-color: transparent transparent $color transparent;
        border-top: none;
    }
    @else if $direction == bottom {
        border-style: solid dashed dashed dashed;
        border-color: $color transparent transparent transparent;
        border-bottom: none;
    }
    @else if $direction == right {
        border-style: dashed dashed dashed solid;
        border-color: transparent transparent transparent $color;
        border-right: none;
    }
    @else if $direction == left {
        border-style: dashed solid dashed dashed;
        border-color: transparent $color transparent transparent;
        border-left: none;
    }
}

// 不變寬高比
@mixin constant-width-to-height {
  &::before {
    content: '';
    padding-top: 100%;
    float: left;
  }
  @include clearfix;
}

// 使子元素均勻分佈
@mixin evenly-distributed-children {
  display: flex;
  justify-content: space-between;
}

// 使用 flexbox 居中
@mixin flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 使用網格居中
@mixin grid-centering {
  display: grid;
  justify-content: center;
  align-items: center;
}

// 使用transform居中子元素
@mixin transform-centering {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
複製代碼