【Sass入門】scssの基本操作

所有時間1分

今回はSassの基本的な使い方について紹介します。(本記事ではscss使用しています)

目次

コメントアウト

//コメント

Sassでは上記のように「//」でコメントアウトできます。

variable:変数

$変数名: 値;
$primary-color: #fff;

上記のように「$」を宣言して変数が作れます。プロパティの値に変数を渡せるので変数の値を変えるだけで一括変更が可能です。

//使用例
$primary-color: #fff;

h2{
  color: $primary-color
}

nesting:ネスト(入れ子)

.parent{
  background-color: blue;
  .child{
    color: white;
  }
}

上記のようにSassでは入れ子が使えるのでcssの管理が簡単になります。

//擬似クラス「:」, 擬似要素「::」の場合
.btn{
  background-color: blue;
  &:hover{
    transform: translateY(-0.3rem);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
  }
}

擬似クラス、擬似要素を入れ子にしたい場合は「&」を使用します。

@mixin

@mixin btn-size{
  font-size: 16px;
}

.btn{
  background-color: green;
  @include btn-size; // = font-size: 16px;
}

上記のように@mixinで定義しておいたcssを別のcssに@includeを使って呼び出せます。

@mixin btn-size($size: 20px){
  font-size: $size;
}

.btn1{
  background-color: green;
  @include btn-size(16px); //font-size: 16px;
}

.btn2{
  background-color: green;
  @include btn-size; // = font-size: 20px;
}

@mixinでは引数を使用できます。デフォルト値は上記のように「$変数: 値」で設定し、@includeで呼び出す際に引数を渡さなければデフォルト値が実行されます。

@mixinは変数を使う際にだけ使用し、コードを短くしたい場合は次に紹介する@extendを使用します。

$extend

//scssの場合
%btn-style {
  background-color: green;
  padding: 12px;
  margin: 10px;
}

.btn1 {
  @extend %btn-style;
}

.btn2 {
  @extend %btn-style;
  color: white;
}

「%」でプレースホルダーを作成し、@extendを使って別のクラスに継承できます。cssファイルのコードを短くしたい場合に使用します。

/* cssにコンパイル */
.btn2, .btn1 {
  background-color: green;
  padding: 12px;
  margin: 10px;
}

.btn2 {
  color: white;
}

@function:関数

@function divide($num1, $num2){
  @return $num1/$num2;
}

.btn{
  margin: divide(30, 2) * 1px; // = margin: 15px;
}

@functionを使えば関数を作成でき、@returnで返り値を返します。

参考サイト

URLをコピーする
URLをコピーしました!
目次
閉じる