勉強会にあたって、下記の書籍を購入しました。
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がなんだかうまくいってない風・・・・。謎です。。。。。
これについてはまた何かわかったら書きます。