Downloaded 10 times
Uploaded byHoriguchi Seito
2,055 views
Sassをはじめからていねいに＜概要−基礎編＞
メタ言語であるSassの未経験者向けスライド。・Sassってなに？・なぜSassがいるのか？・Sassの最も簡単な導入方法・基本テクニックを紹介
Recommended
More Related Content
What's hot
Viewers also liked
Similar to Sassをはじめからていねいに＜概要−基礎編＞
Sassをはじめからていねいに＜概要−基礎編＞
- 1.
- 2.
- 3.
- 4..box { padding: 10px; h1 { width: 100px; } }1サスペンションの略語。自動車などの機械の部品。2アウグスト3世サス - ポーランド国王。3Syntactically AwesomeStyle Sheets - メタ言語。
- 5..box { padding: 10px; h1 { width: 100px; } }1サスペンションの略語。自動車などの機械の部品。2アウグスト3世サス - ポーランド国王。3Syntactically AwesomeStyle Sheets - メタ言語。
- 6.• Sass概要 －なぜSassが必要なのか－ •環境構築 －Sassを使うために必要な環境－ • 基本操作 －Sassの基本操作－ • おまけ目次
- 7.
- 8.
- 9.Sass = メタ言語CSSSass
- 10.
- 11.
- 12.
- 13.• Webサイト＆アプリケーションの複雑化 •運用フェーズでやることが増えた
- 14.
- 15.環境構築Step1. Rubyのインストール Step2. Sassのインストール Step3. 「Prepros」のダウンロード
- 16.
- 17.Step2. SassのインストールWindows 1.コマンドプロンプトを起動 2. 「gem install sass」 → Enter Mac 1.ターミナルを起動 2. 「sudo gem install sass」 → return※ 「sass –v」で確認できます。
- 18.
- 19.他の⽅方法Gulp http://gulpjs.com/Grunt http://gruntjs.com/CodeKit https://incident57.com/codekit/
- 20.基本操作Step1. ネスト Step2. 演算 Step3. 変数 Step4. & Step5. Partial
- 21..box { padding: 10px; .hoge1 { width: 100px; } .hoge2 { width: 200px; } }.box { padding: 10px; } .box hoge1 { width: 100px; } .box hoge2 { width: 100px; }Sass CSSStep1. ネスト
- 22.Step2. 演算.hoge { width: 10 + 10px; height: 20px -‐‑‒ 10px; padding: 5px * 5; margin: (50px) / 5; }.hoge { width: 20px; height: 10px; padding: 25px; margin: 10px; }Sass CSS
- 23.Step3. 変数$red：#BE3624;$blue：#23599b; $yellow：#F8C528; .box-‐‑‒a { color: $red; } .box-‐‑‒b { color: $blue; } .box-‐‑‒c { color: $blue; }.box-‐‑‒a { color: #BE3624; } .box-‐‑‒b { color: #23599b; } .box-‐‑‒c { color: #F8C528; }Sass CSS
- 24.Step3. 変数$path: "../../image/"; .hoge { background: url(#{$path}image.jpg); }.hoge { background: url(../../image.jpg); }Sass CSS
- 25.Step4. &.hoge { background: #fff; color: #000; &:hover { color: red; } &.hidden { opacity: 0.5; } .ie-‐‑‒hack &{ display: none; } }.hoge { background: #fff; color: #000; } .hoge:hover { color: red; } .hoge.hidden { opacity: 0.5; } .ie-‐‑‒hack .hoge { display: none; }Sass CSS
- 26.Step5. Partial命名ルール_̲base.scss@import "base" ;・scssファイルの名前の先頭に”_̲”をつけると、コンパイルされないscssファイルになる ・よく使う@mixinのセットやクラスを書いておき、インポートして使う
- 27.
- 28.
- 29.• @for •@each • #{$hoge} • Compass• @mixin • @include • @content • @extend…etc
- 30.