SCSSゆるっとまとめ

SCSSゆるっとまとめ

## コメントについて
以下のコメントが使える

```scss
/* コンパイル後に表示される */　
// コンパイルには反映されない
```

## ネームスペースでネストできる
同一のネームスペースを持つプロパティは、ネームスペースでネストできる。
> font-family
> font-size
> font-style

```scss
.fontnest{
	font:{
		family:family;
		size:1.2em;
		style:normal;
	}
}
```

## インポートでCSSファイルを1つにまとめられる
ファイル名にアンダースコアをつけたscssファイルはコンパイルされない。
> _reset.scss
> _main.scss
> _footer.scss

```scss
@import "reset";
@import "main";
@import "footer";
```
最終的に生成されるCSSファイルが1つだけになる
→ サーバーの負荷を軽減！
<span style="color:#f00;"> ※ 拡張子とアンダースコアはインポートの時、省略して書くことができる。</span>


## &について
&は親要素のセレクタを表す

```scss
#main {
	font-size:20px;
	a{
		color:#f00;
		// a:hover
		&:hover{
			color:#0f0;
		}
	}
}

```


## 変数について(変数：データにつけるラベル)
#### 変数の宣言
<font color="#f00;">$</font>マークをつけてあげる

```scss
$baseFontSize: 14px;
```

#### Sassで使えるデータ型

- 数値
- 文字列
- 真偽
- 色
- リスト

<br>

#### 算術演算子で値の加減乗除ができる
```scss
$baseFontSize: 14px;
$baseColor: ff44aa;
#main {
	font-size: $baseFontSize - 2px;
	color:$baseColor - #555;
}

```

#### 別の単位同士で演算することもできる。
```scss
$baseFontSize: 14px;
#main {
	font-size: $baseFontSize + 2in;
}

```

## 変数の展開 (変数管理)
<font color="#f00;">#{変数名}</font>を使用することで、変数を展開することができる。

```scss
$imgDir: "../img/";
#main {
	background: url(#{$imgDir}"bg.png");
}

```

## 文字列について
- 文字列の連結は + を使用する。

```scss
$imgDir: "../img/";
#main {
	background: url($imgDir + "bg.png");
}

```

## 色について
Sassが用意している便利な命令(関数)がある

- lighten
- darken


```scss
$brandColor: rgba(255, 0, 0, 0.9);
#main {
	color:lighten($brandColor, 30%);
	color:darken($brandColor, 30%);
	//30% 明るく,暗く
}

```

## if文について
- scssではif文が使用できる。
- 頭に@をつけてあげる必要がある

```scss
$debugMode: true;
$x: 10;

#main {
	@if $debugMode == true{
		color:#f00;
	} @else {
		color:#00f;
	}
	p {
		@if $x > 20{
			color:#ccc;
		}
	}
}

```

<br>

## ループについて
- for文とwhite文が使用できる
- 頭に@をつけてあげる必要がある

```scss
@for $i from 10 throught 14 {
	.fs#{$i} { font-size: #{$i}px; }
}
```

```scss
@while $i <= 14 {
	.fs#{$i} { font-size: #{$i}px; }
	$i: $i + 1;
}
```
<br>

## リストについて
似たようなデータをまとめて管理することができる

```scss
$animals: cat, dog, tiger;
@each $animal in $animals{
	.#{animal}-icon { background: url("#{$animal}.png"); }
}

```
もしくは

```
@each $animal in cat, dog, tiger {
	.#{animal}-icon { background: url("#{$animal}.png"); }
}
```

<br>


## 関数について
- 複数の処理をまとめておこなうことができる
- 頭に@をつけてあげる必要がある

```scss
$totalWidth: 940px;
$columnCount: 5;

@function getColumWidth($width, $count){
	// $columWidthを計算
	$padding: 10px;
	$columWidth: floor(($width - ($padding * ($count -1))) / $count);
	@return $columnWidth;
}

.grid{
	float: left;
	width: getColumWidth($totalWidth, $columnCount);
	// 全体の横幅を計算する
}
```

<br>

## 定義は@mixin、呼び出しは@include
あるまとまったスタイルを<span style="color:#f00;">変数</span>のようにパッケージしておいて、
自由に呼び出して利用できる機能

```scss
/* 定義 */
@mixin main-text {
     font:{
         family: Arial;
         size: 20px;
         weight: bold;
     }
     color: #ff0000;
}

/* 呼び出し */
.hoge{
     @include maintext;
     background-color:#fff;
}
```

<div style="text-align:center">↓　コンパイル　↓</div>

```css
/* 定義 */
/* 呼び出し */
.hoge{
     font-family: Arial;
     font-size: 20px;
     font-weight: bold;
     color: #ff0000;
     background-color:#fff;
}
```

<br>
またミックスインでは、引数も使用することができる

```scss
//@mixin border-radius($radius) {
@mixin border-radius($radius:4px) {		//初期値を使う場合
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	-ms-border-radius: $radius;
	-o-border-radius: $radius;
	border-radius: $radius;
}
.box { @include border-radius(10px); }
```
<br>


## スタイルの継承 @extend
共通部分の<font color="#f00;">セレクタ</font>を継承して呼び出す

```css
.errorMsg{
	font-size:10px;
	font-weight:bold;
	padding:10px;
	background-color:red;
	color:white;
}

.warningMsg{
	font-size:10px;
	font-weight:bold;
	padding:10px;
	background-color:orange;
	color:white;
}
```
<div style="text-align:center">↓　共通部分が多いこんな場合は　↓</div>

```scss

.msg{
	font-size:10px;
	font-weight:bold;
	padding:10px;
	color:white;
}
.errorMsg{
	@extend .msg;
	background-color:red;
}

.warningMsg{
	@extend .msg;
	background-color:orange;
}
```

<div style="text-align:center">↓　コンパイル　↓</div>
```scss

.msg, .errorMsg, .warningMsg{
	font-size:10px;
	font-weight:bold;
	padding:10px;
	color:white;
}
.errorMsg{
	//mixin,includeだとここに展開される。
	background-color:red;
}

.warningMsg{
	//mixin,includeだとここに展開される。
	background-color:orange;
}
```