Share common CSS functions to help you write simpler code

Share some CSS helper functions that are useful in your projects and can be applied directly to your own style code, portal. Of course, these functions are not native CSS, there are two sets of sASS syntax and less syntax, you can choose to copy or download.

All listed below are SCSS syntax. For less syntax, see portal

1, _clearfix

%clearfix {
  &:after,
  &:before {
    content: ""; display: table; } &:after { clear: both; }}Copy the code

This function can be used directly to clear the float, for example (to save space, the sample HTML code is not listed below, please refer to source code) :

<section class="clear-fix-demo">
  <div class="container clearfix">
    <div class="float-left"<div > <div class= </div> <div class="text"> I am floating element next to </div> </div> <div class="brother"</div> </section>Copy the code

Corresponding 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; }}Copy the code

The effect is as follows:

2, _ellipsis

// Text overflow ellipsis, webKit only supports multiple @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);
}
Copy the code

This function can be used to implement one-line or multi-line elision as follows:

.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; }}Copy the code

The effect is as follows:

3, _no – scrollbar

%no-scrollbar { &::-webkit-scrollbar { display: none ! important; width: 0 ! important; height: 0 ! important; -webkit-appearance: none; opacity: 0 ! important; }}Copy the code

This function is used to remove the scroll bar, which is supported by webKit kernel browsers, as follows:

.noscrollbar-demo{
  margin-top: 10px;
  overflow: scroll;
  height: 100px;
  width: 100px;
  border: 2px solid purple;
  @extend %no-scrollbar;
}
Copy the code

The effect comparison is as follows:

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); }}}} /* * one pixel border *$direction: Border direction, default bottom border *$style: Line style, default solid *$color: border 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; }} // Default bottom border %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();
}

Copy the code

On the mobile end, the border line drawn by UI is always 0.5px. In order to meet the needs of UI, we can use this to achieve, as follows:

.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; }}Copy the code

The effect is as follows:

5, _px2rem

// Remove units and return the value @function strip-units($number) {@return $number / ($number* 0 + 1); } // reem@mixin px2rem($attr.$num.$base: 37.5) {
  $list: (); // Store all converted values // iterate over all values and convert to rem @for $i from 1 through length($num) {// Calculate a single REM value$value: strip-units(nth($num.$i)) / $base* 1rem; // Add to the list$list: append($list.$value); } // Set the property value#{$attr}:$list;
}

@function px2rem($num.$base: 37.5) {@return strip-units($num) / $base * 1rem;
}
Copy the code

This is even more useful on mobile, with a recommendation rating of 5 stars!! To use this, you also need to match the tool library to calculate the REM of the current page, generally using Taobao’s flexible. Js. With this, you need to use Vscode’s px2REM plugin. Frankly, this plugin is not easy to use, because it directly converts PX to REM, and everyone’s REM is not the same, so it can be wrong, but this function is different, it can directly see the original PX. So full score recommendation. Use as follows:

.px-2-rem-demo{
  @include px2rem(height, 400px);
  @include px2rem(width, 200px);
  @include px2rem(padding, 5px 10px);
  margin: px2rem(10px);
}
Copy the code

Two kinds of use methods are written above, the effect is not said, who uses who knows.

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%); }}Copy the code

This function is used to center an element using position as an absolute position, as follows:

.center-demo{// Since the center function is implemented using relative positioning, remember to set relative to its parent element. 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) } }Copy the code

The effect is as follows:

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); }}Copy the code

This function can be used to do background gradients in any direction, as follows:

.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)}}Copy the code

The effect is as follows:

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; }}Copy the code

This function is also unique, and every now and then you need to implement a triangle to meet the needs of the UI. Use it as follows:

.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; }}Copy the code

The effect is as follows:

Pay attention to

All the above codes do not add the browser vendor-prefix attribute. This is recommended to be completed by using the plug-in. There is no need to write it manually. Yes, if you use PostCSSautoprefixerorpostcss-preset-env

The last

The warehouse will continue to update, you are welcome to join us

Share common CSS functions to help you write simpler code

1, _clearfix

2, _ellipsis

3, _no – scrollbar

4, _one – px – border

5, _px2rem

6, _center

7, _gradient

8 _triangle.

Pay attention to

The last

Related Posts

Ali front end practice experience

Vue routing keep-alive on demand

Quick start PostCSS plugin: Automatically convert PX to REM