Submit Search
Upload
Sassでちょっと楽しよう
•
1 like
•
1,365 views
Makoto Henmi
Follow
第16回 岡山Ruby, Ruby on Rails勉強会での発表資料
Read less
Read more
Report
Share
Report
Share
1 of 39
Download now
Download to read offline
Recommended
はじめてのWordPress
はじめてのWordPress
Shoji Endo
入門というよりは、まずはWordPressを触ってみよう!というレベルの資料です。
LESS使ってますか?
LESS使ってますか?
じゅん なかざ
[コデアル株式会社] Ruby on rails 開発環境設定勉強会(株式会社シンクスマイル主催)
[コデアル株式会社] Ruby on rails 開発環境設定勉強会(株式会社シンクスマイル主催)
codeal
WordPressってこんなCMS
WordPressってこんなCMS
Kawakami Hiroko
第67回「WEB TOUCH MEETING+WordPressハンズオン勉強会」(KDDIウェブコミュニケーションズ協賛)での前座の発表スライドです。 WordPressについてのさわり程度の内容です
いまいまMySQL@OSC2016長岡
いまいまMySQL@OSC2016長岡
sakaik
2016.10.01 新潟県長岡市で開催されたオープンソースカンファレンス(OSC)2016-Nagaoka での日本MySQLユーザ会(MyNA)枠発表資料です。
いまいまMySQL@OSC2016島根
いまいまMySQL@OSC2016島根
sakaik
2017.9.24 島根県松江市で開催された オープンソースカンファレンス(OSC)2016-Shimane での、MySQLユーザ会枠発表資料です。
mod_perlで動くアプリをどう置くか #hachiojipm
mod_perlで動くアプリをどう置くか #hachiojipm
鉄次 尾形
「ホスティング」というテーマをもとに、2013/06/15開催された Hachioji.pm#29 で発表したLTのスライドに若干の手直し(不備の修正)をしたものです。
Cocoa勉強会関西 #55 MagicalRecordでCore Dataをシンプルにする
Cocoa勉強会関西 #55 MagicalRecordでCore Dataをシンプルにする
asakahara
Cocoa勉強会関西 #55 MagicalRecordでCore Dataをシンプルにする
Recommended
はじめてのWordPress
はじめてのWordPress
Shoji Endo
入門というよりは、まずはWordPressを触ってみよう!というレベルの資料です。
LESS使ってますか?
LESS使ってますか?
じゅん なかざ
[コデアル株式会社] Ruby on rails 開発環境設定勉強会(株式会社シンクスマイル主催)
[コデアル株式会社] Ruby on rails 開発環境設定勉強会(株式会社シンクスマイル主催)
codeal
WordPressってこんなCMS
WordPressってこんなCMS
Kawakami Hiroko
第67回「WEB TOUCH MEETING+WordPressハンズオン勉強会」(KDDIウェブコミュニケーションズ協賛)での前座の発表スライドです。 WordPressについてのさわり程度の内容です
いまいまMySQL@OSC2016長岡
いまいまMySQL@OSC2016長岡
sakaik
2016.10.01 新潟県長岡市で開催されたオープンソースカンファレンス(OSC)2016-Nagaoka での日本MySQLユーザ会(MyNA)枠発表資料です。
いまいまMySQL@OSC2016島根
いまいまMySQL@OSC2016島根
sakaik
2017.9.24 島根県松江市で開催された オープンソースカンファレンス(OSC)2016-Shimane での、MySQLユーザ会枠発表資料です。
mod_perlで動くアプリをどう置くか #hachiojipm
mod_perlで動くアプリをどう置くか #hachiojipm
鉄次 尾形
「ホスティング」というテーマをもとに、2013/06/15開催された Hachioji.pm#29 で発表したLTのスライドに若干の手直し(不備の修正)をしたものです。
Cocoa勉強会関西 #55 MagicalRecordでCore Dataをシンプルにする
Cocoa勉強会関西 #55 MagicalRecordでCore Dataをシンプルにする
asakahara
Cocoa勉強会関西 #55 MagicalRecordでCore Dataをシンプルにする
やさしいSassり方
やさしいSassり方
祐磨 堀
初心者の方向けに、Sassの便利な機能や使い所をやさしく説明します。 http://media-massage.net/works/docs/easysass/
WordCamp Kansai 2016 初心者向けこわくないWordPress日本語フォーラムの使い方
WordCamp Kansai 2016 初心者向けこわくないWordPress日本語フォーラムの使い方
Kei Nomura
WordCamp Kansai 2016で登壇したときのスライド再掲。Speaker Deckにあげたものと同じです。 2016年7月9日~10日、大阪大学豊中キャンパスにて開催されたWordCamp Kansai 2016にて、『初心者向けこわくないWordPress日本語フォーラムの使い方』というタイトルでスピーカーとして登壇しました。
20160416 jaws days 2016 re cap
20160416 jaws days 2016 re cap
Shinya Yamada
JAWS DAYS 2016 re:cap 〜JAWS-UG大阪&関西女子会 特別合同企画〜 当日資料
さくらのクラウドサービス概要資料2016年8月版
さくらのクラウドサービス概要資料2016年8月版
さくらインターネット株式会社
http://cloud.sakura.ad.jp/
Sassを使った共同作業について
Sassを使った共同作業について
Kanako Urabe
今日はMongoDBの話はしない
今日はMongoDBの話はしない
Akihiro Kuwano
2017/11/22のORESHIKANIGHTのLTで話した内容ですm(_ _)m
WP-APIを使ってみよう&No PHPテーマという考え方
WP-APIを使ってみよう&No PHPテーマという考え方
Hidetaka Okamoto
WordBench奈良 2015年6月資料
Nginx+WordPress+AWS - NginxでWordPressを構築してみよう!
Nginx+WordPress+AWS - NginxでWordPressを構築してみよう!
Kiminori Yokoi
2016年3月12日に開催された「WordBench Nagoya」2016年3月度勉強会にて発表した資料になります。 (JAWS DAYS 2016行けなくて申し訳ありません)
gulp-sprockets、あるいはRailsのAssetsのビルドについて
gulp-sprockets、あるいはRailsのAssetsのビルドについて
yo_waka
Node学園 19限目の発表資料
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Yoshinori Kobayashi
2014年9月 第14回ゼロから始めるWordPress勉強会「Sass+Bootstrap+_sでテーマを作ろう」&質問大会! でのプレゼン資料です。 Sassを説明しました。 CSSを直接書くよりも、Sassを使って書いてほうが楽にかけて、効率的です。 Sassは最初は理解しにくいかもしれませんが、直ぐに慣れてくるので、だんだんと効率よくWebサイト制作ができるようになります。 初級者の方がでもわかりやすいようにまとめました。 初級者に薦めるなら、次の6つが便利な機能だと思います。 1.構文の階層化 2.変数 3.親セレクタ参照 &(アンパサンド) 4.関数 5.四則演算 +、-、×、÷ 6.インターポレーション(差し込む、補間) 上記の6つの機能を使えるだけでも、かなり楽になります。 通常のCMSやホームページなどであれば、上記の6つの機能だけでも十分だと思います。 ★Windowsの場合は日本語に注意! フォルダ名、ファイル名で日本語はNG なので使わない。 [Decode error - output not utf-8] のエラーがでた場合は、以下の記事が参考になります。 http://cappee.net/coding/sublime-scss-compass-emmet Invalid Windows-31J character “\xE3” のエラーがでた場合は、以下の記事が参考になります。 http://frmmpgit.blog.fc2.com/blog-entry-34.html
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
lyca chigyo
社内勉強会向けに作成した資料(内容一部修正版) ベタ書きCSSで非効率な管理をしていて、単純な修正でも整理されていないCSSをメンテナンスすることは容易ではなく、CSS修正作業工数が問題として挙がっている。 その問題の解決策の一つとして、CSS拡張メタ言語のSassの導入を推進するためチーム内のSassを知らないメンバ向けにSassとは何かを簡単に説明した内容です。
Sass/Compass講習会
Sass/Compass講習会
Beeworks
Sass/Compassを「触って覚える」を目的とした講習会スライド。 実習で使用するファイルは以下からダウンロード頂けます。 http://webnaut.jp/download/markup_140204/sass.zip 目次: 1. Sassとは/機能紹介 2. Sassを触ってみよう 3. Sass開発環境の設定 4. [Work1]ネストとインポート※ 5. Compassとは/機能紹介 6. Compassの設定 7. [Work2]Compassを使ったCSS Sprite実践※ 8. [Work3]納品時の作業※ 9. 書籍、参考サイト紹介 10. [Work4]追加課題※ =========================== 紹介記事 http://webnaut.jp/markup/663.html ===========================
Sass less
Sass less
Net Kanayan
イマドキのコーダー環境構築2016
イマドキのコーダー環境構築2016
Sou Lab
CSS Nite LP47 Coder's High 2016 http://cssnite.jp/lp/lp47 「イマドキのコーダー環境構築」で発表したスライドです。 ※スライド上のURLリンクは効かないので、下部文字起こしから飛んでください。
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
優也 田島
Gumi study#15 Sass構造化
Gumi study#15 Sass構造化
Haraguchi Go
2013年7月22日(月) gumi study#15 Sass構造化の事例
Sass 超入門
Sass 超入門
Michinari Odajima
Sass の超入門者向けのスライドです。
Sassをはじめよう!
Sassをはじめよう!
Yoshiya OKI
DIST.1 「Sass」 発表資料
C#とRubyをつなぐ
C#とRubyをつなぐ
107steps
ruby-csharp_script を使った C# と Ruby をつなぐやり方
Sass Hello World
Sass Hello World
Kazuma Kimura
Sassの概要を始め、機能紹介、Sassを使うまでのインストールからコンパイル方法までをまとめたスライドとなっています。 CSSは知っているけど、Sassを使った事のない人にオススメのスライドとなっています。
compassで簡単! CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
Kazuya Hiruma
COLOPL FrontNightで登壇した際の資料です。compassを使ってCSS3を手軽に使う方法を紹介しています。
LESS楽しいれす(^q^)
LESS楽しいれす(^q^)
taiju higashi
kanazawa.js vol1.7 at kanazawakagekiza 15min
More Related Content
What's hot
やさしいSassり方
やさしいSassり方
祐磨 堀
初心者の方向けに、Sassの便利な機能や使い所をやさしく説明します。 http://media-massage.net/works/docs/easysass/
WordCamp Kansai 2016 初心者向けこわくないWordPress日本語フォーラムの使い方
WordCamp Kansai 2016 初心者向けこわくないWordPress日本語フォーラムの使い方
Kei Nomura
WordCamp Kansai 2016で登壇したときのスライド再掲。Speaker Deckにあげたものと同じです。 2016年7月9日~10日、大阪大学豊中キャンパスにて開催されたWordCamp Kansai 2016にて、『初心者向けこわくないWordPress日本語フォーラムの使い方』というタイトルでスピーカーとして登壇しました。
20160416 jaws days 2016 re cap
20160416 jaws days 2016 re cap
Shinya Yamada
JAWS DAYS 2016 re:cap 〜JAWS-UG大阪&関西女子会 特別合同企画〜 当日資料
さくらのクラウドサービス概要資料2016年8月版
さくらのクラウドサービス概要資料2016年8月版
さくらインターネット株式会社
http://cloud.sakura.ad.jp/
Sassを使った共同作業について
Sassを使った共同作業について
Kanako Urabe
今日はMongoDBの話はしない
今日はMongoDBの話はしない
Akihiro Kuwano
2017/11/22のORESHIKANIGHTのLTで話した内容ですm(_ _)m
WP-APIを使ってみよう&No PHPテーマという考え方
WP-APIを使ってみよう&No PHPテーマという考え方
Hidetaka Okamoto
WordBench奈良 2015年6月資料
Nginx+WordPress+AWS - NginxでWordPressを構築してみよう!
Nginx+WordPress+AWS - NginxでWordPressを構築してみよう!
Kiminori Yokoi
2016年3月12日に開催された「WordBench Nagoya」2016年3月度勉強会にて発表した資料になります。 (JAWS DAYS 2016行けなくて申し訳ありません)
What's hot
(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を構築してみよう!
Similar to Sassでちょっと楽しよう
gulp-sprockets、あるいはRailsのAssetsのビルドについて
gulp-sprockets、あるいはRailsのAssetsのビルドについて
yo_waka
Node学園 19限目の発表資料
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Yoshinori Kobayashi
2014年9月 第14回ゼロから始めるWordPress勉強会「Sass+Bootstrap+_sでテーマを作ろう」&質問大会! でのプレゼン資料です。 Sassを説明しました。 CSSを直接書くよりも、Sassを使って書いてほうが楽にかけて、効率的です。 Sassは最初は理解しにくいかもしれませんが、直ぐに慣れてくるので、だんだんと効率よくWebサイト制作ができるようになります。 初級者の方がでもわかりやすいようにまとめました。 初級者に薦めるなら、次の6つが便利な機能だと思います。 1.構文の階層化 2.変数 3.親セレクタ参照 &(アンパサンド) 4.関数 5.四則演算 +、-、×、÷ 6.インターポレーション(差し込む、補間) 上記の6つの機能を使えるだけでも、かなり楽になります。 通常のCMSやホームページなどであれば、上記の6つの機能だけでも十分だと思います。 ★Windowsの場合は日本語に注意! フォルダ名、ファイル名で日本語はNG なので使わない。 [Decode error - output not utf-8] のエラーがでた場合は、以下の記事が参考になります。 http://cappee.net/coding/sublime-scss-compass-emmet Invalid Windows-31J character “\xE3” のエラーがでた場合は、以下の記事が参考になります。 http://frmmpgit.blog.fc2.com/blog-entry-34.html
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
lyca chigyo
社内勉強会向けに作成した資料(内容一部修正版) ベタ書きCSSで非効率な管理をしていて、単純な修正でも整理されていないCSSをメンテナンスすることは容易ではなく、CSS修正作業工数が問題として挙がっている。 その問題の解決策の一つとして、CSS拡張メタ言語のSassの導入を推進するためチーム内のSassを知らないメンバ向けにSassとは何かを簡単に説明した内容です。
Sass/Compass講習会
Sass/Compass講習会
Beeworks
Sass/Compassを「触って覚える」を目的とした講習会スライド。 実習で使用するファイルは以下からダウンロード頂けます。 http://webnaut.jp/download/markup_140204/sass.zip 目次: 1. Sassとは/機能紹介 2. Sassを触ってみよう 3. Sass開発環境の設定 4. [Work1]ネストとインポート※ 5. Compassとは/機能紹介 6. Compassの設定 7. [Work2]Compassを使ったCSS Sprite実践※ 8. [Work3]納品時の作業※ 9. 書籍、参考サイト紹介 10. [Work4]追加課題※ =========================== 紹介記事 http://webnaut.jp/markup/663.html ===========================
Sass less
Sass less
Net Kanayan
イマドキのコーダー環境構築2016
イマドキのコーダー環境構築2016
Sou Lab
CSS Nite LP47 Coder's High 2016 http://cssnite.jp/lp/lp47 「イマドキのコーダー環境構築」で発表したスライドです。 ※スライド上のURLリンクは効かないので、下部文字起こしから飛んでください。
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
優也 田島
Gumi study#15 Sass構造化
Gumi study#15 Sass構造化
Haraguchi Go
2013年7月22日(月) gumi study#15 Sass構造化の事例
Sass 超入門
Sass 超入門
Michinari Odajima
Sass の超入門者向けのスライドです。
Sassをはじめよう!
Sassをはじめよう!
Yoshiya OKI
DIST.1 「Sass」 発表資料
C#とRubyをつなぐ
C#とRubyをつなぐ
107steps
ruby-csharp_script を使った C# と Ruby をつなぐやり方
Sass Hello World
Sass Hello World
Kazuma Kimura
Sassの概要を始め、機能紹介、Sassを使うまでのインストールからコンパイル方法までをまとめたスライドとなっています。 CSSは知っているけど、Sassを使った事のない人にオススメのスライドとなっています。
compassで簡単! CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
Kazuya Hiruma
COLOPL FrontNightで登壇した際の資料です。compassを使ってCSS3を手軽に使う方法を紹介しています。
LESS楽しいれす(^q^)
LESS楽しいれす(^q^)
taiju higashi
kanazawa.js vol1.7 at kanazawakagekiza 15min
Sass実践編+Compass入門
Sass実践編+Compass入門
Yoshiya OKI
DIST.2「Sass Again」発表資料
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
sass typescript gulp
Gemの話 紹介編
Gemの話 紹介編
Satomi Tsujita
Railsアプリを作るときにgemを選ぶ基準あれこれと、よく使ってるgemの紹介。
SalesforceでのモダンSPA開発(Mashmatrix ”Sheet"の場合)
SalesforceでのモダンSPA開発(Mashmatrix ”Sheet"の場合)
Shinichi Tomita
Salesforceでのモダンspa開発(Mashmatrix ”Sheet"の場合)
Railsエンジニアが サーバーレスアーキテクチャに 手を出したよ - 川崎Ruby会議01
Railsエンジニアが サーバーレスアーキテクチャに 手を出したよ - 川崎Ruby会議01
Yuta Shimizu
川崎Ruby会議01 で発表した資料です
Similar to 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
More from Makoto Henmi
若者が勉強会に参加しない問題
若者が勉強会に参加しない問題
Makoto Henmi
LT駆動開発 23 - 懇親会 deLT https://ltdd.doorkeeper.jp/events/38389 ちょっと前に岡山のWeb系勉強会界隈で話題になっていた若者が勉強会に参加しない問題について自分なりに思ってる事を話してきた。 そういう若者はいるけど知らないだけな可能性もあるし、そういう若者たちがやっているイベントを知らないだけの可能性もある。 幅広くアンテナ広げることも大事なのかなと思う。
開発フローを改善した時の昔話
開発フローを改善した時の昔話
Makoto Henmi
合同勉強会 in 大都会岡山 -2015 Winter-の発表資料 https://gbdaitokai.doorkeeper.jp/events/31149 GitHub使ってますよね? GitHubに移行したものの以前の文化を引きずってしまっていた会社の昔話をしました
Joinsが使えなかった話
Joinsが使えなかった話
Makoto Henmi
別々のデータベースのモデルでjoinsをしようした場合にエラーが発生して使えなかった話。preloadなら上手く行く。
RailsでKnockout.js
RailsでKnockout.js
Makoto Henmi
第18回 岡山Ruby, Ruby on Rails勉強会での発表資料
24時間コンテストに参加した話
24時間コンテストに参加した話
Makoto Henmi
すごい合同勉強会 in 広島で発表したスライド http://great-study.doorkeeper.jp/events/13215 クックパッドさんの24時間コンテストに参加した感想とかを話してきた。
紙と鉛筆で設計しよう
紙と鉛筆で設計しよう
Makoto Henmi
オープンセミナー2014@広島の懇親会のLTで話した内容です。 スマートフォン向けアプリのUI/UX設計をペーパープロトタイピングでやりましょうというお話です。
岡山のRuby勉強会(OSC広島2013)
岡山のRuby勉強会(OSC広島2013)
Makoto Henmi
OSC広島2013のHiroshima.rbでLTした資料。 岡山のRuby関連勉強会の紹介
Rhodes
Rhodes
Makoto Henmi
More from Makoto Henmi
(8)
若者が勉強会に参加しない問題
若者が勉強会に参加しない問題
開発フローを改善した時の昔話
開発フローを改善した時の昔話
Joinsが使えなかった話
Joinsが使えなかった話
RailsでKnockout.js
RailsでKnockout.js
24時間コンテストに参加した話
24時間コンテストに参加した話
紙と鉛筆で設計しよう
紙と鉛筆で設計しよう
岡山のRuby勉強会(OSC広島2013)
岡山のRuby勉強会(OSC広島2013)
Rhodes
Rhodes
Recently uploaded
Grokking Simplicity探訪
Grokking Simplicity探訪
Yoshitaka Kawashima
2024/6/5のアーキ部で話したスライドです。 Stratified Designの目的を中心に、そのメリットを考えてみます。
FIWARE Orion Context Broker コンテキスト情報管理 (Orion 4.0.0対応)
FIWARE Orion Context Broker コンテキスト情報管理 (Orion 4.0.0対応)
fisuda
FIWARE Orion Context Broker の日本語の解説資料です。Orion Context Broker version 4.0.0 に対応しています。
NIST Cybersecurity Framework 2.0の変更点整理をしよう
NIST Cybersecurity Framework 2.0の変更点整理をしよう
You&I
今年2月に1.1→2.0に更新されたNIST CSFの変更内容について整理したいと思います。
アジャイルの30年(Tree Decades of Agileというブログ記事に関する要約)
アジャイルの30年(Tree Decades of Agileというブログ記事に関する要約)
You&I
Tree Decades of Agileというブログ記事が面白そうなので、これを読んでみたいと思います。 http://www.managecomplexity.dk/blog/2024/03/12/three-decades-of-agile/
受発注バスターズ説明資料 株式会社batton Saleshub掲載用.pdf
受発注バスターズ説明資料 株式会社batton Saleshub掲載用.pdf
ooishi1
受発注バスターズ説明資料
20240603_SD輪読&座談会#57_kitazaki_______.pdf
20240603_SD輪読&座談会#57_kitazaki_______.pdf
Ayachika Kitazaki
https://softwaredesign.connpass.com/event/319133/
Recently uploaded
(6)
Grokking Simplicity探訪
Grokking Simplicity探訪
FIWARE Orion Context Broker コンテキスト情報管理 (Orion 4.0.0対応)
FIWARE Orion Context Broker コンテキスト情報管理 (Orion 4.0.0対応)
NIST Cybersecurity Framework 2.0の変更点整理をしよう
NIST Cybersecurity Framework 2.0の変更点整理をしよう
アジャイルの30年(Tree Decades of Agileというブログ記事に関する要約)
アジャイルの30年(Tree Decades of Agileというブログ記事に関する要約)
受発注バスターズ説明資料 株式会社batton Saleshub掲載用.pdf
受発注バスターズ説明資料 株式会社batton Saleshub掲載用.pdf
20240603_SD輪読&座談会#57_kitazaki_______.pdf
20240603_SD輪読&座談会#57_kitazaki_______.pdf
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.
おわり
Download now