分享常用的CSS函式，助你寫出更簡潔的程式碼

小兀666發表於2019-08-15

分享一些在專案中好用的一些CSS輔助函式，可以直接應用到你自己的樣式程式碼中，傳送門。這些函式當然不是CSS原生寫法，有分為sass語法和less語法兩套，大家可以自行選擇複製或者下載。

下面羅列的均是scss語法。less語法請檢視傳送門

1、_clearfix

%clearfix {
  &:after,
  &:before {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}
複製程式碼

該函式可以直接用來清除浮動，比如（為了節省篇幅，後面的示例html程式碼就不羅列了，請參考原始碼）：

<section class="clear-fix-demo">
  <div class="container clearfix">
    <div class="float-left">我是浮動的元素我是浮動的元素我是浮動的元素我是浮動的元素我是浮動的元素我是浮動的元素我是浮動的元素</div>
    <div class="text">我是浮動元素旁邊的</div>
  </div>
  <div class="brother">我是上層容器的兄弟元素</div>
</section>
複製程式碼

對應的scss：

.clear-fix-demo{
  .container{
    border: 2px solid orange;
    padding: 10px;
    .float-left{
      border: 2px dashed black;
      float: left;
      width: 100px;
    }
    .text {
      border: 2px solid blue;
    }
    &.clearfix{
      @extend %clearfix
    }
  }
  .brother{
    margin-top: 10px;
    border: 2px solid palevioletred;
  }
}
複製程式碼

效果如下：

2、_ellipsis

// 文字溢位省略，僅webkit支援多
@mixin ellipsis($lines) {
  @if ($lines == 1) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    -webkit-box-orient: vertical;
		-webkit-line-clamp:$lines;
    overflow: hidden;
    text-overflow: ellipsis;
		word-break:break-all;
  }
}
%ellipsis{
  @include ellipsis(1);
}
複製程式碼

該函式可以用來實現一行省略或者多行省略，使用如下：

.ellipsis-demo{
  .one-line-ellipsis{
    margin-top: 10px;
    width: 100px;
    @extend %ellipsis;
    border: 2px solid peru;
  }
  .multiple-line-ellipsis{
    margin-top: 10px;
    width: 100px;
    @include ellipsis(3);
    border: 2px solid peru;
  }
}
複製程式碼

效果如下：

3、_no-scrollbar

%no-scrollbar {
  &::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    opacity: 0 !important;
  }
}
複製程式碼

該函式是用來去掉滾動條的，這裡支援的是webkit核心的瀏覽器，使用如下：

.noscrollbar-demo{
  margin-top: 10px;
  overflow: scroll;
  height: 100px;
  width: 100px;
  border: 2px solid purple;
  @extend %no-scrollbar;
}
複製程式碼

效果對比如下：

4、_one-px-border

%_onepxElement {
  content: '';
  position: absolute;
}

%_onepxTopBottom {
  @extend %_onepxElement;
  left: 0;
  right: 0;
}

%_onepxLeftRight {
  @extend %_onepxElement;
  top: 0;
  bottom: 0;
}

@mixin setDprBorder($direction: tb) {
  @for $i from 1 through 4 {
    @media screen and (-webkit-min-device-pixel-ratio: $i) {
      @if($direction == tb){
        transform: scaleY(1 / $i);
      } @else if($direction == lr) {
        transform: scaleX(1 / $i);
      } @else if($direction == full) {
        transform: scale(1 / $i);
      }
    }
  }
}

/*
 * 一畫素邊框
 * $direction: 邊框方向，預設底邊框
 * $style: 線條樣式，預設solid
 * $color: 邊框顏色
 */
@mixin one-px-border($direction: bottom, $style: solid, $color: #e5e5e5) {
  position: relative;
  $border: 1px $style $color;
  @if ($direction == bottom) {
    &:after {
      @extend %_onepxTopBottom;
      @include setDprBorder(tb);
      border-top: $border;
      bottom: 0;
    }
  } @else if ($direction == top) {
    &:before {
      @extend %_onepxTopBottom;
      @include setDprBorder(tb);
      border-top: $border;
      top: 0;
    }
  } @else if ($direction == left) {
    &:before {
      @extend %_onepxLeftRight;
      @include setDprBorder(lr);
      border-left: $border;
      left: 0;
    }
  } @else if ($direction == right) {
    &:after {
      @extend %_onepxLeftRight;
      @include setDprBorder(lr);
      border-left: $border;
      right: 0;
    }
  }
}

// 預設下邊框
%one-px-border{
  @include one-px-border();
}

// 四邊一畫素邊框
@mixin full-px-border($color: #e5e5e5, $radius: 0, $zIndex: -1){
  position: relative;
  z-index: 1;
  &:before{
    content: '';
    position: absolute;
    z-index: $zIndex;
    border: 1px solid $color;
    width: 200%;
    height: 200%;
    border-radius: inherit;
    transform: scale(.5);
    transform-origin: top left;
    border-radius: $radius * 2;
    left: 0;
    top: 0
  }
}
%full-px-border{
  @include full-px-border();
}

複製程式碼

這個就特有用的一個函式了，在移動端上，UI小姐姐畫出的邊框線永遠是0.5px，為了迎合小姐姐的需求，我們既可以使用這個來實現，使用如下：

.one-px-border-demo{
  .bottom-border{
    @include one-px-border(bottom, dashed, gold);
    width: 100px;
    margin-top: 10px;
  }
  .full-border{
    @include full-px-border(gold);
    width: 100px;
    margin-top: 10px;
  }
}
複製程式碼

效果如下：

5、_px2rem

// 去除單位並返回數值
@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}
// px轉rem
@mixin px2rem($attr, $num, $base: 37.5) {
  $list: (); //儲存所有轉換後的值

  // 遍歷所有值並轉換為rem單位
  @for $i from 1 through length($num) {
    // 計算單個rem值
    $value: strip-units(nth($num, $i)) / $base * 1rem;
    // 新增到列表中
    $list: append($list, $value);
  }

  // 設定屬性值
  #{$attr}:$list;
}

@function px2rem($num, $base: 37.5) {
  @return strip-units($num) / $base * 1rem;
}
複製程式碼

這個在移動端上就更有用了，推薦等級直接五顆星！！使用這個還需要搭配工具庫去計算當前頁面的rem，一般都使用淘寶的flexible.js。有了這個你就需要再使用Vscode那個什麼px2rem外掛，老實說這個外掛不好用，因為它是直接將px轉換為rem，每個人配置的rem對應的px值不一定一樣，所以轉出來可能是錯的，但是這個函式就不一樣了，它是可以直接看到原始px的，所以滿分推薦。使用如下：

.px-2-rem-demo{
  @include px2rem(height, 400px);
  @include px2rem(width, 200px);
  @include px2rem(padding, 5px 10px);
  margin: px2rem(10px);
}
複製程式碼

兩種使用方法都在上面寫了，效果的話就不說了，誰用誰知道。

6、_center

