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.4k
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
書く・即・DONEな仕組みをNuxtで作る
448jp
0
170
神速でワイヤーフレームを作るためのライブラリ
448jp
1
650
Figmaで神速ドキュメント作成術
448jp
3
1.3k
今から始めるFigma超入門
448jp
0
1.3k
零細Web制作会社のリモートワーク事情
448jp
0
260
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
570
コーディングを神速化するJetBrains IDEのご紹介~基本機能からHTML/CSSまで~
448jp
0
190
Lottieで始めるWebアニメーション入門
448jp
1
400
Figmaが支えるVue Fes Japanのデザイン
448jp
3
5k
Other Decks in Technology
See All in Technology
Getting started with controlling LEGO using Swift
hcrane
0
120
期待しすぎずに取り組む両面 TypeScript
shozawa
2
280
暗黙知を集積するプラットフォーム : 「健常者エミュレータ事例集」の取り組み
sora32127
1
160
関数型DDDの理論と実践:「決定を遅らせる」を先につくり、 ビジネスの機動力と価値をあげる
knih
2
150
ビジネスとコード品質の接合点 そしてコード品質がそこに及ぼす影響 / The Intersections of Business and Engineering, and The Impact of Code Quality There
mtx2s
10
1k
事業部を超えた 開発生産性向上に挑戦する
kentakozuka
5
930
大規模データとの戦い方
knih
1
150
TCA入門したてなので、自分が馴染みのある実装と比較しながらキャッチアップしてみる
fumiyasac0921
1
370
匠MethodとRDRAとICONIXとDDDで実現する一気通貫オブジェクト指向開発
haru860
4
1.5k
2023 Japan AWS Jr.Championsに選出されての振り返りとこれから
hiropy877
1
130
プッシュ型子育てサービスを、先行プロジェクト実施自治体において開始します
govtechtokyo
0
220
統計的学習理論読み Chapter 1
kmatsui
3
520
Featured
See All Featured
Scaling GitHub
holman
456
140k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Agile that works and the tools we love
rasmusluckow
323
20k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
Git: the NoSQL Database
bkeepers
PRO
421
63k
The Cult of Friendly URLs
andyhume
72
5.6k
For a Future-Friendly Web
brad_frost
170
8.9k
Producing Creativity
orderedlist
PRO
335
39k
Visualization
eitanlees
135
14k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
Infographics Made Easy
chrislema
237
18k
A Philosophy of Restraint
colly
195
15k
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 !