サイトの基本情報をSCSSのスニペットとしてまとめました。
Source
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | //////////////// サイズ //////////////// //サイト幅 $site_width: 960px; $site_width_nm: 960; //単位ナシ //サイト左右余白 $site_side_margin: 15px; //メインカラム幅 $site_colum1: 100%; $site_colum2: 80%; $site_colum3: 60%; $site_main_padding: 1%; //サイドカラム幅 $site_colum_left: 20%; $site_colum_right: 20%; //商品リスト並び数 $product_listItem_col_big: 4; $product_listItem_col_small: 8; //////////////// 色 //////////////// //サイト背景 $site_background: #f5f5f5; //メインカラー $main_color :#ec7b65; //アクセントカラー $accent_color :#ec7b65; //テキストカラー $text_color : #666; //リンクカラー $ancer_color : #000099; //////////////// フォント //////////////// //ベースフォント $base_font_family_sans : "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro" , sans-serif; $base_font_family_serif: "游明朝", YuMincho , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HG明朝B" , "ＭＳ Ｐ明朝", "MS PMincho" , serif; //アイコンフォント $icon_font:FontAwesome; //ベースフォントサイズ $base_text_size : 14px; //////////////// clearFix //////////////// @mixin clearFix {&:after {content:""; display:block; clear:both;}} //////////////// サンプル配色 //////////////// $sample:url(../img/_sample/sample.png); $sample_red:url(../img/_sample/sample_red.png); $sample_white:url(../img/_sample/sample_white.png); $sample_green:url(../img/_sample/sample_green.png); $sample_blue:url(../img/_sample/sample_blue.png); //end |