![](https://mnet-company.co.jp/wp-content/uploads/2023/05/image-1.png)
長時間作業しても疲れない!?4スタンス理論から見る本当に自分に合ったマウスの選び方!
![](https://i0.wp.com/mnet-company.co.jp/wp-content/uploads/2023/05/member02.webp?fit=96%2C96&ssl=1)
SCSSが使えるようになりコーディング速度、保守性が爆上がりした件についてテンションが上がっている私ですが前回はSCSSの入れ子について述べて参りました。
今回は便利な変数や特殊なmixinについてご紹介していきたいと思います。
CSSを書いていると同じような値を何回も下記込むことってないですか?
例えば・・・
hoge {
margin-top: 30px;
max-width: 1200px;
}
hoge1 {
font-size: 18px;
max-width: 1200px;
}
hoge2{
max-width: 1200px;
}
上のコードで共通しているところはmax-width: 1200px;ですがこれを変数にすると・・・
$maxwidth = 1200px
hoge {
margin-top: 30px;
max-width: $maxwidth;
}
hoge1 {
font-size: 18px;
max-width: $maxwidth;
}
hoge2{
max-width: $maxwidth;
}
のようにmaxwidth部分を変数で表現することができました。
上のコードのようにmax-width部分を何らかの理由で1400pxにしないといけないとなった場合変数なしだと膨大なコードの中からmax-widthのプロパティを探しだし、全て変更しなければなりません。
しかし、予め何回も利用するような値に変数を設定しておくと後から全て変更となったときに一ヵ所だけ変更すればよく、保守性や変更に強いコードを作成することが可能になります。
続いてはmixinの使用方法です。
先ほどの変数は一個の値を保持し、それを様々な場所で使いまわすというものでしたがmixinは関数のようなものを作成できるといった特性があります。
HTMLとSCSSで見ていきましょう
<div class="buttonArea">
<button>
ボタン
</button>
</div>
@mixin button() {
button {
background: #FFFFFF;
color: #000000;
font-size: 14px;
border-radius: 50px;
}
}
.buttonArea {
@include button;
}
ボタンやあるコンテンツのスタイルが共通しているというのはWEB制作において多々あります。
そこでスタイルをmixinでまとめておくと同じスタイルを何回も書く手間が省けるだけでなく
例えば、ボタンの色を変えたいとかなるとmixinの内容を書き換えるだけでmixinを設定したボタン全ての内容を変えれるということです。
定義の仕方は
@mixin 関数名()
()の中身は引数を設定することも可能です。
mixinで定義したスタイルを使用する場合は
@include 設定した関数名()
で使用することが可能です。
scssでは入れ子、変数、mixinを理解するだけでも今までのCSSのコーディングより圧倒的にスピードアップしますし、保守性があがりますので是非積極的に覚えていきましょう。
そんな便利なSCSSですがそのままでは使えないのが悲しいところ
次回は実際にSCSSからCSSに変換する「コンパイル」という部分についてご紹介いたします。
山下 生真
役員
建築家を志し京都の大学を卒業。様々な業種を経て、IT業界に心惹かれ、一心発起し、プログラミングスクールに業務の傍ら通う。趣味のYouTubeの動画編集・撮影活動で現CEOと出会う。幼少期からの夢であった”魔法使いになってみんなの役に立つ”実現の為、IT技術を駆使し、世の中の役に立つことを目標に起業。座右の銘は”野心・向上心”。
長時間作業しても疲れない!?4スタンス理論から見る本当に自分に合ったマウスの選び方!
【Part7】記事取得のカスタマイズが捗る。WP_Queryの使い方。カスタムフィールドの指定編
【ワードプレス】問い合わせフォームから届く、ひたすら迷惑なスパムメールを防ぐ為には?
サステナブルマーケティングとは
対面マーケティングの重要性
AIとグラフィックデザイン: デザイナーは心配すべきか?
最近のマイブーム(おすすめメディア紹介)
Webサイト制作における開発手法
幼稚園でICT活用のメリットを紹介
デジタルヘルスとは?