Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Sass実践編+Compass入門
Search
448jp | OKI Yoshiya
April 08, 2014
Technology
0
2.7k
Sass実践編+Compass入門
DIST.2「Sass Again」発表資料
448jp | OKI Yoshiya
April 08, 2014
Tweet
Share
More Decks by 448jp | OKI Yoshiya
See All by 448jp | OKI Yoshiya
人はなぜコミュニティとつながると幸せを感じるのか
448jp
3
290
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.7k
合意形成のためのFigma活用術
448jp
0
120
書く・即・DONEな仕組みをNuxtで作る
448jp
0
380
神速でワイヤーフレームを作るためのライブラリ
448jp
1
860
Figmaで神速ドキュメント作成術
448jp
3
2.4k
今から始めるFigma超入門
448jp
0
1.6k
零細Web制作会社のリモートワーク事情
448jp
0
420
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
750
Other Decks in Technology
See All in Technology
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
130
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
110
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
130
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
190
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
260
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
340
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
360
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
160
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
Featured
See All Featured
Fireside Chat
paigeccino
37
3.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Faster Mobile Websites
deanohume
307
31k
BBQ
matthewcrist
89
9.7k
KATA
mclloyd
30
14k
GitHub's CSS Performance
jonrohan
1031
460k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Writing Fast Ruby
sferik
628
62k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Transcript
Sass実践編+Compass入門 沖 良矢(世路庵) 2014.4.4 (Fri) DIST.2「Sass Again」
自己紹介 沖 良矢 / OKI Yoshiya @448jp インタラクションデザイナー DAIHATSU The
43rd TMS (2013) Web Designing (2009~) UNIQLO HAPPY GIFT (2013)
お品書き Compass入門 Compassとは何か インストール プロジェクトの作成とコンパイル CSSスプライトの生成
Sass実践編 パーシャル ソースマップを使ったデバッグ ミックスイン/ 継承/ 関数のコツ
Compass入門 Chapter.1 | Hello, Compass
Compassとは何か What's Compass ?
Compass is an open-source CSS Authoring Framework. http://compass-style.org/
Compassは、オープンソースの CSSオーサリングフレームワー クです。 http://compass-style.org/
Sassを使ったCSSフレームワーク オープンソース MITライセンス Compass【コンパス】
Sassのミックスインとユーティリティ アプリケーション環境との統合用システム 拡張機能のプラットフォーム Compassを構成する3つの要素
コマンドプロンプト(Windows)またはターミナル (Mac)で以下のコマンドを実行 「gem install compass」 要Ruby インストール
プロジェクトの作成(作成したい場所で実行) 「compass create」 コンパイル(Compassプロジェクトの場所で実行) 「compass compile」 プロジェクトの作成とコンパイル
Windowsで、インストール時やコンパイル時に 「permission denied」などのエラーが出る場合がある SassとCompassのバージョンの組み合わせや、正常に アンインストールができていないことが原因 参考: http://stackoverflow.com/questions/22597223/errnoeacc ess-permission-denied-running-compass-watch Windowsでエラーが出る場合
1. 以下のコマンドでアンインストール 「gem uninstall compass gem uninstall sass」 2. 以下のフォルダ内にあるファイルをすべて手動で削除
「C:¥Users¥ユーザー名¥.gem」 3. 以下のコマンドでバージョンを指定してインストール 「gem install sass -v 3.2.10」 「gem install compass –v 0.12.2」 Windowsでエラーが出る場合 – 解消手順
デモ Demo (my-first-compass)
Compassに含まれるコア機能 CSS3 Helpers Layout Reset Typography Utilities
CSSスプライトの作成に必要な機能のimport 「@import "compass/utilities/sprites";」 スプライト化するフォルダを指定 「@import "フォルダ名/*.png"」 フォルダ内のすべての画像をスプライト化 「@include all-フォルダ名-sprites」 CSSスプライトの作成
任意のクラスでbackground-positionを指定 「@include フォルダ名-sprite(画像ファイル名);」 すべての画像で幅と高さを取得 「$フォルダ名-sprite-dimensions: true; 」 CSSスプライトの作成
デモ Demo (css-sprite)
まとめ Compassは、Sassを使ったCSSフレームワーク CSSスプライトの自動生成は超絶 ちょっとしたミックスインを使いたいだけなら Bourbonもお勧め
Sass実践編 Chapter.2 | Practice for Sass
CSSファイルを生成したくないSassファイルは、ファイ ル名の頭に_(アンダースコア)を入れる この機能を「パーシャル」と呼ぶ 変数などを機能別にSassファイルで分けて、出力する CSSファイルは1つだけにまとめられる パーシャル
以下のオプションを付けてコンパイルすることでソー スマップファイルを出力できる 「sass --sourcemap screen.scss:screen.css」 ソースマップはSass 3.3.0からの機能 Google Chromeではデベロッパーツールから該当の要 素についてSassファイルベースでデバッグできる
ソースマップによるデバッグ
ミックスイン / 継承 / 関数のコツ 引数を使う 値は複数 @extend @function @mixin
YES YES NO NO
Thank you !