BrowserSyncとSassと私

@uehaso

上原 恵介 2008年：都内でWebデザイナーとして勤務。

2013年：広島に帰省。

2014年：バウハウスにフロント・エンジニア

として参加。

Web活用の提案

バウハウスでは

UI設計

デザイン HTML・CSS

Javascript CMS

Web活用の提案

上原担当

UI設計

デザイン HTML・CSS

Javascript CMS

目次

01 BrowserSync

02 Sass(SCSS)

03 まとめ

01BrowserSync

BrowserSyncとは

端末ごとのブラウザを同期

端末ごとのブラウザを同期？

実演

作業効率が超アップ！

• Node.jsで動くパッケージ • WindowsでもMacでも動く • その他のツールとも連携できる

02 Sass(SCSS)

そもそもSassって？

便利なCSS

CSSで面倒だと思ってたことが

ほぼ、解決できる！

Sass(SCSS)の使い方

Sass(SCSS)ファイル

変換

.sass

.scss .css

準備 出力

CSSファイル

変換

変換ツールについて

Koala Prepros

記法について

書き方は2種類！

Sass記法

.demo 　width: 100px 　text-align: center

.demo { 　width: 100px ; 　text-align: center ; }

SCSS記法

.demo { 　width: 100px; 　text-align: center; 　 h1 { 　　text-align: center; 　 } }

基本的な機能について

ミックスイン セレクタの継承

変数ネスト(入れ子)

ネスト(入れ子)

.demo { width: 100px; h1 { 　text-align: center; } }

.demo { 　width: 100px; } .demo h1 { 　text-align: center; }

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

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

変数

$default-font-color : red;

.demo { color: $default-font-color; h1 { color: $default-font-color; } }

.demo { 　color: red; } .demo h1 { 　color: red; }

ミックスイン

@mixin mp10 { 　margin: 10px; 　padding: 10px; }

.demo { 　@include mp10; 　color: red; }

.demo { 　margin: 10px; 　padding: 10px; 　color: red; }

セレクタの継承

.demo { 　color: red; 　text-align: center; } .demo-01 { 　@extend .demo; }

.demo, .demo-01 { 　color: red; 　text-align: center; }

.demo { 　　color: red; 　　text-align: center; } .demo-01 { 　　@extend .demo; 　　text-align: left; }

.demo, .demo-01 { 　　color: red; 　　text-align: center; } .demo-01 { 　　text-align: left; }

導入のポイントについて

CSSファイルは触らない

ネストが深くならないように

.demo { color: red; text-align: center; .demoBox { text-align: left; .demoTitle { font-size: 100px; .demoPic { text-align: center; } } } }

参考になった書籍

助かりました。

03 まとめ

• BrowserSyncって超便利！ • Sass(SCSS)をまだ使ってない人は一刻も早く導入しよう！

質疑応答

ご静聴ありがとうございました。