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
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
3
350
Transformerを用いたアイテム間の 相互影響を考慮したレコメンドリスト生成
recruitengineers
PRO
2
440
Delegating the chores of authenticating users to Keycloak
ahus1
0
190
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1.3k
Autify Company Deck
autifyhq
2
44k
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
8
2.1k
Amplify Gen2から知るAWS CDK Toolkit Libraryの使い方/How to use the AWS CDK Toolkit Library as known from Amplify Gen2
fossamagna
1
350
三視点LLMによる複数観点レビュー
mhlyc
0
230
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
590
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
200
microCMSではじめるAIライティング
himaratsu
0
150
TLSから見るSREの未来
atpons
2
310
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
How STYLIGHT went responsive
nonsquared
100
5.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Writing Fast Ruby
sferik
628
62k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Producing Creativity
orderedlist
PRO
346
40k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Agile that works and the tools we love
rasmusluckow
329
21k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
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 !