yumi
名前：mimi (yumi)
昔々MovableTypeに感動してCSS、PHP、JavaScriptの沼へ。
デザインもDTPとかイラストもやりますが、たぶん、世間的にはフロントエンドエンジニアです。
WordPress歴10年余。
今日話すこと
WordPressのカスタマイズ
ページにある機能です。
コレ
ココまで触ったことの無い方はそんなのあるんだー、ぐらいで聞いてください。
CSSの意味もいろはも
全部ググればわかります。
なので今日は
どこをどういじればいいか教えてくれる
ディベロッパーツール
を理解しましょう。
問題は何をいじればいいか
分からない、ということです。
Google Chromeに標準搭載されている開発者向けのツールです。
（SafariやFirefoxやIEにもあります）
実践あるのみ。
/* ここにコメント書きます */ .mystyle { font-size: x-small; } /* commentクラスを追加 */ .mystyle .comment { color: red; } /* =========== こんな風に目立たせてもOK =========== */
CSSに慣れてきたら
ul { margin: 0; } ul li{ margin: 10px; } ul li a{ color: #ccc; }
ulを3回、liを2回。
「Syntactically Awesome Stylesheets」の略で、直訳すれば「構造的にイケてるスタイルシート」
ul { margin: 0; li { margin: 10px; a { color: #333; } } }
Sass
Sassを使うことでコード量を大幅に減らすことができます。 結果的に開発スピードが上がり、生産性を上げることが可能です。
コード量が減り、ネスト構造や関数を使ってコードをより見やすく書くことができるので、保守性やメンテナンス性が高まりリファクタリングがしやすくなります。
コード量が減り、コードの見通しが良くなると、バグを早期に発見できたり、そもそものバグの量を減らしたりことができます。
※ Sass以外にもPostCSSとか色々あります。
ここでは、
sassをcssに変換してくれるツール
と思ってください。
いわゆる
のひとつ。
タスクランナーとは
Webサイト構築に必要な処理をタスクとして自動化してくれるプログラム
まずはターミナルでnpm-scriptsを起動させます。
yumi at mbp1 in ~/Documents/test/dev $ npm run watch
Sassでゴリゴリ
書いていきます。
.m-button { border:1px solid #eee; }
保存すれば、
プレフィックスも追加して
無駄な記述も省いた
美しいCSSが出力されます。
JSの文法チェックやら、
圧縮化やら、
マージやら、
自動化できることがありすぎて紹介しきれません。
が、Sassを導入するだけでも飛躍的に開発工数が減るのでぜひお早めにお試しください。
By mimitips
