Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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
Prochain SlideShare
Chargement dans…5
×

Sass 超入門

7 982 vues

Publié le

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

Publié dans : Business
  • Soyez le premier à commenter

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

×