Created
April 10, 2011 14:22
-
-
Save ykhs/912381 to your computer and use it in GitHub Desktop.
個人サイトに Sass を導入してみた
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin clearfix { | |
| clear: both; | |
| zoom: 1; | |
| &:after { | |
| content: "."; | |
| display: block; | |
| height: 0; | |
| clear: both; | |
| visibility: hidden; | |
| } | |
| * html & { height: 1px } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*! | |
| Variable Grid System. | |
| Learn more ~ http://www.spry-soft.com/grids/ | |
| Based on 960 Grid System - http://960.gs/ | |
| Licensed under GPL and MIT. | |
| */ | |
| // Containers | |
| //---------------------------------------------------------------------------------------------------- | |
| @mixin grid-container { | |
| @include clearfix; | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 660px; | |
| } | |
| // Grid >> Global | |
| //---------------------------------------------------------------------------------------------------- | |
| @mixin grid { | |
| display:inline; | |
| float: left; | |
| position: relative; | |
| margin-left: 10px; | |
| margin-right: 10px; | |
| } | |
| // Grid >> Children (Alpha ~ First, Omega ~ Last) | |
| //---------------------------------------------------------------------------------------------------- | |
| @mixin grid-alpha { | |
| margin-left: 0; | |
| } | |
| @mixin grid-omega { | |
| margin-right: 0; | |
| } | |
| // Grid >> 6 Columns | |
| //---------------------------------------------------------------------------------------------------- | |
| @mixin grid-span1 { | |
| @include grid; | |
| width:90px; | |
| } | |
| @mixin grid-span2 { | |
| @include grid; | |
| width:200px; | |
| } | |
| @mixin grid-span3 { | |
| @include grid; | |
| width:310px; | |
| } | |
| @mixin grid-span4 { | |
| @include grid; | |
| width:420px; | |
| } | |
| @mixin grid-span5 { | |
| @include grid; | |
| width:530px; | |
| } | |
| @mixin grid-span6 { | |
| @include grid; | |
| width:640px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /****************************************************************************** | |
| * HTML5 elements | |
| */ | |
| article, | |
| aside, | |
| dialog, | |
| figure, | |
| footer, | |
| header, | |
| hgroup, | |
| menu, | |
| nav, | |
| section { | |
| display: block; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //============================================================================= | |
| // Site Mixin | |
| //============================================================================= | |
| // Headings | |
| @mixin heading-lv1 { | |
| font-size: $yui-48px; | |
| text-shadow: 1px 1px 1px rgba(255,255,255,0.16), 2px 2px 1px rgba(0,0,0,0.12); | |
| background: url(./images/bg-site-title.gif) no-repeat 0 bottom; | |
| } | |
| @mixin heading-lv2 { | |
| margin-top: 40px; | |
| font-size: $yui-30px; | |
| font-family: $fontSerif; | |
| text-shadow: 1px 1px 1px rgba(255,255,255,0.16), 2px 2px 1px rgba(0,0,0,0.12); | |
| border-bottom: 1px solid $borderColorLight; | |
| background: none; | |
| } | |
| @mixin heading-lv3 { | |
| margin-top: 40px; | |
| font-size: $yui-24px; | |
| font-family: $fontSerif; | |
| text-shadow: none; | |
| border-bottom: 1px solid $borderColorExLight; | |
| } | |
| @mixin heading-lv4 { | |
| margin-top: 40px; | |
| font-size: $yui-20px; | |
| font-family: $fontSerif; | |
| text-shadow: none; | |
| border: 0; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //============================================================================= | |
| // Site Variables | |
| //============================================================================= | |
| // リンクカラー | |
| $linkColor: #0066cc; | |
| // ボーダーカラー | |
| $borderColorMain: #686868; | |
| // ボーダーカラー 明るく | |
| $borderColorLight: #acacac; | |
| // ボーダーカラー さらに明るく | |
| $borderColorExLight: #cccccc; | |
| // テキストカラー | |
| $textColorMain: #686868; | |
| // セリフフォント指定 | |
| $fontSerif: "georgia", "Hiragino Mincho Pro", "MS PMincho", serif; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*! | |
| Copyright (c) 2010, Yahoo! Inc. All rights reserved. | |
| Code licensed under the BSD License: | |
| http://developer.yahoo.com/yui/license.html | |
| version: 3.3.0 | |
| build: 3167 | |
| */ | |
| body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;} | |
| $yui-10px: 77%; | |
| $yui-11px: 85%; | |
| $yui-12px: 93%; | |
| $yui-13px: 100%; | |
| $yui-14px: 108%; | |
| $yui-15px: 116%; | |
| $yui-16px: 123.1%; | |
| $yui-17px: 131%; | |
| $yui-18px: 138.5%; | |
| $yui-19px: 146.5%; | |
| $yui-20px: 153.9%; | |
| $yui-21px: 161.6%; | |
| $yui-22px: 167%; | |
| $yui-23px: 174%; | |
| $yui-24px: 182%; | |
| $yui-25px: 189%; | |
| $yui-26px: 197%; | |
| $yui-27px: 207.7%; | |
| $yui-28px: 215.4%; | |
| $yui-29px: 223.1%; | |
| $yui-30px: 230.8%; | |
| $yui-48px: 369.2%; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*! | |
| Copyright (c) 2010, Yahoo! Inc. All rights reserved. | |
| Code licensed under the BSD License: | |
| http://developer.yahoo.com/yui/license.html | |
| version: 3.3.0 | |
| build: 3167 | |
| */ | |
| html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "yui-reset-min"; | |
| @import "yui-fonts-min"; | |
| @import "grid"; | |
| @import "html5"; | |
| @import "clearfix"; | |
| @import "site-mixin"; | |
| @import "site-variables"; | |
| /****************************************************************************** | |
| * Site Structure | |
| */ | |
| html { | |
| height: 100%; | |
| overflow-y: scroll; | |
| } | |
| body { | |
| min-height: 100%; | |
| height: auto !important; | |
| height: 100%; | |
| text-align: center; | |
| line-height: 1.6; | |
| color: $textColorMain; | |
| background: #f9faf2 url(./images/bg-body.jpg) repeat-x center 0; | |
| } | |
| a { | |
| color: $linkColor; | |
| text-decoration: none; | |
| &:hover { text-decoration: underline; } | |
| } | |
| .wrap { | |
| @include grid-container; | |
| text-align: left; | |
| } | |
| /****************************************************************************** | |
| * site-header | |
| */ | |
| .site-header { | |
| @include grid-span6; | |
| padding-top: 30px; | |
| text-align: left; | |
| font-family: $fontSerif; | |
| h1 { @include heading-lv1; } | |
| } | |
| /****************************************************************************** | |
| * site-nav | |
| */ | |
| .site-nav { | |
| h1 { @include heading-lv2; } | |
| ul { | |
| @include clearfix; | |
| margin: 10px 0 0; | |
| font-size: $yui-20px; | |
| line-height: 1; | |
| border: solid $borderColorLight; | |
| border-width: 0 0 0 1px; | |
| li { | |
| float: left; | |
| display: inline; | |
| border: solid $borderColorLight; | |
| border-width: 0 1px 0 0; | |
| a { | |
| display: block; | |
| padding: 0 18px; | |
| } | |
| } | |
| } | |
| } | |
| /****************************************************************************** | |
| * site-main | |
| */ | |
| .site-main { | |
| @include grid-span6; | |
| h1 { @include heading-lv2; } | |
| } | |
| /****************************************************************************** | |
| * site-footer | |
| */ | |
| .site-footer { | |
| @include grid-span6; | |
| @include clearfix; | |
| margin-top: 80px; | |
| padding-bottom: 30px; | |
| text-align: left; | |
| font-family: $fontSerif; | |
| border-top: 1px solid $borderColorMain; | |
| .copy { | |
| margin: 10px 0 0; | |
| } | |
| } | |
| /****************************************************************************** | |
| * mod-post (blog single view) | |
| */ | |
| .mod-post { | |
| header { | |
| margin: 40px 0; | |
| h1 { | |
| @include heading-lv3; | |
| margin: 0; | |
| } | |
| } | |
| .tags { | |
| display: inline; | |
| } | |
| p, blockquote { | |
| margin: 30px 0 0; | |
| } | |
| // headings | |
| section h1 { | |
| @include heading-lv4; | |
| } | |
| section section h1 { | |
| font-size: $yui-16px; | |
| } | |
| // list | |
| ul { | |
| margin: 24px 0 0; | |
| list-style-type: circle; | |
| list-style-position: inside; | |
| li { padding: 6px 0 0; } | |
| ul { margin: 0 0 0 1em; } | |
| } | |
| // list with number | |
| ol { | |
| margin: 24px 0 0; | |
| li { | |
| padding: 6px 0 0; | |
| list-style-type: decimal; | |
| list-style-position: inside; | |
| } | |
| ol { | |
| margin: 0 0 0 1em; | |
| list-style-type: lower-latin; | |
| ol { list-style-type: decimal; } | |
| } | |
| } | |
| // list with definition | |
| dl { | |
| margin: 22px 0 0; | |
| dt { padding: 8px 0 0; } | |
| dd { margin: 0 0 0 1em; } | |
| } | |
| // quote | |
| blockquote { | |
| padding: 0 10px 10px; | |
| border: 1px solid #e6e6e6; | |
| background: #ececec; | |
| p { | |
| margin: 0; | |
| padding: 10px 0 0; | |
| } | |
| } | |
| // image | |
| img { | |
| margin: 40px 0 0; | |
| } | |
| .caption { | |
| padding: 30px 0 0; | |
| } | |
| p img { | |
| margin: 0; | |
| } | |
| // Gist | |
| .gist { | |
| margin-top: 30px; | |
| } | |
| // Syntax Highlighter | |
| .syntaxhighlighter { | |
| width: auto !important; | |
| margin: 30px 0 0 !important; | |
| } | |
| } | |
| /****************************************************************************** | |
| * mod-post-others (blog single view) | |
| */ | |
| .mod-post-others { | |
| .old-and-new { | |
| margin-top: 20px; | |
| @include clearfix; | |
| .newer { | |
| @include grid-span3; | |
| @include grid-alpha; | |
| } | |
| .older { | |
| @include grid-span3; | |
| @include grid-omega; | |
| } | |
| } | |
| dt { | |
| @include heading-lv3; | |
| } | |
| dd { | |
| padding: 8px 0 0; | |
| list-style: circle inside; | |
| } | |
| } | |
| /****************************************************************************** | |
| * mod-post-summaries (blog summary view) | |
| */ | |
| .mod-post-summaries { | |
| h1 { @include heading-lv3; } | |
| .summary { | |
| h1 { @include heading-lv4; } | |
| .desc { margin-top: 6px; } | |
| .date { margin-top: 3px; } | |
| } | |
| } | |
| /****************************************************************************** | |
| * mod-post-tags (blog summary view) | |
| */ | |
| .mod-post-tags { | |
| @include grid-span3; | |
| @include grid-alpha; | |
| h1 { @include heading-lv3; } | |
| ul { | |
| margin-top: 15px; | |
| } | |
| li { | |
| display: inline; | |
| padding-right: 8px; | |
| } | |
| } | |
| /****************************************************************************** | |
| * mod-post-archives (blog summary view) | |
| */ | |
| .mod-post-archives { | |
| @include grid-span3; | |
| @include grid-omega; | |
| h1 { @include heading-lv3; } | |
| ul { | |
| margin-top: 15px; | |
| } | |
| li { | |
| display: inline; | |
| padding-right: 8px; | |
| } | |
| } | |
| /****************************************************************************** | |
| * paging | |
| */ | |
| .mod-paging { | |
| margin-top: 40px; | |
| p { @include grid-span3; } | |
| .back { @include grid-alpha; } | |
| .next { @include grid-omega; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment