1. HOME
  2. セミナー
  3. 公開アップルップル社内勉強会 Vol.30に参加しました

公開アップルップル社内勉強会 Vol.30に参加しました

セミナー

公開アップルップル社内勉強会 Vol.30に参加してきました。久しぶりの参加です。 今回の勉強会では堀さんの「gulp 環境構築」から始まり森田さんの「Sass ハンズオン」で終わりました。 THE フロントエンドという感じの勉強会でした。わたしも以前gulpを導入した際に導入方法Sassの使い方について書いていましたが、まだまだ詳しくは知らないのと最近全然使っていなかったのでとてもありがたかったです。

gulp 環境構築

ターミナルを使ってグローバルとローカルにgulpをインストールしました。 グローバルはどこで行ってもいいようですが、ローカルの場合はcdでインストールしたい場所に移動してからインストールしないのいけないようです。 アップルップルさんではプロジェクトごとにフォルダを分けてそこにgulpをインストールしているそうです。

他にも必要な「gulpfile.js」や「package.json」の記述についても教わりました。

Sass ハンズオン

実際に自分でSassを記述しながらのハンズオンでした。(とてもわかりやすくて助かりました。) コンパイルされるファイルとされないファイルや、ネストの記述方法について実際に手を動かしながら勉強をしました。

コンパイル

アンダーバーを最初につけた.scssファイルはコンパイルされず、つけていない.scssファイルは.cssにコンパイルされます。


パーツやセクションごとなどに.scssファイルに分けて、大元のstyle.scssなどにインポートするようにするとコンパイルされるのは1つだけですが、パーツごとに分けることによって管理が楽になるのでいいそうです。 またCSSのインポートとは違いSassのインポートでは読み込みが遅くなる心配もないそうです。

ネスト

Sassでは親要素の中に入れ子にして書くことができます。 子要素などの場合はそのまま親要素の中に入れ子にして記述しますが、擬似クラス・擬似要素や属性セレクタなどでは「&」をつけて記述する。

子要素

Sass

.list-item{
    border-left: 1px solid #ccc;

    a{ 
        color: lime;
    }
}

コンパイル後(CSS)

.list-item {
	border-left: 1px solid #CCC;
}
.list-item a {
	color: lime;
}

擬似要素など

Sass

.list-item{
    border-left: 1px solid #ccc;

    &:last-child{
        border: none;
    }
}

コンパイル後(CSS)

.list-item {
	border-left: 1px solid #CCC;
}
.list-item:last-child {
	border: none;
}

その他

他にも@importや$icon-widthなどの変数化などをしました。

あとがき

Sassについてはまたもっと勉強してから新しくブログとかにまとめたいなと思います。 今作業してるサイトにgulpとSassを導入したらとても楽になったのでこれからもっと活用していきたいです〜。 その時に共通部分をphpで管理したり、.htmlでphpを使えるようにしたりしたのでそれもまたブログにまとめたいと思います。


appleple
Sass
gulp

この記事を読んだ方におすすめ