Submit Search
Upload
First sass
•
9 likes
•
3,612 views
Toshiaki Sasaki
Follow
2013年1月11日に行った社内勉強会用スライド。『初めてのSass』的な内容です。
Read less
Read more
Design
Report
Share
Report
Share
1 of 52
Download now
Download to read offline
Recommended
WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門 先生:石本 光司
schoowebcampus
Sass 超入門
Sass 超入門
Michinari Odajima
ネストを覚えた人のためのSassの便利な使い方
ネストを覚えた人のためのSassの便利な使い方
Hiroki Shibata
Sass/Compass講習会
Sass/Compass講習会
Beeworks
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会
Yuji Nojima
Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>
Horiguchi Seito
Sassを使った共同作業について
Sassを使った共同作業について
Kanako Urabe
実践Sass 前編
実践Sass 前編
Azusa Tomita
Recommended
WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門 先生:石本 光司
schoowebcampus
Sass 超入門
Sass 超入門
Michinari Odajima
ネストを覚えた人のためのSassの便利な使い方
ネストを覚えた人のためのSassの便利な使い方
Hiroki Shibata
Sass/Compass講習会
Sass/Compass講習会
Beeworks
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会
Yuji Nojima
Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>
Horiguchi Seito
Sassを使った共同作業について
Sassを使った共同作業について
Kanako Urabe
実践Sass 前編
実践Sass 前編
Azusa Tomita
やさしいSassり方
やさしいSassり方
祐磨 堀
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
Sassをはじめよう!
Sassをはじめよう!
Yoshiya OKI
実践Sass 後編
実践Sass 後編
kosei27
Css preprocessorの始めかた
Css preprocessorの始めかた
Hiroki Shibata
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Yoshinori Kobayashi
第10回勉強会 CSS設計について
第10回勉強会 CSS設計について
takumaro web
Sass紹介
Sass紹介
Daisuke Hirayama
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
Naoki Matsuda
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
lyca chigyo
SMACSS入門
SMACSS入門
iPride Co., Ltd.
CSS設計のお勉強
CSS設計のお勉強
MarlboroLand
⑰jQueryをおぼえよう!その3
⑰jQueryをおぼえよう!その3
Nishida Kansuke
css基本。
css基本。
web12
LESSについて
LESSについて
okaSlide80
CSS3 Design Recipe
CSS3 Design Recipe
Kazunari Hara
About Sass
About Sass
Minoru Hayakawa
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
Shunsuke Watanabe
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
井上 誠
compassで簡単! CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
Kazuya Hiruma
Sass(SCSS)について
Sass(SCSS)について
Kazufumi Miyamoto
More Related Content
What's hot
やさしいSassり方
やさしいSassり方
祐磨 堀
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
Sassをはじめよう!
Sassをはじめよう!
Yoshiya OKI
実践Sass 後編
実践Sass 後編
kosei27
Css preprocessorの始めかた
Css preprocessorの始めかた
Hiroki Shibata
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Yoshinori Kobayashi
第10回勉強会 CSS設計について
第10回勉強会 CSS設計について
takumaro web
Sass紹介
Sass紹介
Daisuke Hirayama
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
Naoki Matsuda
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
lyca chigyo
SMACSS入門
SMACSS入門
iPride Co., Ltd.
CSS設計のお勉強
CSS設計のお勉強
MarlboroLand
⑰jQueryをおぼえよう!その3
⑰jQueryをおぼえよう!その3
Nishida Kansuke
css基本。
css基本。
web12
LESSについて
LESSについて
okaSlide80
CSS3 Design Recipe
CSS3 Design Recipe
Kazunari Hara
About Sass
About Sass
Minoru Hayakawa
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
Shunsuke Watanabe
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
井上 誠
What's hot
(20)
やさしいSassり方
やさしいSassり方
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sassをはじめよう!
Sassをはじめよう!
実践Sass 後編
実践Sass 後編
Css preprocessorの始めかた
Css preprocessorの始めかた
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
第10回勉強会 CSS設計について
第10回勉強会 CSS設計について
Sass紹介
Sass紹介
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
SMACSS入門
SMACSS入門
CSS設計のお勉強
CSS設計のお勉強
⑰jQueryをおぼえよう!その3
⑰jQueryをおぼえよう!その3
css基本。
css基本。
LESSについて
LESSについて
CSS3 Design Recipe
CSS3 Design Recipe
About Sass
About Sass
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
Similar to First sass
compassで簡単! CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
Kazuya Hiruma
Sass(SCSS)について
Sass(SCSS)について
Kazufumi Miyamoto
WebデザイナーのためのSass/Compass入門
WebデザイナーのためのSass/Compass入門
Koji Ishimoto
Sass
Sass
Su Ga
Css拡張言語のコトハジメ
Css拡張言語のコトハジメ
regret raym
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考える
Yutaro Miyazaki
Sass introduction (jscafe 10)
Sass introduction (jscafe 10)
Ryuma Tsukano
Sassを使ってみよう
Sassを使ってみよう
GIG inc.
Less - first step
Less - first step
Kohki Nakashima
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
Nishida Kansuke
イマドキのコーダー環境構築2016
イマドキのコーダー環境構築2016
Sou Lab
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
Toshimichi Suekane
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
マークアップ講座 02 CSS
マークアップ講座 02 CSS
eiji sekiya
Backbone.jsとSASSでモジュールをつくった話
Backbone.jsとSASSでモジュールをつくった話
Yosuke Doke
Oocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話も
Yumi uniq Ishizaki
Asset Pipeline for Perl
Asset Pipeline for Perl
Yoshihiro Sasaki
HTML5 on ASP.NET
HTML5 on ASP.NET
Fujio Kojima
Sass less
Sass less
Net Kanayan
WordBenchTokyo-20111126
WordBenchTokyo-20111126
webourgeon
Similar to First sass
(20)
compassで簡単! CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
Sass(SCSS)について
Sass(SCSS)について
WebデザイナーのためのSass/Compass入門
WebデザイナーのためのSass/Compass入門
Sass
Sass
Css拡張言語のコトハジメ
Css拡張言語のコトハジメ
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考える
Sass introduction (jscafe 10)
Sass introduction (jscafe 10)
Sassを使ってみよう
Sassを使ってみよう
Less - first step
Less - first step
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
イマドキのコーダー環境構築2016
イマドキのコーダー環境構築2016
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
マークアップ講座 02 CSS
マークアップ講座 02 CSS
Backbone.jsとSASSでモジュールをつくった話
Backbone.jsとSASSでモジュールをつくった話
Oocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話も
Asset Pipeline for Perl
Asset Pipeline for Perl
HTML5 on ASP.NET
HTML5 on ASP.NET
Sass less
Sass less
WordBenchTokyo-20111126
WordBenchTokyo-20111126
More from Toshiaki Sasaki
ぼくがやってるぷろじぇくとまねじめんと
ぼくがやってるぷろじぇくとまねじめんと
Toshiaki Sasaki
Performance up Web Design
Performance up Web Design
Toshiaki Sasaki
Tips of Design
Tips of Design
Toshiaki Sasaki
ルビー( ´∀`)人(´∀` )ルビー
ルビー( ´∀`)人(´∀` )ルビー
Toshiaki Sasaki
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
Hello Google+
Hello Google+
Toshiaki Sasaki
デザイナー視点のWordPress WordCrub Fukui 2011.1.29
デザイナー視点のWordPress WordCrub Fukui 2011.1.29
Toshiaki Sasaki
Progressionのススメ
Progressionのススメ
Toshiaki Sasaki
More from Toshiaki Sasaki
(8)
ぼくがやってるぷろじぇくとまねじめんと
ぼくがやってるぷろじぇくとまねじめんと
Performance up Web Design
Performance up Web Design
Tips of Design
Tips of Design
ルビー( ´∀`)人(´∀` )ルビー
ルビー( ´∀`)人(´∀` )ルビー
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Hello Google+
Hello Google+
デザイナー視点のWordPress WordCrub Fukui 2011.1.29
デザイナー視点のWordPress WordCrub Fukui 2011.1.29
Progressionのススメ
Progressionのススメ
First sass
1.
2013.01.11 AC.tech Toshiaki Sasaki(Web
designer at All Connect, Inc.)
2.
3.
Sass こわくないよ
4.
Agenda - Sass? - 記法 -
導入について - まとめ
5.
Sass ?
6.
Sass is CSS
Preprocessor - CSSを拡張するメタ言語 “ メタ言語とは、ある言語について何らかの記述をするための言語である。 それだけでは具体的な利用に関する目的をもっておらず、特定のルールを加える ことで具体的な応用として利用可能となる。 -Wikipedia - CSSを普通に書くよりも効率良く 書くことができる
7.
8.
CSSの文法 だけを拡張する
http://hail2u.net/documents/sass-and-sassy-css.html
9.
Why CSS Preprocessor? -
効率的なCSSコーディング - 表示速度向上のアプローチ
10.
How to Coding
11.
Nesting
Nesting 入れ子でCSSを書ける • Sample & Demo style.scss style.css #main { #main { margin: 0; margin: 0; padding: 0; padding: 0; .block { } background: #ccc; color: #f00; #main .block { font-size: 12px; background: #ccc; } color: #f00; } font-size: 12px; }
12.
Valiables
Nesting 変数を使うことができる • Sample & Demo style.scss style.css $margin-top: 40px; .sectionA { $fontsize12: 12px; margin-top: 40px; } .sectionA { margin-top: $margin-top; .sectionB { } margin-top: 40px; .sectionB { font-size: 12px; margin-top: $margin-top; } font-size: $fontsize12; }
13.
mixin
Nesting includeできる(セットを変数化するイメージ) • Sample & Demo style.scss style.css @mixin sprite { .sprite-link { display: block; display: block; text-indent: -9999px; text-indent: -9999px; } width: 300px; height: 100px; .sprite-link { background: #eee; @include sprite; } width: 300px; height: 100px; background: #eee; }
14.
mixin
Nesting includeできる(セットを変数化するイメージ) • Sample & Demo style.scss style.css @mixin radius($value) { .sprite-link { -webkit-border-radius: $value; -webkit-border-radius: 8px; -moz-border-radius: $value; -moz-border-radius: 8px; border-radius: $value; border-radius: 8px; } background: #eee; } .sprite-link { @include radius(8px); background: #eee; }
15.
extend
Nesting セレクタの継承(再利用) • Sample & Demo style.scss style.css .box { .box, .sectionA { margin: 0; margin: 0; padding: 0; padding: 0; background: #eee; background: #eee; } } .sectionA{ @extend .box; }
16.
Other
演算できる Nesting • Sample & Demo style.scss style.css #main { #main { width: 940px - 40px; width: 900px; margin: 0; margin: 0; padding: 0 20px; padding: 0 20px; } }
17.
Coding is fun,
again. Nesting Valiables mixin extend others
18.
@import
ファイルの結合 Nesting style.scss @import "common"; @import "reset"; 複数の scss ファイルを読み込み、1つの css ファイルとして書き出す _common.scss _reset.scss style.scss style.css
19.
@import
ファイルの結合 Nesting style.scss @import "common"; @import "reset"; 読み込ませる scss ファイルには、css ファイルとして書き出させない ためアンダーバーをつける(ex. _common.scss、_reset.scss _common.scss _reset.scss style.scss style.css
20.
compressed
圧縮Nesting • Sample & compressed --watch sass:css $ sass --style Demo style.scss #main {margin: 0;padding: 0;} #main .block {background: #ccc;color: #f00;font-size: 12px;}.sprite-link {display: block;text-indent: -9999px;width: 300px;height: 100px;background: #eee;} 改行やスペースを削除して1行ですべてを書き出す
21.
good performance, good
UX @import compressed
22.
Install
23.
環境用意しないと使えないよ
┐(́ `)┌ヤレヤレ
24.
Install - Ruby - Sass
25.
Install - Ruby
← Mac OS だと最初から入ってる - Sass
26.
fo
rW in do w s http://rubyinstaller.org/
27.
http://sass-lang.com/
28.
$ gem install
sass
29.
Install - Ruby - Sass -
Compass ← New!
30.
http://compass-style.org/
31.
$ gem update
--system $ gem install compass
32.
OK!Next!
33.
Compile
34.
.scss
.css css ファイルを作るためには scss ファイルをコンパイルする
35.
$ cd project_dir
← プロジェクトのフォルダへ移動 $ sass --watch scss:css ← 監視コマンド sass フォルダ内の .scss ファイルを編集すると css フォルダへ編集した内容を反映させた css ファイルができる
36.
めんどくさい (´・ω・`)
37.
$ cd project_dir
← プロジェクトのフォルダへ移動 $ compass w ← 監視コマンド sass フォルダ内の .scss ファイルを編集すると css フォルダへ編集した内容を反映させた css ファイルができる
38.
うん、めんどくさい (´・ω・`)
39.
そもそも黒い画面が... (´・ω:;.:...
40.
まぁまぁ、そんなこと言わずに...
41.
fo
rW in batch file Nesting do w s • Samplewatch compass & Demo 上記を書いて「compass_start.bat」という名前で保存。 sass フォルダと同じ階層に置いておく。 scss ファイルを編集する前に、compass_start.bat ファイルを ダブルクリックすることで、自動的に監視が始まる。 コマンドプロンプトを起動して、監視コマンドを自分で入力しなくてもよ くなるので楽だね :)
42.
config.rb
Nesting • Sample=& Demo http_path "/" css_dir = "css" sass_dir = "sass" images_dir = "image" javascripts_dir = "js" output_style = :compressed relative_assets = true line_comments = false 設定用の config.rb も同じ階層に置いておく
43.
http://incident57.com/codekit/
44.
http://mhs.github.com/scout-app/
45.
最初から言え ( ‘д‘⊂彡☆))Д´) パーン
46.
コマンドに慣れておくと、なにかと良いかもね
47.
for Non Sasser -
別の css ファイル作って読み込む <link rel=”stylesheet” href=”css/style.css” /> <link rel=”stylesheet” href=”css/newcontents.css” />
48.
まとめ
49.
- Sass で効率的かつ、表示速度向上を 意識したコーディングをしよう -
大丈夫、すぐ慣れる :) まずは Nesting とか、すぐできること から始めよう
50.
Enjoy coding!
51.
Thank you. Toshiaki
Sasaki @shirokuro331
52.
Resources
Nesting Sassを覚えよう http://css-happylife.com/archives/sass/ • Sample & Demo SassをWindowsにインストールする http://taiju.hatenablog.com/entry/20110607/1307413721 Sassられ指南 http://www.slideshare.net/taiju/sass-8218412 Compassを使ってSassのCSS出力を手軽にしよう http://www.skyward-design.net/blog/archives/000118.html Sass徹底解説∼SassがもたらすCSSのパラダイムシフト http://cssnite.jp/afterdark/cpi/vol01/ Photo Credit Luc Viatour http://www.lucnix.be/main.php
Download now