Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sassをはじめからていねいに<概要−基礎編>

1,800 views

Published on

メタ言語であるSassの未経験者向けスライド。
・Sassってなに?
・なぜSassがいるのか?
・Sassの最も簡単な導入方法
・基本テクニック
を紹介

Published in: Technology

Sassをはじめからていねいに<概要−基礎編>

  1. 1. Sassをはじめからていねいに <概要­基礎編>
  2. 2. ホリグチ セイト Front-End-Engineer LIG.inc 所属 CSSとの出会いは 約15年くらい前 @seito_horiguchi slideshare facebook
  3. 3. Q.Sassって何?
  4. 4. .box  {              padding:  10px;              h1  {                      width:  100px;              }      } 1 サスペンションの略語。 自動車などの機械の部品。 2 アウグスト3世サス - ポー ランド国王。 3 Syntactically Awesome Style Sheets - メタ言語。
  5. 5. .box  {              padding:  10px;              h1  {                      width:  100px;              }      } 1 サスペンションの略語。 自動車などの機械の部品。 2 アウグスト3世サス - ポー ランド国王。 3 Syntactically Awesome Style Sheets - メタ言語。
  6. 6. • Sass概要 -なぜSassが必要なのか-   • 環境構築 -Sassを使うために必要な環境-   • 基本操作  -Sassの基本操作-   • おまけ 目次
  7. 7. Sass概要
  8. 8. Sassとは?
  9. 9. Sass = メタ言語 CSS Sass
  10. 10. なぜSassが必要なのか?
  11. 11.
  12. 12.
  13. 13. • Webサイト&アプリケーションの複雑化   • 運用フェーズでやることが増えた
  14. 14. =より効率的にCSSを書こう!
  15. 15. 環境構築 Step1.  Rubyのインストール   Step2.  Sassのインストール   Step3.  「Prepros」のダウンロード
  16. 16. Step1.  Rubyのインストール http://rubyinstaller.org/   ※「Rubyの実⾏行行ファイルへ環境PATHを設定 する」にチェック
  17. 17. Step2.  Sassのインストール Windows   1.コマンドプロンプトを起動   2.  「gem  install  sass」  →  Enter   Mac   1.ターミナルを起動   2.  「sudo  gem  install  sass」  →  return ※  「sass  –v」で確認できます。
  18. 18. Step3.  Preprosのダウンロード http://alphapixels.com/prepros/
  19. 19. 他の⽅方法 Gulp   http://gulpjs.com/ Grunt   http://gruntjs.com/ CodeKit   https://incident57.com/codekit/
  20. 20. 基本操作 Step1.  ネスト   Step2.  演算   Step3.  変数   Step4.  &   Step5.  Partial
  21. 21. .box  {          padding:  10px;          .hoge1  {                  width:  100px;          }   .hoge2  {                  width:  200px;   }   } .box  {          padding:  10px;   }   .box  hoge1  {          width:  100px;   }   .box  hoge2  {          width:  100px;   } Sass CSS Step1.  ネスト
  22. 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. 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. 24. Step3.  変数 $path:  "../../image/";   .hoge  {      background:      url(#{$path}image.jpg);   } .hoge  {      background:        url(../../image.jpg);   } Sass CSS
  25. 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. 26. Step5.    Partial 命名ルール _̲base.scss @import    "base"  ; ・scssファイルの名前の先頭に”_̲”をつけると、コンパイルされないscss ファイルになる   ・よく使う@mixinのセットやクラスを書いておき、インポートして使う
  27. 27. おまけ
  28. 28. Sassにできることはいっぱい
  29. 29. • @for   • @each   • #{$hoge}   • Compass • @mixin   • @include   • @content   • @extend …etc
  30. 30. よきSassライフを!

×