Поделитесь некоторыми вспомогательными функциями CSS, полезными в проекте, которые можно напрямую применить к вашему собственному коду стиля,портал. Конечно, эти функции изначально не написаны на CSS. Есть два набора синтаксиса sass и меньшего синтаксиса. Вы можете скопировать или скачать их.
Ниже перечислены все синтаксис 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>
Соответствующий сксс:
.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. _многоточие
// 文字溢出省略，仅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 {
&::-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;
}
Сравнение эффектов выглядит следующим образом:
vs
4. _one-px-граница
%_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();
}
Это очень полезная функция.На мобильном терминале линия границы, нарисованная Miss UI, всегда составляет 0,5 пикселя.Чтобы удовлетворить потребности Miss, мы можем использовать это для реализации следующим образом:
.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;
}
Это даже полезнее на мобильном терминале, а уровень рекомендации сразу пять звезд! ! Для этого также требуется библиотека инструментов для расчета оставшейся части текущей страницы, обычно с использованием гибкого.js Taobao. При этом вам нужно использовать Vscode или что-то в этом роде.px2remПлагин, честно говоря, этот плагин не прост в использовании, потому что он напрямую конвертирует px в rem, а значение px, соответствующее rem, настроенное у каждого человека, не обязательно одинаковое, поэтому перевод может быть неправильным, но эта функция отличается, вы можете непосредственно увидеть исходный пиксель, поэтому рекомендуется использовать полные отметки. Используйте следующим образом:
.px-2-rem-demo{
@include px2rem(height, 400px);
@include px2rem(width, 200px);
@include px2rem(padding, 5px 10px);
margin: px2rem(10px);
}
О двух способах применения написано выше, а об эффекте говорить не буду, кто пользуется знает.
6. _центр
@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%);
}
}
Эта функция используется для использования метода центрирования абсолютного позиционирования элемента следующим образом:
.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. _градиент
@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. _треугольник
@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;
}
}
Эта функция также очень полезна. Время от времени вам нужно реализовать треугольник, чтобы удовлетворить потребности Miss 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
наконец
Склад будет продолжать обновляться, и вы также можете участвовать в пиаре детской обуви, чтобы обогащаться вместе ~