scss МиксиныдлясозданияCSSстрелокишевронов
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss МиксиныдлясозданияCSSстрелокишевронов相关的知识,希望对你有一定的参考价值。
@mixin arrow($dir: 'down', $size: 4px, $color: #000) {
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
@if ($dir == 'up' or $dir == 'down') {
border-left-width: $size;
border-right-width: $size;
}
@if ($dir == 'right' or $dir == 'left') {
border-top-width: $size;
border-bottom-width: $size;
}
@if ($dir == 'up') {
border-bottom-width: $size;
border-bottom-color: $color;
}
@if ($dir == 'down') {
border-top-width: $size;
border-top-color: $color;
}
@if ($dir == 'right') {
border-left-width: $size;
border-left-color: $color;
}
@if ($dir == 'left') {
border-right-width: $size;
border-right-color: $color;
}
}
@mixin arrow-after($dir: 'down', $size: 4px, $color: #000) {
&::after {
content: '';
display: inline-block;
@include arrow($dir, $size, $color);
}
}
@mixin arrow-before($dir: 'up', $size: 4px, $color: #000) {
&::before {
content: '';
display: inline-block;
@include arrow($dir, $size, $color);
}
}
// top-left, top-right, bottom-left, bottom-right
@mixin chevron($dir: 'top-left', $height: 40px, $width: 40px, $color: #000) {
width: 0;
height: 0;
@if ($dir == 'top-left' or $dir == 'top-right') {
border-top: $height solid $color;
}
@if ($dir == 'bottom-left' or $dir == 'bottom-right') {
border-bottom: $height solid $color;
}
@if ($dir == 'top-left' or $dir == 'bottom-left') {
border-right: $width solid transparent;
}
@if ($dir == 'top-right' or $dir == 'bottom-right') {
border-left: $width solid transparent;
}
}
@mixin chevron-after($dir: 'top-left', $height: 40px, $width: 40px, $color: #000) {
&::after {
content: '';
display: inline-block;
@include chevron($dir, $height, $width, $color);
}
}
@mixin chevron-before($dir: 'top-left', $height: 40px, $width: 40px, $color: #000) {
&::before {
content: '';
display: inline-block;
@include chevron($dir, $height, $width, $color);
}
}
以上是关于scss МиксиныдлясозданияCSSстрелокишевронов的主要内容,如果未能解决你的问题,请参考以下文章
scss Правильноразделяемзапятымиэлементысписков
scss Миксиндлябыстрогоиспользованиязапросов@media(max-width ....
php быстраяиндексациямассива。 однаизнаиболеечастоиспользуемыхфункций。
比特币不能购买特斯拉了!今日比特币狂跌背后的原因……
scss зацикленнаяанимациядляспиннера。 $ b $bСоздаемпсевдо-элемент。 Здесьдостаточнонавешиватькласснаоб
php ПлагинMihdan:Yandex Turbo Feed。 Хукидлянастройкиyandexturboподкастомныезаписи,таксономиииполя