Submit Search
Upload
SCSS + COMPASS 入門
•
5 likes
•
1,857 views
N
NOAN
Follow
姫路IT系勉強会で発表した内容です。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 32
Download now
Download to read offline
Recommended
2011年7月 第9回JAWS-UG Cloudworksアップデート
2011年7月 第9回JAWS-UG Cloudworksアップデート
Serverworks Co.,Ltd.
ログ解析をあきらめない、あるいはSumoLogicの紹介
ログ解析をあきらめない、あるいはSumoLogicの紹介
Yasuhiro Araki, Ph.D
AWS Lambda を使ってみた話 at づや会Vol.3
AWS Lambda を使ってみた話 at づや会Vol.3
ko ty
速習 AWS Lambda
速習 AWS Lambda
Masayuki Uchida
JAWS-UG Okinawa 2017/01
JAWS-UG Okinawa 2017/01
司 知花
今年リリースされたAWSサービスどれぐらい知ってますか?年末振り返り会
今年リリースされたAWSサービスどれぐらい知ってますか?年末振り返り会
Aya Komuro
第2回関西ゼロから始めるR言語勉強会
第2回関西ゼロから始めるR言語勉強会
Iida Keisuke
Cloud automator的なものを実装してみる
Cloud automator的なものを実装してみる
saku hatsu
Recommended
2011年7月 第9回JAWS-UG Cloudworksアップデート
2011年7月 第9回JAWS-UG Cloudworksアップデート
Serverworks Co.,Ltd.
ログ解析をあきらめない、あるいはSumoLogicの紹介
ログ解析をあきらめない、あるいはSumoLogicの紹介
Yasuhiro Araki, Ph.D
AWS Lambda を使ってみた話 at づや会Vol.3
AWS Lambda を使ってみた話 at づや会Vol.3
ko ty
速習 AWS Lambda
速習 AWS Lambda
Masayuki Uchida
JAWS-UG Okinawa 2017/01
JAWS-UG Okinawa 2017/01
司 知花
今年リリースされたAWSサービスどれぐらい知ってますか?年末振り返り会
今年リリースされたAWSサービスどれぐらい知ってますか?年末振り返り会
Aya Komuro
第2回関西ゼロから始めるR言語勉強会
第2回関西ゼロから始めるR言語勉強会
Iida Keisuke
Cloud automator的なものを実装してみる
Cloud automator的なものを実装してみる
saku hatsu
AWS re:Invent レポート:AWS使いがいますぐすべき3つのこと
AWS re:Invent レポート:AWS使いがいますぐすべき3つのこと
真吾 吉田
Lambdaによるクラウド型言語の実装
Lambdaによるクラウド型言語の実装
Sugawara Genki
初めてのAWS Lambdaによるプロダクト開発譚〜オブラブカレンダー配布会2019
初めてのAWS Lambdaによるプロダクト開発譚〜オブラブカレンダー配布会2019
Eiji Matsumoto
Stream processing using alpakka cloud pub sub connector
Stream processing using alpakka cloud pub sub connector
Masaki Toyoshima
綱渡りなEc2運用でコスト削減
綱渡りなEc2運用でコスト削減
Tomoyuki Tochihira
Jaws days 2015 LT 「サーバー消してみた。」
Jaws days 2015 LT 「サーバー消してみた。」
Tomoharu Ito
DynamoDBのまえにキャッシュおく奴
DynamoDBのまえにキャッシュおく奴
Sugawara Genki
心理学 入門
心理学 入門
NOAN
PENAWARAN PEMBUATAN KUBAH MASJID
PENAWARAN PEMBUATAN KUBAH MASJID
Candrameda Al Ghozali
正規表現 入門
正規表現 入門
NOAN
HTML5 入門
HTML5 入門
NOAN
Hype vs. Reality: The AI Explainer
Hype vs. Reality: The AI Explainer
Luminary Labs
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving Cars
LinkedIn
イマドキのコーダー環境構築2016
イマドキのコーダー環境構築2016
Sou Lab
Sass(SCSS)について
Sass(SCSS)について
Kazufumi Miyamoto
Sass/Compass講習会
Sass/Compass講習会
Beeworks
First sass
First sass
Toshiaki Sasaki
Less - first step
Less - first step
Kohki Nakashima
compassで簡単! CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
Kazuya Hiruma
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Yoshinori Kobayashi
gulp-sprockets、あるいはRailsのAssetsのビルドについて
gulp-sprockets、あるいはRailsのAssetsのビルドについて
yo_waka
実践Sass 前編
実践Sass 前編
Azusa Tomita
More Related Content
What's hot
AWS re:Invent レポート:AWS使いがいますぐすべき3つのこと
AWS re:Invent レポート:AWS使いがいますぐすべき3つのこと
真吾 吉田
Lambdaによるクラウド型言語の実装
Lambdaによるクラウド型言語の実装
Sugawara Genki
初めてのAWS Lambdaによるプロダクト開発譚〜オブラブカレンダー配布会2019
初めてのAWS Lambdaによるプロダクト開発譚〜オブラブカレンダー配布会2019
Eiji Matsumoto
Stream processing using alpakka cloud pub sub connector
Stream processing using alpakka cloud pub sub connector
Masaki Toyoshima
綱渡りなEc2運用でコスト削減
綱渡りなEc2運用でコスト削減
Tomoyuki Tochihira
Jaws days 2015 LT 「サーバー消してみた。」
Jaws days 2015 LT 「サーバー消してみた。」
Tomoharu Ito
DynamoDBのまえにキャッシュおく奴
DynamoDBのまえにキャッシュおく奴
Sugawara Genki
What's hot
(7)
AWS re:Invent レポート:AWS使いがいますぐすべき3つのこと
AWS re:Invent レポート:AWS使いがいますぐすべき3つのこと
Lambdaによるクラウド型言語の実装
Lambdaによるクラウド型言語の実装
初めてのAWS Lambdaによるプロダクト開発譚〜オブラブカレンダー配布会2019
初めてのAWS Lambdaによるプロダクト開発譚〜オブラブカレンダー配布会2019
Stream processing using alpakka cloud pub sub connector
Stream processing using alpakka cloud pub sub connector
綱渡りなEc2運用でコスト削減
綱渡りなEc2運用でコスト削減
Jaws days 2015 LT 「サーバー消してみた。」
Jaws days 2015 LT 「サーバー消してみた。」
DynamoDBのまえにキャッシュおく奴
DynamoDBのまえにキャッシュおく奴
Viewers also liked
心理学 入門
心理学 入門
NOAN
PENAWARAN PEMBUATAN KUBAH MASJID
PENAWARAN PEMBUATAN KUBAH MASJID
Candrameda Al Ghozali
正規表現 入門
正規表現 入門
NOAN
HTML5 入門
HTML5 入門
NOAN
Hype vs. Reality: The AI Explainer
Hype vs. Reality: The AI Explainer
Luminary Labs
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving Cars
LinkedIn
Viewers also liked
(6)
心理学 入門
心理学 入門
PENAWARAN PEMBUATAN KUBAH MASJID
PENAWARAN PEMBUATAN KUBAH MASJID
正規表現 入門
正規表現 入門
HTML5 入門
HTML5 入門
Hype vs. Reality: The AI Explainer
Hype vs. Reality: The AI Explainer
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving Cars
Similar to SCSS + COMPASS 入門
イマドキのコーダー環境構築2016
イマドキのコーダー環境構築2016
Sou Lab
Sass(SCSS)について
Sass(SCSS)について
Kazufumi Miyamoto
Sass/Compass講習会
Sass/Compass講習会
Beeworks
First sass
First sass
Toshiaki Sasaki
Less - first step
Less - first step
Kohki Nakashima
compassで簡単! CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
Kazuya Hiruma
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Yoshinori Kobayashi
gulp-sprockets、あるいはRailsのAssetsのビルドについて
gulp-sprockets、あるいはRailsのAssetsのビルドについて
yo_waka
実践Sass 前編
実践Sass 前編
Azusa Tomita
WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門 先生:石本 光司
schoowebcampus
WebデザイナーのためのSass/Compass入門
WebデザイナーのためのSass/Compass入門
Koji Ishimoto
Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>
Horiguchi Seito
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
Toshimichi Suekane
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会
Yuji Nojima
Sass/Compassの導入と環境構築
Sass/Compassの導入と環境構築
Sou Lab
Sassを使ってみよう
Sassを使ってみよう
GIG inc.
Spark Streaming + Amazon Kinesis
Spark Streaming + Amazon Kinesis
Yuta Imai
ネストを覚えた人のためのSassの便利な使い方
ネストを覚えた人のためのSassの便利な使い方
Hiroki Shibata
Sass
Sass
Su Ga
Css拡張言語のコトハジメ
Css拡張言語のコトハジメ
regret raym
Similar to SCSS + COMPASS 入門
(20)
イマドキのコーダー環境構築2016
イマドキのコーダー環境構築2016
Sass(SCSS)について
Sass(SCSS)について
Sass/Compass講習会
Sass/Compass講習会
First sass
First sass
Less - first step
Less - first step
compassで簡単! CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
gulp-sprockets、あるいはRailsのAssetsのビルドについて
gulp-sprockets、あるいはRailsのAssetsのビルドについて
実践Sass 前編
実践Sass 前編
WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門
WebデザイナーのためのSass/Compass入門
Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会
Sass/Compassの導入と環境構築
Sass/Compassの導入と環境構築
Sassを使ってみよう
Sassを使ってみよう
Spark Streaming + Amazon Kinesis
Spark Streaming + Amazon Kinesis
ネストを覚えた人のためのSassの便利な使い方
ネストを覚えた人のためのSassの便利な使い方
Sass
Sass
Css拡張言語のコトハジメ
Css拡張言語のコトハジメ
Recently uploaded
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
Recently uploaded
(10)
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
SCSS + COMPASS 入門
1.
SCSS + COMPASS 入門 2013.5.18
@姫路IT系勉強会vol. 17 @spark6251 (N@N)
2.
自己紹介 • N@N(@spark6251) • N@N→NOaN→NOAN→ノアン •
明石高専 電気情報工学科四年生 • プログラミングあんまりしてない • たぶんWeb屋 進行中のお仕事 • 明石高専
3.
内容 • SCSSの概要 • SCSSの文法 •
SCSS + COMPASS • COMPASSのコマンド • まとめ
4.
1. SCSSの概要 • CSSをHamlの文法で拡張したのがSass •
SassをCSSの文法で記述したのがSCSS 参考:Hamlの文法 !!! %html %head %title Haml %body
5.
SCSS • SCSSはRubyで実装されている • 変数・関数・ループ・条件分岐が使える •
COMPASSで.scssの監視ができる • Ruby 1.8.7以上
6.
Rubyのインストール $ sudo apt-get
install libssl-dev zlib1g- dev libreadline6-dev $ wget ftp://ftp.ruby- lang.org/pub/ruby/ruby-2.0- stable.tar.gz $ tar xfvz ruby-2.0-stable.tar.gz $ cd ruby-2.0.0-p0 $ ./configure $ make $ sudo make install
7.
インストール $ sudo gem
update ––system $ sudo gem install sass $ sudo gem install compass
8.
インストール $ sudo gem
update ––system $ sudo gem install sass $ sudo gem install compass WindowsでRubyのインストールができなかった のでDebianとかで考えてます[てきとう]
9.
2. SCSSの文法 SCSSつおい
10.
ネスト ul { hoge li {fuga} >
ul {piyo} } ul {hoge} ul li {fuga} ul > ul {piyo}
11.
参照 a { hoge &:hover {fuga} &.Class
{piyo} } a {hoge} a:hover {fuga} a.Class {piyo}
12.
変数 $main-color: #ABCDEF; $list-font-size: 18px; $a:
1; $d: 1px black solid; border: $d; => border: 1px black solid;
13.
演算 $a: 6px; $b: 7; $c:
3px; $a – 5 => 1px $a – 5px => 1px $a – 5em => error $a / $b => 0.85714px $a / $c => 2
14.
挿入 $a: top; border-#{$a}: 1px
black solid; => border-top: 1px black solid; #{}でくくらないとエラー $b: 15px; $c: 3px; font-size: #{$b} / #{$c}; => Font-size: 15px / 3px; セレクタ、プロパティで使うときは#{}でくくる
15.
関数 @mixin f {hoge} a
{ @include f; } a {hoge}
16.
引数 @mixin f($a: 10px)
{ width: $a; } ul { @include f; } li { @include f(5px); } ul { width: 10px; } li { width: 5px; }
17.
for文 @for $i from
1 through 3 { .item-#{$i} { width: 2em * $i; } } .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }
18.
if文 $a: red; p { @if
true {hoge} @if false {fuga} @if null {piyo} @if $a == red {foo} } 使うのかなこれ p { hoge foo }
19.
3. SCSS +
COMPASS • COMPASSつおい • .scssを監視して自動でコンパイルしよう • COMPASSの機能を使おう
20.
使い方 $ compass create $
compass watch compass createでCOMPASSが使えるように compass watchで保存される度自動でcssファイ ルを生成
21.
設定を変えよう 自動でconfig.rbが生成される いじって使いやすいようにしよう
22.
config.rb http_path = "/" css_dir
= "stylesheets" sass_dir = "sass" images_dir = "images" javascripts_dir = "javascripts"
23.
config.rb改変1 http_path = "/" css_dir
= "css" sass_dir = "css" images_dir = "img" javascripts_dir = "js" という一例 まあCSSとSCSSのファイルは分けたほうが削除 するときとか楽
24.
config.rb改変2 # output_style =
:expanded or ... 出力ファイルの形式 :expanded そのまま :nested ネストする :compact セレクタと属性を一行に :compressed 圧縮
25.
config.rb改変3 # relative_assets =
true trueなら相対パス falseなら絶対パス
26.
config.rb改変4 # line_comments =
false falseなら /* line n, style.scss */ というコメントが付かない
27.
リリース用とかに? $ compass compile
-e production config.rb output_style = (environment == :production) ? :compressed : :expanded -e productionをつければ圧縮、付けなければそ のままに
28.
@import "COMPASS"; @import "COMPASS"; COMPASSのすべての機能が使える 公式サイトで内部実装が見れる 参考:Compass
Reference
29.
border-radius .Class { @include border-radius; } #Id
{ @include border-radius(2px); } • $default-border-radius を変更すればデフォルトの 値が変更できる • 自動でベンダープレフィク スを追加 • 他はリファレンス見てね☆ .Class { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; } #Id { -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px; }
30.
4. COMPASSのコマンド * =
compassとする ただの$ compass --helpの日本語化 * create - 新規COMPASSプロジェクト * watch - .scssの監視 * clean - キャッシュ等の削除 普通に使うならこれだけで間に合う 他はhelpからの抜粋だったり内部実装を見るため だったり
31.
5. まとめ SCSS +
COMPASSで 楽しく、楽なCSS製作を!
32.
御清聴ありがとうございました
Download now