WebデザイナーのためのSass/Compass入門
•
13 likes•2,704 views
HTML/CSSコーディングを取り巻くWeb開発環境は日々進化しています。Sass/LESS/StylusなどのCSSプリプロセッサと呼ばれるCSSをより便利に速く記述できるフレームワークが登場し、Webデザイナーにもプログラミング的な知識を求められるようになってきました。 この授業ではその中でもSassとその拡張フレームワークであるCompassを取り上げて解説します。Sass/Compassを使えば、面倒な記述、タイピングを少なくすることができ、コーディング速度を高めることができます。また、急なデザイン仕様の変更にも変数や継承と言ったSassの機能を使えば柔軟に対応することができます。 ただSassを使用するにあたって、いわゆる『黒い画面』、ターミナルを使って通常のCSSにコンパイル（変換）する作業を伴ったり、変数、ミックスイン、継承といったプログラミング的な概念も必要になってきます。 なにごとも新しいものを取り入れることは苦労を伴いますが、私自身、転職を機にWebデザイナーからWebデベロッパーに職種が変わりました。その時に戸惑いながらも自分なりのペースでSass/Compassを導入していった経験をこの授業を通して共有できれば幸いです。
Recommended
More Related Content
What's hot
What's hot (20)
Similar to WebデザイナーのためのSass/Compass入門
Similar to WebデザイナーのためのSass/Compass入門 (20)
More from Koji Ishimoto
More from Koji Ishimoto (16)
WebデザイナーのためのSass/Compass入門
- 1. Introduction to Sass/Compass for Web Designer Webデザイナーのための Sass/Compass 入門 Ameba Headquarters Game Division Web Developer Koji Ishimoto 2013.09.27
- 2. @t32k
- 4. Web Director Direction, Google Analytics Web Designer Design, HTML/CSS
- 5. Web Developer Development, HTML/CSS/JavaScript Web Director Direction, Google Analytics Web Designer Design, HTML/CSS
- 6. <- イマココ 2012/06 ~ Web Developer Development, HTML/CSS/JavaScript Web Director Direction, Google Analytics Web Designer Design, HTML/CSS
- 8. なぜSassを使うのか？
- 9. Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more.
- 14. 無理して使う必要はない
- 15. 学習コストの増加
- 24. 黒い画面を日常的に使っている人
- 25. Sass使いたいヽ(´ー｀)ノ
- 33. Demo
- 34. エンジニアは怠け者
- 35. だが、それがいい！
- 36. 開発環境の構築
- 38. 好きなエディタって何ですか？
- 41. Terminal
- 42. Terminal
- 43. Prepros
- 45. Demo
- 48. Sass/Compassの機能
- 50. 変数
- 51. 変数 ミックスイン
- 52. 変数 ネスト ミックスイン
- 53. 変数 継承ネスト ミックスイン
- 60. Prepros
- 61. Prepros
- 62. 変数 Variables ＄
- 67. // Comment $main-color: #cc0000; $space: 10px; .global-header { background-color: $main-color; } .module { margin: $space * 2; padding: $space / 2; } Sass
- 68. CSS .global-header { background-color: #cc0000; } .module { margin: 20px; padding: 5px; }
- 70. ネスト Nesting ｛ ｝
- 71. .oya { color: #000; .kodomo { color: #111; .mago { color: #222; } } } Sass
- 72. .oya { color: #000; .kodomo { color: #111; .mago { color: #222; } } } 入れ子 Sass
- 73. .oya { color: #000; .kodomo { color: #111; .mago { color: #222; } } } 入れ子 入れ子の入れ子 Sass
- 74. .oya { color: #000; .kodomo { color: #111; .mago { color: #222; } } } 入れ子 入れ子の入れ子 入れ子の入れ子の Sass
- 75. .oya { color: #000; } .oya .kodomo { color: #111; } .oya .kodomo .mago { color: #222; } CSS
- 76. .oya { color: #000; } .oya .kodomo { color: #111; } .oya .kodomo .mago { color: #222; } 親のセレクタも適用 CSS
- 77. .oya { color: #000; } .oya .kodomo { color: #111; } .oya .kodomo .mago { color: #222; } 親のセレクタも適用 親のセレクタも適用 CSS
- 78. .login-module { padding: 10px; .headline { font: { family: bold; size: 18px; } } .sentence { color: #666; } } Sass
- 79. .login-module { padding: 10px; .headline { font: { family: bold; size: 18px; } } .sentence { color: #666; } } プロパティの ネストも可能 Sass
- 80. .login-module { padding: 10px; } .login-module .headline { font-family: bold; font-size: 18px; } .login-module .sentence { color: #666; } CSS
- 83. @mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei; } .box { border: 1px #000 solid; @include marumi(4px); } Sass
- 84. @mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei; } .box { border: 1px #000 solid; @include marumi(4px); } ミックスインの定義 Sass
- 85. @mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei; } .box { border: 1px #000 solid; @include marumi(4px); } ミックスイン名ミックスインの定義 Sass
- 86. @mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei; } .box { border: 1px #000 solid; @include marumi(4px); } ミックスイン名ミックスインの定義 引数 Sass
- 87. @mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei; } .box { border: 1px #000 solid; @include marumi(4px); } ミックスイン名ミックスインの定義 引数 ミックスインの呼び出し Sass
- 88. .box { border: 1px #000 solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } CSS
- 89. .box { border: 1px #000 solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } ミックスインが展開された部分 CSS
- 91. .marui-marui { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } CSS
- 97. .message-box { padding: 5px 10px; border: 1px black solid; font-size: 14px; font-weight: bold; } .alert-box { @extend .message-box; border: 1px red solid; color: red; } Sass
- 98. .message-box { padding: 5px 10px; border: 1px black solid; font-size: 14px; font-weight: bold; } .alert-box { @extend .message-box; border: 1px red solid; color: red; } Sass 継承元を指定
- 99. .message-box, .alert-box { padding: 5px 10px; border: 1px black solid; font-size: 14px; font-weight: bold; } .alert-box { border: 1px red solid; color: red; } CSS
- 100. .message-box, .alert-box { padding: 5px 10px; border: 1px black solid; font-size: 14px; font-weight: bold; } .alert-box { border: 1px red solid; color: red; } CSS継承したセレクタ
- 102. 基本の機能を ちゃんと理解する
- 103. まとめ
- 104. 最初から スゴイことはできない
- 105. 基本の積み重ねが 応用になる
- 108. 両方できるとカッコイイ (*´ω｀*)
- 109. 次のステップのために
- 111. http://book.scss.jp/
- 113. Thank you! t32k@t32kkoji.ishimotoToday's latte, Sass. | Flickr by yukop