This is the thirty-first day of my participation in the August Wen Challenge.More challenges in August

Finally, finally ushered in the last day of more challenges, that is, August 31, this month really liver of a little fierce, the whole person is not good, today’s last day, refueling, finish his liver.

preface

As mentioned earlier, the Tool layer is mostly about Mixins and functions. And in our usual CSS development will always encounter some, such as text center ah, or text overflow, need to hide, and then through the three points is ellipsis to display. And this ellipsis, it might work on page A, it might work on page B.

We can’t write a style like this on every page. At this point we can put the code inside the tool layer. Make a common mixins and call them on each corresponding page. This has the effect of being code common. For example, vertical play, horizontal center, this effect is more common, can be put into mixins. You can also make a function.

Sassmagic

So much said in front, in fact, someone had already done it for me. That’s Sassmagic.

He’s done a great job of writing the files. All we have to do is install it.

How to install?

Let’s open the link to download the three files above. Put it in your tool folder.

Local or global references are fine. Isn’t that easy?

use

So how do we use it? In fact, the official documentation is very good. But I can’t help but give you a rundown.

Let’s say it’s vertically and horizontally centered.

The following should do it.

//SCSS

.justify-center {
    @include box-center;
}
Copy the code

Or control text overflow, ellipsis display.

//SCSS
div {
	@include box-clamp;
}
Copy the code

Is anxious convenient and simple.

Oh, and official documents

END~~~