【読んだ】Web制作者のためのSassの教科書

Sass入門の定番本を読み返したので感想などをアレしました。

Sassは案件で使う機会があって導入して以来、すっかりその便利さにハマって、使える案件では基本的に使うようにしております。

本書は導入時からお世話になって、ちょこちょこ参照してたけど、もっかい全編を読みなおしてみたのでちょっとまとめを。

    難易度

    感想

    1回目読んだ時

    • 導入は上記の通り事前に済ませていたのでパス。
    • 基本的なSassの使い方(3章~4章)を中心に学習。超分かり易かったのですぐに基本はマスターできた。
    • 5章以降は読んだだけではすぐ活かせなかった。

    読み返した時

    • Sassの機能を全然使いこなせてなかったなー、と感じた。やはりこういうのは何回も読み返すべきですなー。
    • 3章~4章の基本的な使い方も、読み返す価値あった。使ってなくて損してた関数とかちょこちょこあった。
    • 5章以降の実践編は、ちょっとSassを使ってから改めて読むことでより参考になった。

    使ってなくて損してた系のこまごましたのは自分のためのメモとして下に列挙しましたが、そもそも今の自分のSassファイルにはextendやmixinで運用した方が便利になる部分が多くて、美しさに欠けるなという感じ。

    そしてCompassは、目玉機能のスプライトからこまごました関数に至るまで、全体的に機能を使えてなかったのでちゃんと学んでおこうと思いました。なおclearfixについては以下も参照しておくと幅が広がって幸せを感じる。

    Sass・Compass clearfixの使い分け

    使ってなくて損してたシリーズ

    親セレクタの参照

    こういうの↓

    SCSS
    #side {
    	width: 240px;
    	body.top & {
    		width: 300px;
    	}
    }

    こういうの↓は使っているけど、下のと違って上のは構造的にネストをさかのぼるので、一見美しくない気がしてスルーしてたが改めてみると運用面では便利かも。

    SCSS
    a {
    	text-decoration: none;
    	&:hover {
    		text-decoration: underline;
    	}
    }

    @extend 専用のプレースホルダーセレクタ

    %で始まるプレースホルダーセレクタはコンパイルされない。

    SCSS
    %boxBase {
    	padding: 15px;
    	border: 1px solid #999;
    }
    
    // プレースホルダーセレクタを継承
    .item {
    	@extend %boxBase;
    	margin-bottom: 20px;
    }

    rgba()関数

    rgbaで透過させたいときに色指定をHSLからRGBに直さなくてもそのままでいける

    SCSS
    body {
    	background: rgba(#6a5468, 0.3);
    }

    インターポレーションで変数に入れたパスを使う

    SCSS
    $IMG_PATH: '../common/images/';
    
    #main {
    	background: url(#{$IMG_PATH}main.png);
    }

    インターポレーションでcalcに変数を使う

    無敵を感じる

    SCSS
    $border: 1px;
    .item {
    	width: calc(100% - #{$border * 2});
    }

    今後のSassのこと

    GUIが長らく更新されていないよ問題

    Koalaの更新は約1年ないが、どうも他のGUIも似たような状態ぽい。

    これは気にしておくべきではないかと思っていて、現状自分もGUIに頼りきっている状態だけど、黒い画面からも普通に操作できるようにしといた方がよさげ。Sassのバージョンアップに対応できてなかったりとか。本書にも、コラムで「GUIだけでなく黒い画面も使えるようにしときなはれ(意訳)」と書いてある。もしくは下の資料にあるように、glupとかに切り替えていくか。使ったことないけど。

    最新の環境とか

    読み返すタイミングでこういうのも見つけた↓

    イマドキのコーダー環境構築2016

    これからちゃんと使おうと思ったCompassは終焉しているらしい。。。が、目下のところ使いそうなのでちゃんと覚えつつ、依存度の高いものは乗り換えた時にもスムーズに移行できるように取捨選択していく方向でいきたい。

    なお、上のスライドでも本書は紹介されていて、やはり必携の名著だなーと思った次第。

    • このエントリーをはてなブックマークに追加
    広告
    野良人 代表
    新免祥太
    1988年岡山生まれ。外食企業のWEB・EC担当を経験したのち、2013年12月より「野良人(のらんど)」の屋号で独立しWEBデザイン・プログラミングなどWEBサイト制作の工程全般を請け負っています。お気軽にご相談ください。
    <次の記事(2016/11/15)
    【jQuery】ローカルのCSVを取得・変換してCSVで出力する
    前の記事>(2016/10/31)
    「Misoca(ミソカ)」で通販サイトの請求書を一括作成・一括発行
    記事一覧