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
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
280
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
140
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.9k
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
260
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.7k
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
310
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
140
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
280
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
470
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
130
What’s new in Android development tools
yanzm
0
310
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
BBQ
matthewcrist
89
9.7k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
GraphQLとの向き合い方2022年版
quramy
49
14k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Fireside Chat
paigeccino
37
3.5k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Practical Orchestrator
shlominoach
189
11k
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 !