Soumettre la recherche
Mettre en ligne
Sassでちょっと楽しよう
•
1 j'aime
•
1,365 vues
Makoto Henmi
Suivre
第16回 岡山Ruby, Ruby on Rails勉強会での発表資料
Lire moins
Lire la suite
Logiciels
Signaler
Partager
Signaler
Partager
1 sur 39
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
はじめてのWordPress
はじめてのWordPress
Shoji Endo
LESS使ってますか?
LESS使ってますか?
じゅん なかざ
[コデアル株式会社] Ruby on rails 開発環境設定勉強会(株式会社シンクスマイル主催)
[コデアル株式会社] Ruby on rails 開発環境設定勉強会(株式会社シンクスマイル主催)
codeal
WordPressってこんなCMS
WordPressってこんなCMS
Kawakami Hiroko
いまいまMySQL@OSC2016長岡
いまいまMySQL@OSC2016長岡
sakaik
いまいまMySQL@OSC2016島根
いまいまMySQL@OSC2016島根
sakaik
mod_perlで動くアプリをどう置くか #hachiojipm
mod_perlで動くアプリをどう置くか #hachiojipm
鉄次 尾形
Cocoa勉強会関西 #55 MagicalRecordでCore Dataをシンプルにする
Cocoa勉強会関西 #55 MagicalRecordでCore Dataをシンプルにする
asakahara
Recommandé
はじめてのWordPress
はじめてのWordPress
Shoji Endo
LESS使ってますか?
LESS使ってますか?
じゅん なかざ
[コデアル株式会社] Ruby on rails 開発環境設定勉強会(株式会社シンクスマイル主催)
[コデアル株式会社] Ruby on rails 開発環境設定勉強会(株式会社シンクスマイル主催)
codeal
WordPressってこんなCMS
WordPressってこんなCMS
Kawakami Hiroko
いまいまMySQL@OSC2016長岡
いまいまMySQL@OSC2016長岡
sakaik
いまいまMySQL@OSC2016島根
いまいまMySQL@OSC2016島根
sakaik
mod_perlで動くアプリをどう置くか #hachiojipm
mod_perlで動くアプリをどう置くか #hachiojipm
鉄次 尾形
Cocoa勉強会関西 #55 MagicalRecordでCore Dataをシンプルにする
Cocoa勉強会関西 #55 MagicalRecordでCore Dataをシンプルにする
asakahara
やさしいSassり方
やさしいSassり方
祐磨 堀
WordCamp Kansai 2016 初心者向けこわくないWordPress日本語フォーラムの使い方
WordCamp Kansai 2016 初心者向けこわくないWordPress日本語フォーラムの使い方
Kei Nomura
20160416 jaws days 2016 re cap
20160416 jaws days 2016 re cap
Shinya Yamada
さくらのクラウドサービス概要資料2016年8月版
さくらのクラウドサービス概要資料2016年8月版
さくらインターネット株式会社
Sassを使った共同作業について
Sassを使った共同作業について
Kanako Urabe
今日はMongoDBの話はしない
今日はMongoDBの話はしない
Akihiro Kuwano
WP-APIを使ってみよう&No PHPテーマという考え方
WP-APIを使ってみよう&No PHPテーマという考え方
Hidetaka Okamoto
Nginx+WordPress+AWS - NginxでWordPressを構築してみよう!
Nginx+WordPress+AWS - NginxでWordPressを構築してみよう!
Kiminori Yokoi
gulp-sprockets、あるいはRailsのAssetsのビルドについて
gulp-sprockets、あるいはRailsのAssetsのビルドについて
yo_waka
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Yoshinori Kobayashi
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
lyca chigyo
Sass/Compass講習会
Sass/Compass講習会
Beeworks
Sass less
Sass less
Net Kanayan
イマドキのコーダー環境構築2016
イマドキのコーダー環境構築2016
Sou Lab
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
優也 田島
Gumi study#15 Sass構造化
Gumi study#15 Sass構造化
Haraguchi Go
Sass 超入門
Sass 超入門
Michinari Odajima
Sassをはじめよう!
Sassをはじめよう!
Yoshiya OKI
C#とRubyをつなぐ
C#とRubyをつなぐ
107steps
Sass Hello World
Sass Hello World
Kazuma Kimura
compassで簡単! CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
Kazuya Hiruma
LESS楽しいれす(^q^)
LESS楽しいれす(^q^)
taiju higashi
Contenu connexe
Tendances
やさしいSassり方
やさしいSassり方
祐磨 堀
WordCamp Kansai 2016 初心者向けこわくないWordPress日本語フォーラムの使い方
WordCamp Kansai 2016 初心者向けこわくないWordPress日本語フォーラムの使い方
Kei Nomura
20160416 jaws days 2016 re cap
20160416 jaws days 2016 re cap
Shinya Yamada
さくらのクラウドサービス概要資料2016年8月版
さくらのクラウドサービス概要資料2016年8月版
さくらインターネット株式会社
Sassを使った共同作業について
Sassを使った共同作業について
Kanako Urabe
今日はMongoDBの話はしない
今日はMongoDBの話はしない
Akihiro Kuwano
WP-APIを使ってみよう&No PHPテーマという考え方
WP-APIを使ってみよう&No PHPテーマという考え方
Hidetaka Okamoto
Nginx+WordPress+AWS - NginxでWordPressを構築してみよう!
Nginx+WordPress+AWS - NginxでWordPressを構築してみよう!
Kiminori Yokoi
Tendances
(8)
やさしいSassり方
やさしいSassり方
WordCamp Kansai 2016 初心者向けこわくないWordPress日本語フォーラムの使い方
WordCamp Kansai 2016 初心者向けこわくないWordPress日本語フォーラムの使い方
20160416 jaws days 2016 re cap
20160416 jaws days 2016 re cap
さくらのクラウドサービス概要資料2016年8月版
さくらのクラウドサービス概要資料2016年8月版
Sassを使った共同作業について
Sassを使った共同作業について
今日はMongoDBの話はしない
今日はMongoDBの話はしない
WP-APIを使ってみよう&No PHPテーマという考え方
WP-APIを使ってみよう&No PHPテーマという考え方
Nginx+WordPress+AWS - NginxでWordPressを構築してみよう!
Nginx+WordPress+AWS - NginxでWordPressを構築してみよう!
Similaire à Sassでちょっと楽しよう
gulp-sprockets、あるいはRailsのAssetsのビルドについて
gulp-sprockets、あるいはRailsのAssetsのビルドについて
yo_waka
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Yoshinori Kobayashi
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
lyca chigyo
Sass/Compass講習会
Sass/Compass講習会
Beeworks
Sass less
Sass less
Net Kanayan
イマドキのコーダー環境構築2016
イマドキのコーダー環境構築2016
Sou Lab
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
優也 田島
Gumi study#15 Sass構造化
Gumi study#15 Sass構造化
Haraguchi Go
Sass 超入門
Sass 超入門
Michinari Odajima
Sassをはじめよう!
Sassをはじめよう!
Yoshiya OKI
C#とRubyをつなぐ
C#とRubyをつなぐ
107steps
Sass Hello World
Sass Hello World
Kazuma Kimura
compassで簡単! CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
Kazuya Hiruma
LESS楽しいれす(^q^)
LESS楽しいれす(^q^)
taiju higashi
Sass実践編+Compass入門
Sass実践編+Compass入門
Yoshiya OKI
Sales Force Episode VI ~ Return of Ajax Toolkit ~
Sales Force Episode VI ~ Return of Ajax Toolkit ~
Shinichi Tomita
Front end develop environment
Front end develop environment
Ryuto Yasugi
Gemの話 紹介編
Gemの話 紹介編
Satomi Tsujita
SalesforceでのモダンSPA開発(Mashmatrix ”Sheet"の場合)
SalesforceでのモダンSPA開発(Mashmatrix ”Sheet"の場合)
Shinichi Tomita
Railsエンジニアが サーバーレスアーキテクチャに 手を出したよ - 川崎Ruby会議01
Railsエンジニアが サーバーレスアーキテクチャに 手を出したよ - 川崎Ruby会議01
Yuta Shimizu
Similaire à Sassでちょっと楽しよう
(20)
gulp-sprockets、あるいはRailsのAssetsのビルドについて
gulp-sprockets、あるいはRailsのAssetsのビルドについて
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
Sass/Compass講習会
Sass/Compass講習会
Sass less
Sass less
イマドキのコーダー環境構築2016
イマドキのコーダー環境構築2016
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
Gumi study#15 Sass構造化
Gumi study#15 Sass構造化
Sass 超入門
Sass 超入門
Sassをはじめよう!
Sassをはじめよう!
C#とRubyをつなぐ
C#とRubyをつなぐ
Sass Hello World
Sass Hello World
compassで簡単! CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
LESS楽しいれす(^q^)
LESS楽しいれす(^q^)
Sass実践編+Compass入門
Sass実践編+Compass入門
Sales Force Episode VI ~ Return of Ajax Toolkit ~
Sales Force Episode VI ~ Return of Ajax Toolkit ~
Front end develop environment
Front end develop environment
Gemの話 紹介編
Gemの話 紹介編
SalesforceでのモダンSPA開発(Mashmatrix ”Sheet"の場合)
SalesforceでのモダンSPA開発(Mashmatrix ”Sheet"の場合)
Railsエンジニアが サーバーレスアーキテクチャに 手を出したよ - 川崎Ruby会議01
Railsエンジニアが サーバーレスアーキテクチャに 手を出したよ - 川崎Ruby会議01
Plus de Makoto Henmi
若者が勉強会に参加しない問題
若者が勉強会に参加しない問題
Makoto Henmi
開発フローを改善した時の昔話
開発フローを改善した時の昔話
Makoto Henmi
Joinsが使えなかった話
Joinsが使えなかった話
Makoto Henmi
RailsでKnockout.js
RailsでKnockout.js
Makoto Henmi
24時間コンテストに参加した話
24時間コンテストに参加した話
Makoto Henmi
紙と鉛筆で設計しよう
紙と鉛筆で設計しよう
Makoto Henmi
岡山のRuby勉強会(OSC広島2013)
岡山のRuby勉強会(OSC広島2013)
Makoto Henmi
Rhodes
Rhodes
Makoto Henmi
Plus de Makoto Henmi
(8)
若者が勉強会に参加しない問題
若者が勉強会に参加しない問題
開発フローを改善した時の昔話
開発フローを改善した時の昔話
Joinsが使えなかった話
Joinsが使えなかった話
RailsでKnockout.js
RailsでKnockout.js
24時間コンテストに参加した話
24時間コンテストに参加した話
紙と鉛筆で設計しよう
紙と鉛筆で設計しよう
岡山のRuby勉強会(OSC広島2013)
岡山のRuby勉強会(OSC広島2013)
Rhodes
Rhodes
Sassでちょっと楽しよう
1.
Sassでちょっと楽しよう 第16回 岡山Ruby, Ruby on
Rails勉強会 逸見 誠(@mako_wis)
2.
自己紹介 • 逸見 誠(へんみ
まこと) • Twitter:@mako_wis • 株式会社クレオフーガ • iPhoneアプリ開発担当マークアッパー(初心者) • Jave、C#、Objective-C、Ruby • 好きなGem:sass-rails
3.
最近のお仕事はマークアップ
4.
ひたすらhamlとSassの日々
5.
案外、楽しい
6.
なので今回のスライドには Ruby出てきません
7.
今日はSassの発表します
8.
Sass使ってますか?
9.
Sassとは? • CSS Preprocessorの中のひとつ •
CSSの弱い部分を補うためCSSをベースに機能 を拡張したもの • コンパイルをすることでCSSファイルに変換さ れる
10.
SASS?SCSS?
11.
SASS記法とSCSS記法 • SassにはSASS記法(拡張子を.sass)と SCSS記法(拡張子を.scss)の違いがある • 元々の記法→SASS記法 •
コーディングが簡略化 • CSSに近い記法→SCSS記法 • CSSの書き方そのままでも書ける
12.
SASS記法 h2 color: black .sub_title font-size: smaller color:
#808080 a font-size: smaller
13.
SCSS記法 h2 { color: black; .sub_title
{ font-size: smaller; color: #808080; } ! a { font-size: smaller; } }
14.
個人的にはSCSS記法推し
15.
最悪、CSS記法でかける!
16.
というわけで本題
17.
Sassでちょっと楽しましょう
18.
こんな悩みありませんか?
19.
同じクラス名等を何回も 書かないといけない // CSS p.title { color:#000; } ! p.title
span.sub_title { font-size: smaller; color: #808080; } ! p.title .hoge { ・・・ }
20.
そんな時はネスト
21.
ネストしたスタイル // SCSS p.title { color:#000; span.sub_title
{ font-size: smaller; color: #808080; } } ! // CSS p.title { color:#000; } ! p.title span.sub_title { font-size: smaller; color: #808080; }
22.
まだ悩みありませんか?
23.
同じカラーコードを 何回も書かないといけない ! // CSS h1 { font-size:
16px; color: #9B111E; border-bottom: solid 1px #9B111E; } h2 { border-bottom: solid 1px #9B111E; } h3 { border-bottom: solid 1px #9B111E; }
24.
そんな時は変数
25.
変数 // SCSS $foo-font-size :
16px; $foo-line : 1px; $foo-color : #9B111E; $foo-border : solid $foo-line $foo-color; ! h1 { font-size: $foo-font-size; color: $foo-color; border-bottom: $foo-border; } ! h2 { border-bottom: $foo-border; } ! // CSS h1 { font-size: 16px; color: #9B111E; border-bottom: solid 1px #9B111E; } h2 { border-bottom: solid 1px #9B111E; }
26.
まだありますよね?
27.
幅の計算がめんどくさい 40px 940px 300px ? px hoge
fuga
28.
そんな時は計算しよう
29.
幅の計算 // SCSS $hogefuga-width: 940px; $hoge-width:
300px; $foge-fuga-margin:40px; ! .fuga { width: $hogefuga-width - $hoge-width - $foge-fuga-margin; } ! // CSS .fuga { width: 600px; } ! // ※細かいスタイルは省略してます。
30.
まだまだありますよね?
31.
同じ構成のスタイルを 何回も書かないといけない ! // CSS div.hoge { -moz-border-radius:
5px; -webkit-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; } div.huga { -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; -ms-border-radius: 0.5em; border-radius: 0.5em; }
32.
そんな時にmixin
33.
mixin // SCSS @mixin border-radius($size:0.5em)
{ // デフォルト値を設定可 -moz-border-radius: $size; -webkit-border-radius: $size; -ms-border-radius: $size; border-radius: $size; } ! div.hoge { @include border-radius(5px); } div.huga { @include border-radius; } ! // CSS div.hoge { -moz-border-radius: 5px; -webkit-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; } div.huga { -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; -ms-border-radius: 0.5em; border-radius: 0.5em; }
34.
他にもできることはあるけど
35.
とりあえずは
36.
使えるところから使ってみる
37.
しんどくなったら意味ない
38.
Sassでちょっと楽しよう
39.
おわり
Télécharger maintenant