どんなコーディング案件でも対応可能なミックスイン8種類
アレもコレもと用意するのではなく、何度も使うものだけを用意しておく。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | @charset "utf-8"; // フォントサイズ @mixin fs($num) { font-size: $num + px; font-size: ($num / 16) + rem; // font-size: percentage($num / 16); } // テキストを画像置換 @mixin hide { text-indent: 100%; white-space: nowrap; overflow: hidden; } // リストのマーカーデフォルト @mixin ul($pd: 40, $marker: disc) { list-style-type: $marker; padding-left: $pd + px; } @mixin ol($pd: 40, $marker: decimal) { list-style-type: $marker; padding-left: $pd + px; } // 矢印 @mixin arrow { content: ""; position: absolute; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); } // opacity @mixin op($opacity) { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=#{$opacity * 100}); opacity: $opacity; } // clearfix @mixin cf { &::after { content: ""; display: block; clear: both; } } // ブレークポイント @mixin min($width) { @media screen and (min-width: $width + px) { @content; } } @mixin max($width) { @media screen and (max-width: $width + px) { @content; } } // iOS, Android @mixin rt { @media (-webkit-min-device-pixel-ratio: 2) { @content; } } // nth系 @mixin f { &:first-child { @content; } } @mixin f-not { &:not(:first-child) { @content; } } @mixin l { &:last-child { @content; } } @mixin l-not { &:not(:last-child) { @content; } } @mixin ft { &:first-of-type { @content; } } @mixin ft-not { &:not(:first-of-type) { @content; } } @mixin lt { &:last-of-type { @content; } } @mixin lt-not { &:not(:last-of-type) { @content; } } @mixin n($num) { &:nth-child(#{$num}) { @content; } } @mixin nt($num) { &:nth-of-type(#{$num}) { @content; } } |
コメントを投稿する