読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Lightning Design Systemとcss-customizer

Lightning Design SystemをVisualforce開発で利用する際にプレフィックスを追加したい場合があるかもしれません。


そんなときに便利なcss-customizerというサイトが公開されています。

f:id:tyoshikawa1106:20160628183534p:plain

Tools - Lightning Design System


追加したいプレフィックス名を指定してGenerate & Downloadsボタンをクリックします。
f:id:tyoshikawa1106:20160628183733p:plain



するとLightning Design Systemのファイル一式がダウンロードできます。
f:id:tyoshikawa1106:20160628183912p:plain


ダウンロードしたSLDSのバージョンは最新バージョンとなっていました。
f:id:tyoshikawa1106:20160628184132p:plain


assetsフォルダ内のsalesforce-lightning-design-system-vf.cssファイルを確認すると指定したプレフィックスが追加されていることを確認できます。
f:id:tyoshikawa1106:20160628184227p:plain


さて、SLDSにはVisualforce開発用とスタンドアロンアプリ開発用の二種類が用意されています。スタンドアロン用の方は『salesforce-lightning-design-system.css』というファイルを利用します。こちらを確認したところプレフィックスは追加されていないみたいでした。
f:id:tyoshikawa1106:20160628184433p:plain


そのことについての説明と思われる記載がありました。

Note: The download includes scoped files for both the Visualforce and Lightning Components environments. If your component will be included in both, use the Visualforce version of the scoped file.


css-customizerをつかったSLDSへのプレフィックス追加はこんな感じで利用できるみたいです。


ちなみにこのcss-customizerですが、TrailheaDXのセッション動画で紹介されていました。
f:id:tyoshikawa1106:20160628174727j:plain

関連記事