This time we’ll add button ICONS, along with the usual append classes, which modify text colors, background colors, borders, and so on.

Modify SRC /button.sass to add some space between ICONS and text.

BTN i.icon display: inline-block width:.9rem &. Right padding-left:.5rem &. Left padding-right: .3rem &. Large I.i con &. Right padding-left:.7rem &. Left padding-right: 1.3remCopy the code

Then add the icon, which we’ll use directly in ionic.

In the HTML import

  <link href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css" rel="stylesheet">
Copy the code

Document can be found here, https://ionicons.com/usage, and then we are going to use it like this.

  <a href="#" class="btn red large"><i class="icon ion-md-close left"</a> <a href="#" class="btn red large"< span style = "max-width: 100%; clear: both; min-height: 1em"icon ion-md-close right"></i></a>
Copy the code

Add color helper classes

We define two arrays, using the NTH method to fetch elements from the array, using the through method to construct an interval, and using the length method to fetch the length of the array. In fact, it is better to use the dict dictionary, but to let you learn more knowledge, so we use the @for loop. Text changes the text color, bg changes the background color.

$colors: $dark.$light.$gray.$blue.$deep-blue, $red.$yellow.$green
$names: 'dark'.'light'.'gray'.'blue'.'deep-blue'.'red'.'yellow'.'green'

@for $i from 1 through length($colors)
  .text-#{nth($names, $i)}
    color: nth($colors.$i)

  .bg-#{nth($names, $i)}
    background: nth($colors.$i)
Copy the code

Add a clear float helper class

A mixin that begins with = is a mixin that can mix objects. It represents a reusable function that can take arguments, which can be omitted because there are no arguments.

=clearfix
  &::after
    content: ' '
    display: table
    clear: both
    
.clearfix
  +clearfix
Copy the code

There’s another kind of @extend inheritance.

%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: # 333

.message
  @extend %message-shared

.success
  @extend %message-shared
  border-color: green
Copy the code

Will be compiled to represent the reuse of selectors, multiple selectors applying the same style.

.message, .success {
  border: 1px solid #cccccc;
  padding: 10px;
  color: # 333;
}

.success {
  border-color: green;
}
Copy the code

Text AIDS

Text alignment, text size, beyond ellipsis and so on.

.text-right text-aligh: right .text-left text-align: left .f8 font-size: .8rem .f9 font-size: .9rem .f1 font-size: F14 font size: 1.4 rem.text - Ellipsis white-space: nowrap overflow: hidden text-overflow: ellipsisCopy the code

Block interval helper classes

Inner margin and outer margin

.p1rem
  padding: 1rem

.m1rem
  margin: 1rem

.p51rem
  padding: .5rem 1rem

.m51rem
  margin: .5rem 1rem
Copy the code

Center helper class

One is absolute centered and one is Flex centered. The Flex centered style must be placed on the parent class.

.ab-center
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%,-50%)

.fx-center
  display: flex
  align-items: center
  justify-content: center
Copy the code

The end result was a rainbow.

Finally, why do I want to extract these helper classes?

First, because it is very common, second, because the addition does not extract, use a separate class, although this is very semantic, and structure and style separation, but can lead to a lot of styles.

There is always a trade-off between having more CSS or more HTML class, and we have to try to find a balance.

All of the code have been completed to check https://github.com/MiYogurt/NicoUI for the source code.

Scan the following QR code, pay attention to wechat public number, free access to boutique front-end small lessons serialized every week, weekly update, what are you waiting for? Pay attention.