【Sass】ラベルとボタンの作り方

エンジニア
この記事は約5分で読めます。

こんにちは、オノユウ(@yumaonodera_)です。

ラベルとボタンの関数を作りました。

使いたいところで、関数を呼び出し、値を入力することで、簡単にオリジナルのボタンを作ることができます。

コピペOKですので、ぜひ使ってみて下さい。

Sassの導入

まず、Sassを導入してください。

Sassの導入方法については省略します。

まだ導入していない方は、下記記事を参考に導入してください。

Sassを使うメリットとよく使う機能を4つだけ厳選!

【Mac】Sassの導入手順

【Windows】Sassの導入手順

VSCode(Visual Studio Code)で簡単にSASS/SCSSファイルのコンパイルができる拡張機能「Easy Sass」がお勧め

ラベルの関数

背景色や角の丸みなどを設定することで、様々な種類のラベルが作れます。

完成イメージは下記画像です。

それでは早速、手順を見ていきましょう。

1. HTMLの記述

任意のクラス名をつけて、文字をpタグで囲みます。

<div class="label">
  <p>ラベル</p>
</div>

2. 関数の定義

次に、Sass側で関数を定義します。

@mixin label($height, $width, $radius, $bg-color, $font-size, $font-weight, $color) {
  display: flex;
  align-items: center;
  justify-content: center;
  height: $height;
  width: $width;
  border-radius: $radius;
  background-color: $bg-color;
  p {
    position: relative;
    font-size: $font-size;
    font-weight: $font-weight;
    color: $color;
    margin-bottom: 0;
  }
}

3. 関数の使用

最後に、関数を使いたい場所で、関数を読み込みましょう。

@include label(高さ, 幅, 角の丸み, 背景色, 文字の大きさ, 文字の太さ, 文字の色);

上記の通り、関数では、頻繁に設定すると思われる上記7つの項目を定義しています。

影や枠線などを設定したい場合は、別で付け足してください。

 

使用例はこんな感じです。

 

完成したラベルが下記の画像です。

ボタンの関数

基本的にはラベルと同じ仕様で、背景色や角の丸みなどを設定することで、様々な種類のボタンが作れます。

作り方の手順も、ほとんどラベルの作り方と同じです。

完成イメージは下記画像です。

それでは、見ていきましょう。

1. HTMLの記述

任意のクラス名をつけて、文字をaタグで囲みます。

<div class="button">
  <a href="#">ボタン</a>
</div>

2. 関数の定義

次に、Sass側で関数を定義します。

@mixin button($height, $width, $radius, $bg-color, $font-size, $font-weight, $color) {
  display: flex;
  align-items: center;
  justify-content: center;
  height: $height;
  width: $width;
  border-radius: $radius;
  background-color: $bg-color;
  &:hover {
    opacity: 0.9;
  }
  a {
    position: relative;
    height: $height;
    width: $width;
    font-size: $font-size;
    font-weight: $font-weight;
    line-height: $height;
    color: $color;
    text-align: center;
    text-decoration: none;
  }
}

3. 関数の使用

最後に、関数を使いたい場所で、関数を読み込みましょう。

@include button(高さ, 幅, 角の丸み, 背景色, 文字の大きさ, 文字の太さ, 文字の色);

項目の種類はラベル関数と同じです。

影や枠線などを設定したい場合は、別で付け足してください。

 

また、デフォルトでは、マウスホバー時にやや透明度が上がるように設定されています。

&:hover {
  opacity: 0.9;
}

マウスホバー時の挙動を変更したい場合は、hoverの設定を上書きするか、関数自体の定義をアレンジしてください。

 

使用例はこんな感じです。

枠線やボタンの位置などは別途指定する必要があります。

 

完成したボタンが下記の画像です。

まとめ

あらかじめよく使う型を定義しておくことで、コーディングが楽になります。

今回紹介したのはラベルとボタンの作り方ですが、他の部品にも応用できるので、よく使う部品はあらかじめ関数を作っておくと良いでしょう。

コメント

タイトルとURLをコピーしました