Package it into mixin reuse
When writing 🔥 CSS, many styles are commonly used but cumbersome to write. Although there are many mature UI frameworks, we can’t introduce a 🐰 simple activity page with a 🦕 large framework.
I also saved a lot of common CSS in my work. I packaged them into mixins and selected ✋5 to share with you. I hope you like them.
Be a qualified “CV” engineer and “copy/paste” a shuttle
Overflow shows ellipsis
Parameter can be single/multiple lines only.
/** * overflow ellipsis * @param {Number} line Number */
@mixin ellipsis($rowCount: 1) {
@if $rowCount< =1 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} @else {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $rowCount; -webkit-box-orient: vertical; }}Copy the codeTrue. 1 px borders
On mobile, the actual 1px border looks thicker due to the pixel density ratio. If you want to be thinner, you can use the following code. Devices with different pixel density ratios are compatible (PC/mobile), and any number of rounded corners are supported.
/** * true.1px border * {List}: multiple direction border, default is bottom, you can pass (top, left, bottom, right) 4 direction; * {Color} border Color, default # CCC; * {List} 4 fillet radii, default 0; * {String} An advanced setting, which generally does not need to be changed, is implemented using CSS pseudo-classes, so to avoid possible style conflicts, we can specify whether to use :after or :before, default after; * /
@mixin thinBorder(
$directionMaps: bottom,
$color: #ccc.$radius: (
0.0.0.0
),
$position: after
) {
// Is there only one direction
$isOnlyOneDir: string==type-of($directionMaps);
@if ($isOnlyOneDir) {
$directionMaps: ($directionMaps);
}
@each $directionMap in $directionMaps {
border- # {$directionMap} :1px solid $color;
}
// Check whether the rounded corner is a list or a number
@if (list==type-of($radius)) {
border-radius: nth($radius.1)
nth($radius.2)
nth($radius.3)
nth($radius.4);
} @else {
border-radius: $radius;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {& {position: relative;
// Remove the border below 1 pixel density ratio
@each $directionMap in $directionMaps {
border- # {$directionMap}: none; }} & : # {$position} {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 200%;
height: 200%;
transform: scale(0.5);
box-sizing: border-box;
padding: 1px;
transform-origin: 0 0;
pointer-events: none;
border: 0 solid $color;
@each $directionMap in $directionMaps {
border- # {$directionMap} -width: 1px;
}
// Check whether the rounded corner is a list or a number
@if (list==type-of($radius)) {
border-radius: nth($radius.1) *
2
nth($radius.2) *
2
nth($radius.3) *
2
nth($radius.4) *
2;
} @else {
border-radius: $radius * 2; }}}@media only screen and (-webkit-min-device-pixel-ratio: 3) # {{& :$position} @if (list==type-of($radius)) {
border-radius: nth($radius.1) *
3
nth($radius.2) *
3
nth($radius.3) *
3
nth($radius.4) *
3;
} @else {
border-radius: $radius * 3;
}
width: 300%;
height: 300%;
transform: scale(0.3333); }}}Copy the codeEquilateral triangle
If your page is a simple activity page, introducing a UI like “Hungry?” is overkill. With “Triangle” you can make a simple one yourself.
/** * Equilateral triangle * @param {String} size * @param {Color} Color * @param {String} direction */
@mixin triangle($size: 5px.$color: rgba(0.0.0.0.6), $dir: bottom) {
width: 0;
height: 0;
border-style: solid;
@if (bottom==$dir) {
border-width: $size $size 0 $size;
border-color: $color transparent transparent transparent;
} @else if (top==$dir) {
border-width: 0 $size $size $size;
border-color: transparent transparent $color transparent;
} @else if (right==$dir) {
border-width: $size 0 $size $size;
border-color: transparent transparent transparent $color;
} @else if (left==$dir) {
border-width: $size $size $size 0;
border-color: transparent $colortransparent transparent; }}Copy the codeloading
@mixin loading-half-circle($width: 1em) {
display: inline-block;
height: $width;
width: $width;
border-radius: $width;
border-style: solid;
border-width: $width/10;
border-color: transparent currentColor transparent transparent;
animation: rotate 0.6 s linear infinite;
vertical-align: middle;
}
Copy the codeThe board
If you make some interface generator tools (class e-show) you will use them.
/** * checkerboard background * @param {Color} background */
@mixin bgChessboard($color: #aaa) {
background-image: linear-gradient(
45deg.$color 25%,
transparent 25%,
transparent 75%.$color 75%.$color
),
linear-gradient(
45deg.$color 26%,
transparent 26%,
transparent 74%.$color 74%.$color
);
background-size: 10vw 10vw;
background-position: 0 0.5vw 5vw;
}
Copy the codeconclusion
Above the code I put github, source: github.com/any86/5a.cs…
Sum up so much, I hope to be useful to you, write not necessarily comprehensive, throw a brick to attract jade, but also please bear with us, thank you for reading.
Brothers, 🚆 novice front end don’t panic! Here you ✊10 straws 🍃
Juejin. Cn/post / 684490…
🚀 typescript
If you are interested in TS, please check out my TS basics tutorial.
Lesson one: Play with typescript
Lesson two, basic types and introductory advanced types
Lesson three: Generics
Lesson four: Reading advanced types
Lesson 5: What is a namespace
Special, learn typescript in vue3🔥 source 🦕 – “is”
Lesson 6. What is a declare? 🦕 – Global declaration
WeChat group
Thank you for your reading. If you have any questions, you can add me to the wechat group, and I will pull you into the wechat group (Because Tencent limits the number of wechat groups to 100, when the number exceeds 100, you must be joined by group members).
