Saas/SCSS② 〜@function/パーシャル・@import/@mixin・@include/@extend〜

本日の学習範囲

（学習時間：4.5時間）

ドットインストール

https://dotinstall.com/lessons/basic_sass
Sass/SCSS入門 #11〜#15

※ #01〜#10の学習メモ↓
Saas/SCSS① 〜概要/ネスト/コメント/&/変数/文字列の連結/インターポレーション/色の関数/条件分岐/ループ〜

以前挑戦した模写コーディングの編集

CSSの部分をSCSSで記述

Sass/SCSS学習メモ

@function

SCSSファイル

$totalWidth: 940px;
$columnCount: 10;
@function getColumnWidth($width, $count) {
  $padding: 10px;
  $columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
  @return $columnWidth;
}
.gird {
  float: left;
  width: getColumnWidth($totalWidth, $columnCount);
}

CSSファイル

.gird {
  float: left;
  width: 85px;
}

@function 関数名($引数1, $引数2) {処理 @return 戻り値;}で、独自の関数を定義することが可能
関数：渡された値を元に計算や処理を行い、値を出力する
引数：関数に渡す値
戻り値：関数が出力する値
floor(数値)で、数値の小数点以下を切り捨てる

パーシャル(_○○.scss)・@import

SCSSファイル

main.scss

@import "settings";
@import "functions";
.gird {
  float: left;
  width: getColumnWidth($totalWidth, $columnCount);
}

_settings.scss

$totalWidth: 940px;
$columnCount: 10;

_functions.scss

@function getColumnWidth($width, $count) {
  $padding: 10px;
  $columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
  @debug $columnWidth;
  @return $columnWidth;
}

CSSファイル

.gird {
  float: left;
  width: 85px;
}

パーシャル：複数のSCSSファイルを一つのCSSファイルにコンパイルすることが可能
メインのSCSSファイルから分割したSCSSファイル(_○○.scss)を作成する
→メインのSCSSファイルに@import '○○';と記述し、メインのSCSSファイルから分割したSCSSファイルを読み込むようにする
@debugを使うと、コマンド画面に値を出力することができる

@mixin・@include

SCSSファイル

@mixin round {
  border-radius: 4px;
}
.label {
  font-size: 12px;
  @include round;
}
@mixin round($radius) {
  border-radius: $radius;
}
.label {
  font-size: 12px;
  @include round(5px);
}
@mixin round($radius: 4px) {
  border-radius: $radius;
}
.label {
  font-size: 12px;
  @include round(10px);
}

CSSファイル

.label {
  font-size: 12px;
  border-radius: 4px;
}
.label {
  font-size: 12px;
  border-radius: 5px;
}
.label {
  font-size: 12px;
  border-radius: 10px;
}

@mixin ミックスイン名 {定義}でひとまとまりのスタイルを定義することが可能
その定義したスタイルは、@include ミックス名;で読み出すことが可能
引数を使う場合は、@mixin ミックスイン名(引数) {定義}と記述する
※引数が複数の場合は,で区切る
※引数名は$から始める
また、引数に初期値を設定する場合は、@mixin ミックスイン名(引数: 値) {定義}と記述する

@extend

SCSSファイル

.msg {
  font-size: 12px;
  font-weight: bold;
  padding: 2px 4px;
  color: white;
}
.errorMsg {
  @extend .msg;
  background: red;
}
.warningMsg {
  @extend .msg;
  background: orange;
}

CSSファイル

.msg, .errorMsg, .warningMsg {
  font-size: 12px;
  font-weight: bold;
  padding: 2px 4px;
  color: white;
}
.errorMsg {
  background: red;
}
.warningMsg {
  background: orange;
}

@extend セレクタ名;で、指定したセレクタで定義されているスタイルの継承が可能