オイシックスのcss、Sass化の手順
最後にオイシックスのcssファイルをSass化する手順の一部をご紹介します。
初めにcssファイルを逆コンパイルしてscssファイルを作成します。コマンドラインから以下のように記載してscssファイルを作成します。
逆コンパイルのコマンド
sass-convert --from css 逆コンパイルされるcssの名前 --to scss 逆コンパイルされたscssファイルの名前
現在オイシックスのサイトで利用されているcssの一部をSass化した様子をご紹介します。「sass-convert --from css base.css --to scss base.scss」と入力してbase.cssからbase.scssを作成しました。
base.cssの一部抜粋
/* 共通 */
* {scrollbar-base-color:#cccccc; scrollbar-track-color:#ffffff; scrollbar-face-color:#cccccc; scrollbar-arrow-color:#000000; scrollbar-3dlight-color:#ffffff; scrollbar-darkshadow-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff;}
*,h1,h2,h3,h4,h5,h6,input,form,ul,li,dl,dt,dd,hr,td,th,table,div {margin:0; padding:0;}
div,table {font-family:"MS Pゴシック","mono-space","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka"; font-size:12px; line-height:1.3em;}
p {font-family:"MS Pゴシック","mono-space","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka"; font-size:12px; line-height:1.3em;}
ul {list-style-type:none;}
ul li {list-style-type:none; margin:0 0 5px 0;}
ol {list-style-position:outside; margin:0 0 0 30px;}
img {border:none;}
div.float_left,a.float_left {float:left;}
div.float_right,a.float_right {float:right;}
.m-rgt05 {margin-right:5px;}
.m-rgt10 {margin-right:10px;}
.m-btm05 {margin-bottom:5px;}
.m-btm10 {margin-bottom:10px;}
.m-btm15 {margin-bottom:15px;}
.m-btm20 {margin-bottom:20px;}
.m-btm25 {margin-bottom:25px;}
.m-btm30 {margin-bottom:30px;}
/* 全体 */
body {font-family:"MS Pゴシック","mono-space","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka"; font-size:12px; line-height:1.3em; color:#333333; background-color:#ffffff; overflow-y:auto;}
div.head {width:100%; margin:1px 0 0 0;_margin:0; padding:0; text-align:center; background:url(/g6/shared/head/image/header_mat201109.png) repeat-x;}
div.center {padding:10px 20px 5px 0px; overflow:auto; border:solid; border-width:0;}
div.center2 {padding:10px 20px 5px 0px; overflow:auto; border:solid; border-width:0; float:right; overflow:auto;}
/* [Content]
-----------------------------------------------------------------------------*/
div.ma_center2 {padding:10px 20px 5px 0px; overflow:auto; border:solid; border-width:0 ;float:right; overflow:auto; background:#900;}
div.left {line-height:17px; width:160px; float:left; overflow-x:hidden; overflow-y:auto; background-color:#ffffff; /*IE6でmarginが2倍になるバグ対策*/display:inline;}
div.right {width:145px; display:none; float:right; padding-top:0; overflow:auto;}
div.sidenavi2 {overflow: auto;}
.pointer{cursor: pointer;}
#wrapper,#div_zentai {margin:0 auto; height:auto;}
#wrapper_1column,div.bg_middle {width:100%; height:100%;}
#overlay {top:85px;_top:85px;}
.wrap,#top_bar,#global_navi {width:950px;}
.wrap {text-align:left; margin:0 auto;}
逆コンパイルされたbase.scss
/* 共通 */
* {
scrollbar-base-color: #cccccc;
scrollbar-track-color: #ffffff;
scrollbar-face-color: #cccccc;
scrollbar-arrow-color: #000000;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6, input, form, ul, li, dl, dt, dd, hr, td, th, table {
margin: 0;
padding: 0;
}
div {
margin: 0;
padding: 0;
font-family: "MS Pゴシック","mono-space","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka";
font-size: 12px;
line-height: 1.3em;
}
table, p {
font-family: "MS Pゴシック","mono-space","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka";
font-size: 12px;
line-height: 1.3em;
}
ul {
list-style-type: none;
li {
list-style-type: none;
margin: 0 0 5px 0;
}
}
ol {
list-style-position: outside;
margin: 0 0 0 30px;
}
img {
border: none;
}
div.float_left, a.float_left {
float: left;
}
div.float_right, a.float_right {
float: right;
}
.m-rgt05 {
margin-right: 5px;
}
.m-rgt10 {
margin-right: 10px;
}
.m-btm05 {
margin-bottom: 5px;
}
.m-btm10 {
margin-bottom: 10px;
}
.m-btm15 {
margin-bottom: 15px;
}
.m-btm20 {
margin-bottom: 20px;
}
.m-btm25 {
margin-bottom: 25px;
}
.m-btm30 {
margin-bottom: 30px;
}
/* 全体 */
body {
font-family: "MS Pゴシック","mono-space","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka";
font-size: 12px;
line-height: 1.3em;
color: #333333;
background-color: #ffffff;
overflow-y: auto;
}
div {
&.head {
width: 100%;
margin: 1px 0 0 0;
_margin: 0;
padding: 0;
text-align: center;
background: url(/g6/shared/head/image/header_mat201109.png) repeat-x;
}
&.center {
padding: 10px 20px 5px 0px;
overflow: auto;
border: solid;
border-width: 0;
}
&.center2 {
padding: 10px 20px 5px 0px;
overflow: auto;
border: solid;
border-width: 0;
float: right;
overflow: auto;
}
&.ma_center2 {
padding: 10px 20px 5px 0px;
overflow: auto;
border: solid;
border-width: 0;
float: right;
overflow: auto;
background: #900;
}
&.left {
line-height: 17px;
width: 160px;
float: left;
overflow-x: hidden;
overflow-y: auto;
background-color: #ffffff;
/*IE6でmarginが2倍になるバグ対策*/
display: inline;
}
&.right {
width: 145px;
display: none;
float: right;
padding-top: 0;
overflow: auto;
}
&.sidenavi2 {
overflow: auto;
}
}
/* [Content]
-----------------------------------------------------------------------------*/
.pointer {
cursor: pointer;
}
#wrapper, #div_zentai {
margin: 0 auto;
height: auto;
}
#wrapper_1column, div.bg_middle {
width: 100%;
height: 100%;
}
#overlay {
top: 85px;
_top: 85px;
}
.wrap, #top_bar, #global_navi {
width: 950px;
}
.wrap {
text-align: left;
margin: 0 auto;
}
逆コンパイルした後のSassファイルの内容を見ると、上記で説明した「変数」や「継承」と言った処理が記載されていません。次回以降で、「変数」や「継承」を利用して、分かりやすく、かつ運用しやすいコードに書き換えていく様子をご紹介したいと思います。
まとめ
今回はSassの機能を紹介しました。次回は、Compassの導入について触れていきたいと思います。
