CSSをスマートに!今日からSassで使える便利なmixin11選
CSSは簡単に記述することができ、学習コストが低いのが特徴です。
一方で繰り返しに弱く、コードが冗長になりがちだというデメリットも存在します。
そこでSassをはじめとして、関数や変数の処理を行うことができるプリプロセッサー言語を使う現場が増えています。
できるだけコンパクトにコードを書こうという動きも一般的になりつつあります。
Sassの中でもとりわけ便利な機能が、mixinと呼ばれる機能です。
mixinはSassにおける関数のようなもので、値を渡してスタイルなどを返します。
「@mixin」の後ろに名前をつけ、任意で引数を使う場合は「$」の後に名前をつけます。
呼び出す際には「@include」の後にmixin名をつけて呼び出します。
今回は、今日から実践的に使えるSassの便利なmixinをご紹介します。
よく使うものはスニペットにして保存しておき、いつでも再利用できるようにしておくと便利です。
今日からSassで使える便利なmixin
1. 上下左右中央配置
天地と左右に中央配置するときに、みなさんならどのようなコードを書くでしょうか。
一瞬考えて思い出そうとしますが、mixinとして登録しておけば短いコードですぐに記述することができます。
@mixin center {
text-align: center;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
2. リンクカラーの生成
場所によってリンクの色を変えたいときはありませんか。
その場合、hoverやactive、focusなどの色まで一つひとつ指定するのは面倒です。
次のmixinでは、指定した色でリンクカラーを生成し、hoverなどの色は20%明るい色を使うことで一気にリンクカラーのセットを作成することができます。
@mixin link-color($color) {
color: $color;
&:hover, &:active, &:focus {
color: lighten($color, 20%);
}
}
3. 透明度の指定
透明度といえばopacityの設定ですが、IEも含めたクロスブラウザ対応のopacityの設定をmixinで表現してみました。
@mixin opacity($opacity) {
opacity: $opacity;
$ieopacity: ($opacity * 100);
filter: alpha(opacity=$ieopacity);
}
4. フォントサイズの指定 (rem対応)
CSS3で登場した新しい単位remでフォントサイズを指定します。
emや%などの相対指定、pxやptなどの絶対指定などが一般的ですが、remは親要素の影響を受けずにフォントサイズを指定することができるので便利です。
@mixin font-size($size, $base: 16) {
font-size: $size + px;
font-size: ($size / $base) + rem;
}
5. 三角矢印
上下左右にCSSだけで表現できる矢印を作成できるmixinです。
borderで表現しているので、なかに文字を入れることはできません。
なお、すべて省略すると、右向きの高さ12pxのグレーの矢印になります。
@mixin trianglearrow($direction: right, $size: 12, $color: $gray){
$set: left;
@if $direction == left{
$set: right;
}@elseif $direction == top{
$set: bottom;
}@elseif $direction == bottom{
$set: top;
}@else{
$set: left;
}
$size: round($size / 2);
width: 0;
height: 0;
border: $size + px solid transparent;
border-#{$set}-color: $color;
}
6. 矢印
次に棒付きの矢印を表現してみましょう。
サイズ、線の太さ、線の種類、色、矢印の向きを指定することができます。
方向によってtransformの計算方法が異なるので、若干長くなっています。
@mixin arrow($size, $border-width, $border-style, $border-color, $direction) {
content: "";
display: inline-block;
position: absolute;
top: 50%;
width: $size;
height: $size;
margin-top: - ($size / 2);
border: $border-width $border-style $border-color;
@if $direction == up {
-webkit-transform: rotate(-135) + deg;
-moz-transform: rotate(-135) + deg;
transform: rotate(-135) + deg;
}
@else if $direction == under {
-webkit-transform: rotate(45) + deg;
-moz-transform: rotate(45) + deg;
transform: rotate(45) + deg;
}
@else if $direction == right {
-webkit-transform: rotate(-45) + deg;
-moz-transform: rotate(-45) + deg;
transform: rotate(-45) + deg;
}
@else if $direction == left {
-webkit-transform: rotate(135) + deg;
-moz-transform: rotate(135) + deg;
transform: rotate(135) + deg;
}
@else {
-webkit-transform: rotate($direction) + deg;
-moz-transform: rotate($direction) + deg;
transform: rotate($direction) + deg;
}
}
7. モダンなグラデーション背景
最近では同系の2色を指定してモダンで洗練されたような色のグラデーションを使った背景を実装しているホームページも増えてきました。
なかなか色の組み合わせが思いつかないという場合、使いたい色を1色指定すると、もう1色は自動的に指定してくれます。
@mixin bg-gradient($angle: 180deg, $color: #0bd, $amount: 20%) {
background: linear-gradient($angle, $color, adjust-hue($color, $amount)) fixed;
}
8. 文字にグラデーション
先ほど背景にグラデーションを適用する方法を紹介しましたが、文字色としてグラデーションを扱うにはどうすればいいでしょうか。
下記のmixinでは、background-clipで文字部分だけグラデーションを切り抜き、対応していないブラウザでは指定した1色を表示するようにしています。
@mixin gradient-text($angle: 45deg, $color: #f82, $amount: 35%) {
color: $color;
background: -webkit-linear-gradient($angle, $color, adjust-hue($color, $amount));
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
display: inline-block;
}
9. 自動でベンダープレフィックスをつける
CSS3を使うとき、必ずと言っていいほどベンダープレフィックスを使うようになるでしょう。
下記のmixinを使うことで、毎回つけていたベンダープレフィックスの付与を自動化することができます。
@mixin prefixes($property, $value) {
@each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
#{$prefix}#{$property}: $value;
}
}
10. メディアクエリをmixinでまとめる
セレクタごとにメディアクエリを指定するのは面倒なので、mixinでまとめて@contentで要素のコンテンツを引き継ぐと楽になります。
@mixin mediaquery($breakpoint: 768px) {
@media screen and (min-width: $breakpoint) {
@content;
}
}
11. 長文テキストを枠内に収める
最後に、長文テキストをはみ出さないように枠内に収めるためのmixinを紹介します。
@mixin truncate($width: 100%) {
width: $width;
max-width: 100%;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング