【徹底解説】SCSSの書き方まとめ！基本を抑えてコーディング速度向上！

// 単位が違うのでコンパイルされない
.class4 {
	width: 50px + 20%;
}

.class4 {
	width: calc(50% + 20px);
}

1 , 15 , 30px , 100% など

white , #ffffff , rgba(255,255,255,0.8) など

sass , 'SCSS' , "SASS" など

true , false

null

$list:"one","two","three";

$map: (key1: value1, key2: value2, key3: value3);

.class {
  margin: 0 auto;
  /* CSSでも使うコメント  →コンパイルされる */
  padding: 0 20px;
}

/* コンパイル後 */
.class .outer {
  padding: 10px 20px;
}

.class .outer .inner {
  width: 100%;
}

.class {
	margin: 30px;

	&--red {
		color: red;
	}
	&:first-of-type {
		margin-top: 0;
	}
	&:hover {
		opacity: .7;
	}
	&.is-click {
		transform: translateY(5px);
	}
}

.class {
	.outer {
		padding: 10px 20px;

		@media (max-width: 480px) {
			padding: 0 10%;
			@at-root {
				.inner {
					width: 100%;
				}
			}
		}

	}
}

/* コンパイル後 */
.class .outer {
  padding: 10px 20px;
}

@media (max-width: 480px) {
  .class .outer {
    padding: 0 10%;
  }
  .inner {
    width: 100%;
  }
}

// 変数1
$base-color: black;
// 変数2
$accent-color: red;

.variable {
	$text-color: red; // ハイフン
	color: $text_color; // アンダースコア
}
/* コンパイルOK */

$variable-color: black; // グローバル変数
.variable {
	color: $variable-color; // グローバル変数→コンパイルOK
}

/* **************************** */
.variable2 {
	$variable2-color: red; // ローカル変数
	color: $variable2-color; // ローカル変数→コンパイルOK
}

/* **************************** */
.variable3 {
	$variable3-color: blue; // ローカル変数
}
.Variable3-inner {
	color: $variable3-color; // ローカル変数→コンパイルNG
}

.variable3 {
	$variable3-color: blue !global; // ローカル変数 !global
}
.Variable3-inner {
	color: $variable3-color; // ローカル変数だけどコンパイルOKになる
}

// 変数設定
$color: black;
$color: red;

.variable {
	color: $color; // →コンパイル結果：red
}

// 変数設定
$color: black;
$color: red !default;

.variable {
	color: $color; // →コンパイル結果：black
}

@if 条件A {
  // 条件Aの場合のスタイル
}
@else if 条件B {
  // 条件Bの場合のスタイル
}
@else {
  // 条件AでもBでもない場合のスタイル
}

$if-style: true;
@if $if-style {
	.m-top {
		margin-top: 0;
	}
}

// 開始から終了の数値を含んだ間で繰り返しの処理
@for 変数名 from 開始の数値 through 終了の数値 {
   // 繰り返しの処理内容
}

// 開始から終了の数値を含まない間で繰り返しの処理
@for 変数名 from 開始の数値 to 終了の数値 {
   // 繰り返しの処理内容
}

// 5から10までの間で繰り返す
@for $i from 5 through 10 {
　// 繰り返しの処理内容
	.hp_mt#{$i * 10} {
		margin-top: 10px * $i;
	}
}

/* コンパイル後 */
.hp_mt50 {
  margin-top: 50px;
}

.hp_mt60 {
  margin-top: 60px;
}

.hp_mt70 {
  margin-top: 70px;
}

.hp_mt80 {
  margin-top: 80px;
}

.hp_mt90 {
  margin-top: 90px;
}

.hp_mt100 {
  margin-top: 100px;
}

@while 繰り返す条件 {
  // ①繰り返す処理（スタイル）
  // ②繰り返しの条件
}

$i: 4;
@while $i < 10 {
  // ①繰り返すスタイル
	.hp_mt#{$i * 10} {
		margin-top: 10px * $i;
	}
  // ②繰り返しの条件
	$i: $i + 1;
}

/* コンパイル後 */
.hp_mt50 {
  margin-top: 50px;
}

.hp_mt60 {
  margin-top: 60px;
}

.hp_mt70 {
  margin-top: 70px;
}

.hp_mt80 {
  margin-top: 80px;
}

.hp_mt90 {
  margin-top: 90px;
}

.hp_mt100 {
  margin-top: 100px;
}

@each 変数名 in リスト {
  処理内容
}

@each $class in value1, value2, value3 {
  .#{$class}-img {
    background-image: url(./image/#{$class}.png);
  }
}

$values: value1, value2, value3;

@each $class in $values {
	.#{$class} {
		background-image: url(../images/bg_#{$class}.png);
	}
}

/* コンパイル後 */
.value1 {
  background-image: url(../images/bg_value1.png);
}

.value2 {
  background-image: url(../images/bg_value2.png);
}

.value3 {
  background-image: url(../images/bg_value3.png);
}

// style.scss
// *****************************

// setting
@import "setting/size";
// mixin
@import "mixin/mixin";
// function
@import "function/function";
// base
@import "base/base";
// layout
@import "layout/layout";
// module
@import "module/nav";

@mixin color($color: #333) {
  color: $color;
}

@mixin tab() {
	@media screen and (max-width: 768px) {
		@content;
	}
}

.class {
	margin: 0 auto;
	padding: 0 20px;
	
	@include tab {
		width: 50%;
	}
}

.class {
  margin: 0 auto;
  padding: 0 20px;
}

@media screen and (max-width: 768px) {
  .class {
    width: 50%;
  }
}

.class {
	background: rgba($color: #000, $alpha: .7);
}

/* コンパイル後 */
.class {
  background: rgba(0, 0, 0, 0.7);
}

.class1 {
	width: round($number: 33.33%);
}

$width: 50%;
.class2 {
	width: round($width / 3);
}

/* コンパイル後 */
.class1 {
  width: 33%;
}

.class2 {
  width: 17%;
}

// Map型の変数「mq-breakpoints」を定義
$mq-breakpoints: ("sm": 599px, "md" : 780px , "lg" : 1080px);

// 「maxmq」というmixinを定義（初期値はsmで設定）
@mixin maxmq($breakpoint: sm) {
// max-widthの値にmap-get関数で変数と値を取得
	@media screen and (max-width: #{map-get($mq-breakpoints, $breakpoint)}) {
		@content;
	}
}

// 呼び出し
.class {
	@include maxmq(md) {
		width: 33.3%;
	}
}

/* コンパイル後 */
@media screen and (max-width: 780px) {
  .class {
    width: 33.3%;
  }
}

@function 関数名() {
	@return 戻り値;
}

.class {
	プロパティ:関数名();
}

$baseFontsize: 16;

// 「rem」という独自関数を作成
@function rem($pixels) {
	@return $pixels / $baseFontsize * 1rem;
}