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(SCSS) 入門超1
レジュメSass とはSass と SCSSSass の特徴参考資料2
Sass とは3
メタ言語と言われるCSS の入力をサポートしてくれる便利なもの。4
Sass と SCSS5
Sass(SCSS)6
Sass = SCSS7
Sass の特徴8
CSSとほぼ同じ書き方ができる。入れ子で表現できる。変数が使える。計算ができる。よく使うコードを定義できる。関数が使える etc...9
CSSとほぼ同じ書き方が出来る10
既存の CSS ファイルの拡張子を 「.scss」 に変えるだけでOK!11
入れ子で表現できる12
CSSul {セレクタ:スタイル;}ul li {セレクタ:スタイル;}ul li a {セレクタ:スタイル;}ul li a img {セレクタ:スタイル;}13
Sassul {セレクタ:スタイル;li {セレクタ:スタイル;a {セレクタ:スタイル;img {セレクタ:スタイル;}}}}14
CSSa {  セレクタ:スタイル;}a : hover {  セレクタ:スタイル;}15
Sassa {  セレクタ:スタイル;  & : hover {    セレクタ:スタイル;}16
変数が使える17
$textColor : #333333;$default-margin : 10px auto;$default-style : underline;18
計算ができる19
$pageWidth : 960px;$column : 3;.column {  width : ($pageWidth / $column);}20
$pageWidth : 960px;$margin : 10px;$padding : 5px;.column {  width : ($pageWidth - $margin *2 - $padding * 2);}21
よく使うコードをテンプレ化できる22
@mixin clearFix {  position : relative;  overflow : hidden;  zoom : 1;}定義する23
.container {  @include clearFix;}使う時は24
@mixin borderBox( $width, $style,$color ) {  display : block;  padding : 5px;  border : $width $style $color;}引数が使える25
@mixin borderBox( $width : 1px,$style : solid, $color : #333333 ) {  display : block;  padding : 5px;  border : $width $st...
.box {  @includeborderBox( 2px,dotted,#CCCCCC );}使う時は27
関数が使える28
mix( #F00, #00F )   // 中間色lighten( #666, 30% ) // 明るくdarken( #666, 30% ) // 暗く関数いろいろ29
カスタム関数も使える30
@function 関数名( 引数, 引数 ... ) {   :  処理   :  @return 戻り値;}関数の定義31
参考資料32
ドットインストールhttp://dotinstall.com/クリエイターボックスhttp://www.webcreatorbox.com/tech/css-sass/WP-Dhttp://wp-d.org/2013/01/03/1732/33
Upcoming SlideShare
Loading in …5
×

Sass 超入門

7,552 views

Published on

Sass の超入門者向けのスライドです。

Published in: Business
  • Be the first to comment

Sass 超入門

  1. 1. Sass(SCSS) 入門超1
  2. 2. レジュメSass とはSass と SCSSSass の特徴参考資料2
  3. 3. Sass とは3
  4. 4. メタ言語と言われるCSS の入力をサポートしてくれる便利なもの。4
  5. 5. Sass と SCSS5
  6. 6. Sass(SCSS)6
  7. 7. Sass = SCSS7
  8. 8. Sass の特徴8
  9. 9. CSSとほぼ同じ書き方ができる。入れ子で表現できる。変数が使える。計算ができる。よく使うコードを定義できる。関数が使える etc...9
  10. 10. CSSとほぼ同じ書き方が出来る10
  11. 11. 既存の CSS ファイルの拡張子を 「.scss」 に変えるだけでOK!11
  12. 12. 入れ子で表現できる12
  13. 13. CSSul {セレクタ:スタイル;}ul li {セレクタ:スタイル;}ul li a {セレクタ:スタイル;}ul li a img {セレクタ:スタイル;}13
  14. 14. Sassul {セレクタ:スタイル;li {セレクタ:スタイル;a {セレクタ:スタイル;img {セレクタ:スタイル;}}}}14
  15. 15. CSSa {  セレクタ:スタイル;}a : hover {  セレクタ:スタイル;}15
  16. 16. Sassa {  セレクタ:スタイル;  & : hover {    セレクタ:スタイル;}16
  17. 17. 変数が使える17
  18. 18. $textColor : #333333;$default-margin : 10px auto;$default-style : underline;18
  19. 19. 計算ができる19
  20. 20. $pageWidth : 960px;$column : 3;.column {  width : ($pageWidth / $column);}20
  21. 21. $pageWidth : 960px;$margin : 10px;$padding : 5px;.column {  width : ($pageWidth - $margin *2 - $padding * 2);}21
  22. 22. よく使うコードをテンプレ化できる22
  23. 23. @mixin clearFix {  position : relative;  overflow : hidden;  zoom : 1;}定義する23
  24. 24. .container {  @include clearFix;}使う時は24
  25. 25. @mixin borderBox( $width, $style,$color ) {  display : block;  padding : 5px;  border : $width $style $color;}引数が使える25
  26. 26. @mixin borderBox( $width : 1px,$style : solid, $color : #333333 ) {  display : block;  padding : 5px;  border : $width $style $color;}初期値を指定できる26
  27. 27. .box {  @includeborderBox( 2px,dotted,#CCCCCC );}使う時は27
  28. 28. 関数が使える28
  29. 29. mix( #F00, #00F )   // 中間色lighten( #666, 30% ) // 明るくdarken( #666, 30% ) // 暗く関数いろいろ29
  30. 30. カスタム関数も使える30
  31. 31. @function 関数名( 引数, 引数 ... ) {   :  処理   :  @return 戻り値;}関数の定義31
  32. 32. 参考資料32
  33. 33. ドットインストールhttp://dotinstall.com/クリエイターボックスhttp://www.webcreatorbox.com/tech/css-sass/WP-Dhttp://wp-d.org/2013/01/03/1732/33

×