• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Sass 超入門
 

Sass 超入門

on

  • 3,686 views

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

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

Statistics

Views

Total Views
3,686
Views on SlideShare
3,204
Embed Views
482

Actions

Likes
10
Downloads
23
Comments
0

3 Embeds 482

http://web-mimemo.com 471
http://kaorunnpa.wordpress.com 9
https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Sass 超入門 Sass 超入門 Presentation Transcript

    • 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 $style $color;}初期値を指定できる26
    • .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