@mixin center($position) {
  position: absolute;

  @if $position == 'vertical' {
    top: 50%;
    transform: translateY(-50%);
  }
  @else if $position == 'horizontal' {
    left: 50%;
    transform: translateX(-50%);
  }
  @else if $position == 'both' {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
複製程式碼

該函式是用來對某個元素使用position為絕對定位的居中法，使用如下：

.center-demo{
  // 因為center函式是使用相對定位來實現的，所以其父元素記得設定relative。
  position: relative;
  border: 1px solid yellowgreen;
  width: 400px;
  height: 400px;
  .both{
    width: 100px;
    height: 100px;
    border: 1px solid goldenrod;
    @include center(both)
  }
  .vertical{
    width: 100px;
    height: 100px;c
    border: 1px solid goldenrod;
    @include center(vertical)
  }
  .horizontal{
    width: 100px;
    height: 100px;
    border: 1px solid goldenrod;
    @include center(horizontal)
  }
}
複製程式碼

效果如下：

7、_gradient

@mixin background-gradient($start-color, $end-color, $orientation) {
  background: $start-color;

  @if $orientation == 'vertical' {
    background: linear-gradient(to bottom, $start-color, $end-color);
  } @else if $orientation == 'horizontal' {
    background: linear-gradient(to right, $start-color, $end-color);
  } @else {
    background: radial-gradient(ellipse at center, $start-color, $end-color);
  }
}
複製程式碼

該函式可以用來做各種方向的背景漸變，使用如下：

.gradient-demo{
  .vertical{
    margin-top: 10px;
    width: 100px;
    height: 100px;
    border: 1px solid grey;
    @include background-gradient(rgba(255,146,156,1), rgba(216,0,0,1), vertical)
  }
  .horizontal{
    margin-top: 10px;
    width: 100px;
    height: 100px;
    border: 1px solid grey;
    @include background-gradient(rgba(255,146,156,1), rgba(216,0,0,1), horizontal)
  }
  .radius{
    margin-top: 10px;
    width: 100px;
    height: 100px;
    border: 1px solid grey;
    @include background-gradient(rgba(255,146,156,1), rgba(216,0,0,1), radius)
  }
}
複製程式碼

效果如下：

8、_triangle

@mixin triangle($direction: down, $size: 5px, $color: #F96001) {
  width: 0px;
  height: 0px;
  @if ($direction == left) {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-right: $size solid $color;
  }
  @else if ($direction == right) {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: $size solid $color;
  }
  @else if ($direction == down) {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-top: $size solid $color;
  }
  @else {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
  }
}
複製程式碼

這個函式也特有用，時不時的你就需要實現一個三角形來滿足UI小姐姐的需求，使用如下：

.triangle-demo{
  margin-top: 10px;
  .left{
    @include triangle(left, 10px);
    margin-bottom: 10px;
  }
  .right{
    @include triangle(right, 10px);
    margin-bottom: 10px;
  }
  .down{
    @include triangle(down, 10px);
    margin-bottom: 10px;
  }
  .up{
    @include triangle(up, 10px);
    margin-bottom: 10px;
  }
}
複製程式碼

效果如下：

注意

上面的所有程式碼均沒有做瀏覽器差異屬性(vendor-prefix)的新增，這個建議統一使用外掛去完成，沒必要人工寫一遍。如果你使用的postcss的話，可以使用autoprefixer或者postcss-preset-env

最後

該倉庫會持續更新，也歡迎各位童鞋PR，一起豐富~

9個JavaScript小技巧：寫出更簡潔，高效程式碼
2019-03-29
JavaScript
JS程式碼簡潔之道--函式
2020-06-30
JS函式
PHP程式碼簡潔之道——函式部分
2019-02-16
PHP函式
如何編寫簡潔的程式碼？
2019-02-28
如何寫出整潔的程式碼
2023-01-02
[譯] 利用 Immutability（不可變性）編寫更為簡潔高效的程式碼
2019-01-19
常用的Css函式
2019-05-06
CSS函式
【JS】裝飾器讓你的程式碼更簡潔
2017-10-11
JS
五個簡單的原則，帶你寫出整潔程式碼
2020-09-15
利用函式指標,編寫一段簡潔的程式碼,實現計算器的功能
2018-11-29
函式指標
9條消除if...else的錦囊妙計，助你寫出更優雅的程式碼
2021-01-31
在 Laravel 中編寫簡潔的程式碼的策略
2021-12-18
Laravel
瞭解CSS的查詢匹配原理，讓CSS更簡潔、高效
2014-04-14
CSS
5款工具助你寫出更好的Java程式碼
2013-09-09
Java
[翻譯] Async/Await 使你的程式碼更簡潔
2018-01-27
AI
8 個幫助你編寫可維護、精簡化前端程式碼的 CSS 策略
2018-01-04
前端CSS
[譯] 編寫整潔 CSS 程式碼的黃金法則
2017-03-23
CSS
Android & Java 書寫簡潔規範的程式碼
2017-07-21
AndroidJava
把IDE字型增大才能寫出更簡單的程式碼
2018-11-05
IDE
如何寫出更優質的程式碼
2023-02-11
如何讀懂並寫出裝逼的函式式程式碼
2016-10-23
函式
CSS分頁簡潔樣式
2011-03-02
CSS
css 填坑常用程式碼分享
2015-01-22
CSS
寫出整潔的 JavaScript 程式碼 ES6 版
2021-12-05
JavaScript
Spring Boot 整合 Lombok 讓程式碼更簡潔
2019-02-16
Spring BootLombok
程式碼的藝術：如何寫出小而清晰的函式
2016-10-18
函式
Java 簡潔程式碼利器 —— Lambda 表示式
2018-01-25
Java
手寫JavaScript常用的函式
2019-04-15
JavaScript函式
使用 Macro 讓你的程式碼更簡潔，更具有可讀性
2022-03-24
Mac
Kotlin-for-Android : 讓你的Android程式碼更簡潔
2015-04-02
KotlinAndroid
使程式碼更簡潔(二)—-集合轉換相關
2015-09-11
[翻譯] 讓你的程式碼更簡短，更整潔，更易讀的ES6小技巧
2018-02-09
程式碼簡潔之道：編寫乾淨的 React Components & JSX
2020-07-20
ReactJS
經驗總結 | 重構讓你的程式碼更優美和簡潔
2021-07-16
箭頭函式、簡寫函式、普通函式的區別
2019-12-23
函式
程式碼簡潔的十條建議
2018-12-09
一個出於ARouter，卻更輕便簡潔的Route工具
2018-08-27
幾個簡單的技巧讓你寫出的vue.js程式碼更優雅
2018-12-04
Vue.js

分享常用的CSS函式，助你寫出更簡潔的程式碼

1、_clearfix

2、_ellipsis

3、_no-scrollbar

4、_one-px-border

5、_px2rem

6、_center

7、_gradient

8、_triangle

注意

最後

相關文章