日本語(ja) | English(en)
⇒ サイトに進む
- 本チュートリアルについて
- Sassの学習
- カスタマイズの方法
- Sassパーシャルのインポート
- Sass変数の操作
- Sassミックスインの利用
- グラデーションとシャドウ
この短いチュートリアルはBootstrap 4のスタイルをカスタマイズする方法についての解説です。Bootstrap CSSはSassで記述されており、拡張コードを書き加えることによりカスタマイズすることができます(通常Bootstrapのライブラリソースコードを書き換える必要はありません)。
このチュートリアルはpugで記述し、node.js上のnpmでビルドしています。ソースコードはGitHub、サイトはGitHub Pagesで公開しています。
BootstrapのカスタマイズにはSassの知識が必要ですが、BootstrapのソースコードはSassを学ぶための良い教材にもなります。コードを読みドキュメントを参照しながら自然にSassを学習することができます。
Sassは始めRubyで作られましたが、その後様々な環境や言語へ移植されています(Wikipediaを参照)。公式サイトが扱う実装もRuby、C++、Dartの3種類あります。
Sassの主要な公開ドキュメントは次の通りです。実装はたくさん種類がありますが言語仕様の詳しい解説はRuby版しかありません。ただし基本的な言語仕様に違いはないのでRuby版ドキュメントを読めば理解できます。
- Sassリファレンス (Ruby Sass用、文法と組み込み関数の詳しい解説はここのみ)
- 組み込み関数
- コマンドラインリファレンスは
sass --helpで確認すること(ドキュメントなし)
- libsass (C++実装)
- node-sass (libsassのnode.js用インターフェース、本チュートリアルで使用)
- Wikipedia: Sass