Sassは、CSSの記述を効率的に行えるようにするツールの１つです。Sassは、より効率的なCSSコーディングを実現するための拡張機能を提供し、ネスト、変数、ミックスイン、関数などの機能が利用できます。
以下に、Sassの基本的な機能とその活用法を説明します。
変数の利用
変数を使用することで、スタイルで使う値を一元管理できます。これにより、後で変更が必要な場合に効率的に対応できます。
$primary-color: #3498db;
.button {
background-color: $primary-color;
}
.link {
color: $primary-color;
}サイトのメインカラーなどを事前に定義しておくと、大変便利です。後々色を変えることになっても変数の色を変えれば全て変更されるので使っていきましょう。
ネスト
Sassでは、親要素のネスト構造を利用して、CSSを生成することができます。
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline; }
a {
text-decoration: none;
&:hover {
border-bottom: 1px solid #ccc;
}
}
}ネストして書くことができますが、そもそもネストしすぎるCSSの設計自体があまり良いものではないので、やりすぎには気をつけましょう。逆に見づらい可能性があります。
しかし、レスポンシブのためのメディアクエリなどはネストして書かれている方が見やすいと感じます。
ミックスイン
ミックスインは、再利用可能なスタイルの塊を定義して適用する機能です。
@mixin border-radius($radius) {
border-radius: $radius;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
}
.button {
@include border-radius(5px);
}何度も同じスタイルを使う場合に大変便利です。例えば、色以外はスタイルが同じ場合などに、ミックスインに共通部分を書いておくと後に変更があった場合にその部分を修正するだけでスタイルの変更が可能なので使っていきましょう。
しかし、何でもかんでも共通化してしまうと後で地獄を見る可能性があるので本質的に同じものだけにしておいてくださいね。
継承
継承を使用することで、既存のスタイルを別の要素に適用できます。
.message {
border: 1px solid #ccc;
padding: 10px;
}
.success-message {
@extend .message;
background-color: #dff0d8;
border-color: #d6e9c6;
}継承は個人的にあまり使用しないですが、このような機能もあると覚えておいても損はないでしょう。個人的にはミックスインで共通部分を定義しておいてそれを使う方がいいと考えています。
条件分岐
条件分岐を利用して、特定の条件に基づいてスタイルを適用することができます。
@mixin breakpoint($point) {
@if $point == tb {
@media (max-width: 1024px) {
@content;
}
}
@if $point == sp {
@media (max-width: 768px) {
@content;
}
}
}使い方としては、上記のようにミックスインでメディアクエリのブレイクポイントを事前に定義しておく使い方が便利なのでおススメです。ぜひ、使ってみてくださいね。
まとめ
この記事はSassの基本と活用法について解説しました。CSSの学習がある程度終わって、Sassをやってみようという人は多いと思うのでこの記事が少しでも参考になったのなら幸いです。慣れると普通のCSSには戻れないほど便利なので挑戦してみてください。最初は難しいと思いますが、継続して頑張れば必ずできるはずなので頑張ってください。
「読んだだけでは100%身に付きません」
必ず行動に移してください。
そう言っても、
行動する人は20%
それを継続する人は5%
行動し続けるだけで、
上位5％に入ることができます。
今すぐ行動して上位5％に入り、
Web制作で本気で人生変えたい
そんな人は今すぐ登録してください
今行動しなきゃ、人生変わらないですよ
こちらの公式LINEではTwitter開始して1週間で案件獲得した勉強法、仕事の取り方などweb制作での収益化の方法を発信しています！
是非登録してみて下さい！
コメント