カテゴリー: 勉強会のフォローアップ

勉強会にあたって、下記の書籍を購入しました。
Sassを書いてみたい方にとてもオススメです。
Ｗｅｂ制作者のためのＳａｓｓの教科書
サポートサイトで書籍の正誤表やサンプルソースを見られます→http://book.scss.jp

さて、勉強会のために、下記のページを作りました。
http://www.ccc-labo.net/_demo/sass_lesson1/local/
このページを作る際に書いたSassを例にしてSassの基本的な書き方を確認していきました。

なお、コンパイル結果を確認するために、ウェブツールを使いました。
SassMeister→http://www.sassmeister.com

最初に、Sassの使い所がイマイチない、という話をした。そもそもCSSを書くときの管理方についても明文化できていないのに、Sassを使って効率化、という段階にない、とか、自分がSassで書くと他の人に引継ぎができないとか。そもそも、プログラムアレルギーが強くて馴染めない、などなど。

これらは私がSassを遠ざけた理由そのままだったので、とても納得なのだが、改めてSassをいろいろいじってみると・・・・・・まあ、圧倒的に便利な部分がある。例えば変数とかは使いたくてたまらない。コンパイルとか、環境を作ることがまず大変ですが。。。（苦労しました）
この苦労と、書き方を覚える労力をかけるのと、今まで通りCSSをサクサク書くのと効率としてはトントンかもなあ、という思いがSass導入を遠ざけていたわけです（個人的に）。
しかし、勉強会を機に、一旦コンパイルする環境まで作ってしまえば、逆にこう思った。

「Sassのファイル内でいつも通りCSS書いたらそれは単純にCSSとして書き出されるだけなんだし、Sassの便利なところ、書ける！と思うことだけ取り入れたらええやん。」

と、いうわけなので、楽しいです、Sass。
紹介した書き方が下記です。カキカキ。

入れ子

.entry-header {
	.entry-title {
		font-weight: 300;
		text-align: center;
	}
}


.main-navigation {
		
	ul {
		padding: 0;
		margin: 0;
		text-align: center;
			
		li {
			display: inline-block;
			margin-right: 10px;
			line-height: 1;
			
			a {
				display: block;
				padding: 7px 10px;
				background-color: #333;
				color: #fff;
				text-decoration: none;
				transition: opacity 0.5s ease-in;
				opacity: 1;
					
				&:hover {
					opacity: 0.6;
					transition: opacity 0.5s ease-in;
				}
			}
			
			&:last-child {
				margin-right: 0;
			}
		}
	}
}

 

変数

$window_medium : 600px;
$window_large : 1200px;

$keycolor : #007099;

 

計算と繰り返し
@for関数を使って、繰り返しの処理を書く。

$grid_margin : 2%;/*単位は％*/
$grid_width : ( 100 - $grid_margin * 5 ) / 6;

@for $i from 1 through 6 {
		.grid-small-#{$i} {
			width: ($grid_margin * ($i - 1) + $grid_width * $i);
		}
	}

 

色の計算
キーカラーから派生させた背景色を作る。こうするとトーン配色を守った色使いが考えやすい。

$keycolor : #007099;

.main-visual {
	text-align: center;
	background-color: mix($keycolor,#EEE, 10%);
	padding-top: 40px;
	margin-bottom: 30px;
}

 

@extendの例
同じ処理をまとめるために使う。ただ、後に紹介する@mixinの方がSassで書くものとコンパイルの結果の違和感が少ないよね、という意見もあった。（私もちょっと苦手）

%btnBase {
border-radius:3px;
background-color: #333;
color:#fff;
}

.btn {
@extend %btnBase;
padding: 9px;
}



.item {
@extend .btn;
margin-left:10px;
}

.item2 {
@extend %btnBase;
margin-left:10px;
padding: 4px;
}

ミックスイン
@mixin関数。これは本当に便利だ。
@include kadomaru(); のカッコ内には角丸のサイズを入れることで、変更ができるので試してみてほしい。
例　@include kadomaru(10px);

@mixin iblockHack {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

@mixin kadomaru($value: 4px) {
	-moz-border-radius: $value;
	-webkit-border-radius: $value;
	border-radius: $value;
}

li {
				@include iblockHack;
				margin-right: 10px;
				line-height: 1;
a {
					display: block;
					padding: 7px 10px;
					@include kadomaru();
}
}

 

ミックスイン複数の値
複数の値をとることも可能。角丸のサイズとパディングの値を変数にしておくと、これひとつで角丸のあるボタンやボックスの調整がたった1行書くだけでできるようになる。

@mixin kadomaruBox($value1: 4px,$value2: 10px) {
	-moz-border-radius: $value1;
	-webkit-border-radius: $value1;
	border-radius: $value1;
padding: $value2;
display: block;
}

a {
@include kadomaruBox(10px,30px);
}

以下、勉強会の時に出てきた質問などについて少し調べておいたので、書き留めておきます。

コンパイルされたCSSの改行とかタブの入り方が気にくわない、修正したい！
こんな記事見つけました。やっぱり思っている人はいた。
http://www.ysakmrkm.com/2012/10/customize_output_format_compiled_by_sass.html
根本的な解決にならない、って書いてあるけど、どうじゃろ、ruby詳しい人に聞けばいいのかな・・・。

Macでの環境構築について
El Captainになって、OSのシステム系のファイルにルート権限でもアクセスできなくなったそうな（すみません、細かいことはよくわかっていません）。
で、Macは標準でRubyが入っているからそっち使ってもいいよ、という感じでやってみようとしたんですが、失敗しまくり。色々やりすぎて何をどうしたのかあまり覚えてもいない・・・・・。
この辺りが参考になる気がします。
https://teratail.com/questions/23280

compassを使う
勉強会の際に使っていたMacBookではできなかったのですが、自宅のiMacでは普通に使えたので、頭を抱えています。バージョンとかも変わらないのですが・・。
ただ、iMacの環境では、compass watchがなんだかうまくいってない風・・・・。謎です。。。。。
これについてはまた何かわかったら書きます。