Soumettre la recherche
Mettre en ligne
Sass超入門
•
Télécharger en tant que PPTX, PDF
•
1 j'aime
•
899 vues
Mizuno Renya
Suivre
Sassの超入門です。 解り辛い所が多いかと思いますが、 その辺はすみません。 デザインもダサいですが すみません。
Lire moins
Lire la suite
Design
Signaler
Partager
Signaler
Partager
1 sur 26
Télécharger maintenant
Recommandé
Webページで学ぶJavaScript2013 第4回
Webページで学ぶJavaScript2013 第4回
京大 マイコンクラブ
Webページで学ぶJavaScript2013 第6回
Webページで学ぶJavaScript2013 第6回
京大 マイコンクラブ
CSS Nite in OSAKA, Vol.32 でやったやつです。
CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに
CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに
Masunaga Ray
Webページで学ぶJavaScript2013 第5回
Webページで学ぶJavaScript2013 第5回
京大 マイコンクラブ
姫路IT系勉強会vol.3で発表
春のJavaScript祭り
春のJavaScript祭り
Masahiro Hata
メタ言語であるSassの未経験者向けスライド。 ・Sassってなに? ・なぜSassがいるのか? ・Sassの最も簡単な導入方法 ・基本テクニック を紹介
Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>
Horiguchi Seito
2016年11月21日(月)に開催したアップルップル公開社内勉強会vol.30でお話した内容です。
Sassを使いこなそう
Sassを使いこなそう
Kasumi Morita
「入門」ではなく「紹介」 詳しい情報は検索しましょう。
Sass紹介
Sass紹介
Daisuke Hirayama
Recommandé
Webページで学ぶJavaScript2013 第4回
Webページで学ぶJavaScript2013 第4回
京大 マイコンクラブ
Webページで学ぶJavaScript2013 第6回
Webページで学ぶJavaScript2013 第6回
京大 マイコンクラブ
CSS Nite in OSAKA, Vol.32 でやったやつです。
CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに
CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに
Masunaga Ray
Webページで学ぶJavaScript2013 第5回
Webページで学ぶJavaScript2013 第5回
京大 マイコンクラブ
姫路IT系勉強会vol.3で発表
春のJavaScript祭り
春のJavaScript祭り
Masahiro Hata
メタ言語であるSassの未経験者向けスライド。 ・Sassってなに? ・なぜSassがいるのか? ・Sassの最も簡単な導入方法 ・基本テクニック を紹介
Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>
Horiguchi Seito
2016年11月21日(月)に開催したアップルップル公開社内勉強会vol.30でお話した内容です。
Sassを使いこなそう
Sassを使いこなそう
Kasumi Morita
「入門」ではなく「紹介」 詳しい情報は検索しましょう。
Sass紹介
Sass紹介
Daisuke Hirayama
Slide for Sass
About Sass
About Sass
Minoru Hayakawa
DIST.2「Sass Again」発表資料
Sass実践編+Compass入門
Sass実践編+Compass入門
Yoshiya OKI
2014/03/29 WordBench東京 春のデザイナー祭り!のスライド
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
Sou Lab
社内の勉強会用にオブジェクト指向の基本的なところをごく簡単にまとめてみました。 slideshare初めてな上に英語弱いので使い方やカテゴリ分けがあっているのか自信なし
いまさら学ぶオブジェクト指向
いまさら学ぶオブジェクト指向
Daisuke Hirayama
社内Sass勉強会で発表したスライドです。 Sassといいつつ実際はCSS設計の話です。 ※補足 29ページでBEMのModifierについて書いていますが、スライド中の書き方はMindBEMdingという記法で、BEM本家の書き方ではありません。MindBEMdingのほうがメジャーであること、エンジニア向けの勉強会だったのもあってスライドでは省略しました。
Sass勉強会 - メジャーなCSS設計紹介とDocBaseのCSS
Sass勉強会 - メジャーなCSS設計紹介とDocBaseのCSS
Asami Kamei
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/Compass講習会
Sass/Compass講習会
Beeworks
2014/09/17に話した内容のスライド。 Google Slideから移動
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
CSS Nite LP32 Sass で行なった「Sass/Compass よくあるトラブルと 解決方法・回避方法」のスライドです
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
2016年5月13日 CodeGrid 四周年記念パーティーでの「ヒューマンリーダブルな CSS 記述法(異次元編、α版)」の資料です。大規模な運用でも、CSSをヒューマンリーダブルに保つ方法について、その試みを提案しました。スライド中のデモは https://github.com/storywriter/HRCSS で公開しています。
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
2014年11月8日 大阪 「Web制作者のためのCSS設計の教科書」出版記念イベント x CSSオジサン #0 のスライドです。
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
拓樹 谷
2015年7月29日 松戸WordPress部勉強会スライド
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
CSS設計に関わるあれこれ。 基本〜実践的な内容です。 OOCSS, BEM, SMACSSとかも出てきます。
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
新規サイト制作におけるフロントエンドの環境を統一化しようと試みて作ってみましたー
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
Frontrend in Kanazawa -(2014年10月18日開催)で使用したスライドです。 http://labo.dmm.com/frontrend/
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
WDF.Vol.8で話したCSSについてのスライドです。 HTMLの見た目を制御するCSS。 CSS3やsassなど技術的な話題を目にすることは多いですが その運用方法について多くは語られていません。 大規模サイトを大人数で制作する状況でCSSはどうあるべきか。 DMM.comという巨大サイトの運用を通じて得た経験を話したいと思います。
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
井上 誠
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
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
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Yoshinori Kobayashi
普段slackを利用していて、Botに興味はあるけどまだ手を出したことがない・・・! そんな方のために簡単な作り方、デプロイ方法、応用方法をお伝えします。 今回は、公開されている雑談APIと組み合わせて、SlackBotと簡単な雑談できるようなものを例として作ります。 また、Herokuへのデプロイ方法、その他応用事例などもお伝えします。 SlackBotといえばCoffeeScriptで書けるHubotが有名ですが、今回はPythonで書いてみたい、という方向けのコンテンツです。
Python × Herokuで作る 雑談slack bot
Python × Herokuで作る 雑談slack bot
dcubeio
Contenu connexe
En vedette
Slide for Sass
About Sass
About Sass
Minoru Hayakawa
DIST.2「Sass Again」発表資料
Sass実践編+Compass入門
Sass実践編+Compass入門
Yoshiya OKI
2014/03/29 WordBench東京 春のデザイナー祭り!のスライド
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
Sou Lab
社内の勉強会用にオブジェクト指向の基本的なところをごく簡単にまとめてみました。 slideshare初めてな上に英語弱いので使い方やカテゴリ分けがあっているのか自信なし
いまさら学ぶオブジェクト指向
いまさら学ぶオブジェクト指向
Daisuke Hirayama
社内Sass勉強会で発表したスライドです。 Sassといいつつ実際はCSS設計の話です。 ※補足 29ページでBEMのModifierについて書いていますが、スライド中の書き方はMindBEMdingという記法で、BEM本家の書き方ではありません。MindBEMdingのほうがメジャーであること、エンジニア向けの勉強会だったのもあってスライドでは省略しました。
Sass勉強会 - メジャーなCSS設計紹介とDocBaseのCSS
Sass勉強会 - メジャーなCSS設計紹介とDocBaseのCSS
Asami Kamei
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/Compass講習会
Sass/Compass講習会
Beeworks
2014/09/17に話した内容のスライド。 Google Slideから移動
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
CSS Nite LP32 Sass で行なった「Sass/Compass よくあるトラブルと 解決方法・回避方法」のスライドです
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
2016年5月13日 CodeGrid 四周年記念パーティーでの「ヒューマンリーダブルな CSS 記述法(異次元編、α版)」の資料です。大規模な運用でも、CSSをヒューマンリーダブルに保つ方法について、その試みを提案しました。スライド中のデモは https://github.com/storywriter/HRCSS で公開しています。
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
2014年11月8日 大阪 「Web制作者のためのCSS設計の教科書」出版記念イベント x CSSオジサン #0 のスライドです。
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
拓樹 谷
2015年7月29日 松戸WordPress部勉強会スライド
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
CSS設計に関わるあれこれ。 基本〜実践的な内容です。 OOCSS, BEM, SMACSSとかも出てきます。
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
新規サイト制作におけるフロントエンドの環境を統一化しようと試みて作ってみましたー
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
Frontrend in Kanazawa -(2014年10月18日開催)で使用したスライドです。 http://labo.dmm.com/frontrend/
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
WDF.Vol.8で話したCSSについてのスライドです。 HTMLの見た目を制御するCSS。 CSS3やsassなど技術的な話題を目にすることは多いですが その運用方法について多くは語られていません。 大規模サイトを大人数で制作する状況でCSSはどうあるべきか。 DMM.comという巨大サイトの運用を通じて得た経験を話したいと思います。
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
井上 誠
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
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
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Yoshinori Kobayashi
普段slackを利用していて、Botに興味はあるけどまだ手を出したことがない・・・! そんな方のために簡単な作り方、デプロイ方法、応用方法をお伝えします。 今回は、公開されている雑談APIと組み合わせて、SlackBotと簡単な雑談できるようなものを例として作ります。 また、Herokuへのデプロイ方法、その他応用事例などもお伝えします。 SlackBotといえばCoffeeScriptで書けるHubotが有名ですが、今回はPythonで書いてみたい、という方向けのコンテンツです。
Python × Herokuで作る 雑談slack bot
Python × Herokuで作る 雑談slack bot
dcubeio
En vedette
(18)
About Sass
About Sass
Sass実践編+Compass入門
Sass実践編+Compass入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
いまさら学ぶオブジェクト指向
いまさら学ぶオブジェクト指向
Sass勉強会 - メジャーなCSS設計紹介とDocBaseのCSS
Sass勉強会 - メジャーなCSS設計紹介とDocBaseのCSS
Sass/Compass講習会
Sass/Compass講習会
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
CSS の歩き方
CSS の歩き方
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Python × Herokuで作る 雑談slack bot
Python × Herokuで作る 雑談slack bot
Sass超入門
1.
水野廉也
2.
・ 大学生 ・ 専門学校生 ・
21歳 ・ 口癖:眠い
3.
・ CSSのメタ言語 ・ Sassを記述してコンパイルしCSSを生成する ・
SassとScssがある ・ Scssが一般的に使われている
4.
Sass Scss
5.
_人人 人人人人_ > Scssのが奇麗
<  ̄Y^Y^Y^Y^Y^Y^Y ̄
6.
・ Rubyが必要 ・ 基本コマンドライン _人人
人人人_ > メンドクサイ <  ̄Y^Y^Y^Y^Y^Y ̄
7.
Less/Sass/Scss/Markdown/Coffeescript等 を コンパイルしてくれる優秀なやつ
8.
ここにプロジェクトファイルを ドラッグ&ドロップ
9.
こんな感じになる。 大体終わり。
10.
なかのファイルをクリック! Compileをクリック!
11.
はい、完成! おめでとう!
12.
他にもいいものはたくさんあるので 自分の気に入った物を使うのが一番です。
13.
といっても記述はほとんどCSS! なので新しく何かを覚える必要はほぼ0!!
14.
CSSScss
15.
プロパティの 入れ子なんて技も!
16.
CSSScss
17.
CSSScss
18.
CSSScss
19.
・ Sassの中でも重要な機能! ・ 小さなテンプレートのみたいなもの ・
メソッドみたいなやつ
20.
CSSScss
21.
Mixinの書き方
22.
Mixinの使い方
23.
・ CSSだと使用厳禁な@importがSassだとおk! ・ むしろファイルを管理しやすいからおすすめ!
24.
・ @importされるScssファイル ・ 自作したMixinをパッケージにして管理する時とか
25.
・ 命名規則 ・ 使用する時
26.
・ Sassを強力にしたフレームワーク ・ 便利なMixin郡 ・
スプライト自動作成 ・ プロジェクごとの設定ファイル
Télécharger maintenant