今までよく使われるscss mixinをまとめします。
更新中。
一、真 1pxボーダー
Retinaディスプレイのピクセル密度比により、実際の1pxボーダーは予想以上太く見えます。より細くしたいために、以下のコードを使用できます。
parameter説明:
name | description | type | default |
---|---|---|---|
directions | 4つのborderを示す場合(top, left, bottom, right) で設定する、下borderのみ示す場合bottom で設定する |
List又はString | bottom |
color | border-color | Colors | #ccc |
radius | border-radius | List | (0, 0, 0, 0) |
position | 擬似要素 | String | after |
mixin.scss
@mixin realOneBorder(
$directionMaps: bottom,
$color: #ccc,
$radius: (
0,
0,
0,
0
),
$position: after
) {
// 渡されるdirectionMapsのtypeはListかStringかを判断する
$isOnlyOneDir: string==type-of($directionMaps);
@if ($isOnlyOneDir) {
$directionMaps: ($directionMaps);
}
@each $directionMap in $directionMaps {
border-#{$directionMap}: 1px solid $color;
}
@if (list==type-of($radius)) {
border-radius: nth($radius, 1) + px
nth($radius, 2) + px
nth($radius, 3) + px
nth($radius, 4) + px;
} @else {
border-radius: $radius;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
& {
position: relative;
@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;
}
@if (list==type-of($radius)) {
border-radius: nth($radius, 1) *
2 + px
nth($radius, 2) *
2 + px
nth($radius, 3) *
2 + px
nth($radius, 4) *
2 + px;
} @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 + px
nth($radius, 2) *
3 + px
nth($radius, 3) *
3 + px
nth($radius, 4) *
3 + px;
} @else {
border-radius: $radius * 3;
}
width: 300%;
height: 300%;
transform: scale(0.3333);
}
}
}
二、長いテキストに省略記号(…)を付ける方法
name | description | type | default |
---|---|---|---|
rowCount | 行数、単一行または複数行を支持してる | Number | 1 |
mixin.scss
@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;
}
}
三、正三角形
ドロップダウンメニューなどの方向を示すiconとしてよく使われますね〜、
name | description | type | default |
---|---|---|---|
size | サイズ | String | 5px |
color | color | Colors | rgba(0, 0, 0, 0.6) |
dir | 方向 | String | bottom |
mixin.scss
@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 $color transparent transparent;
}
}