SCSSゆるっとまとめ

SCSSゆるっとまとめ

コメントについて

以下のコメントが使える

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

ネームスペースでネストできる

同一のネームスペースを持つプロパティは、ネームスペースでネストできる。

font-family
font-size
font-style

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

インポートでCSSファイルを1つにまとめられる

ファイル名にアンダースコアをつけたscssファイルはコンパイルされない。

_reset.scss
_main.scss
_footer.scss

@import "reset";
@import "main";
@import "footer";

最終的に生成されるCSSファイルが1つだけになる
→ サーバーの負荷を軽減！
※ 拡張子とアンダースコアはインポートの時、省略して書くことができる。

&について

&は親要素のセレクタを表す

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

変数について(変数：データにつけるラベル)

変数の宣言

$マークをつけてあげる

$baseFontSize: 14px;

Sassで使えるデータ型

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

算術演算子で値の加減乗除ができる

$baseFontSize: 14px;
$baseColor: ff44aa;
#main {
	font-size: $baseFontSize - 2px;
	color:$baseColor - #555;
}

別の単位同士で演算することもできる。

$baseFontSize: 14px;
#main {
	font-size: $baseFontSize + 2in;
}

変数の展開 (変数管理)

#{変数名}を使用することで、変数を展開することができる。

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

文字列について

• 文字列の連結は + を使用する。

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

色について

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

• lighten
• darken

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

if文について

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

$debugMode: true;
$x: 10;

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

ループについて

• for文とwhite文が使用できる
• 頭に@をつけてあげる必要がある

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

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

リストについて

似たようなデータをまとめて管理することができる

$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"); }
}

関数について

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

$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);
	// 全体の横幅を計算する
}

定義は@mixin、呼び出しは@include

あるまとまったスタイルを変数のようにパッケージしておいて、
自由に呼び出して利用できる機能

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

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

↓　コンパイル　↓

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

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

//@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); }

スタイルの継承 @extend

共通部分のセレクタを継承して呼び出す

.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;
}

↓　共通部分が多いこんな場合は　↓

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

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

↓　コンパイル　↓

```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;
}