CSSジェネレータの出力をSCSSに移植してみたら簡単だった

SCSS

f:id:peroon:20121010163610j:image

$gem install sass 
$mv style.css style.scss 
$sass --watch style.scss:style.css
http://sass-lang.com/

角丸ボタンのCSSジェネレータの出力がこちら↓
style.css

/**
 * CSS Buttons Generator for your pleasure!
 * http://www.dextronet.com/css-buttons-generator
 * 
 * (c) Ondrej Zabojnik <zabojnik@dextronet.com>, released under the MIT license
 * 
 * Usage: 
 *   <a href="" class="shiny-button"><strong>Free Download</strong><br>No hidden battle droids inside</a>
 * 
 */

.shiny-button {
  display: inline-block;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.1;
  font-weight: normal;
  font-family: sans-serif;
  color: #FFFFFF;
  font-size: 12px;
  background-color: #73B10E;
  background-image: -webkit-linear-gradient(top, #76b60e 0%, #86c028 48%, #73B10E 49%, #73B10E 82%, #84cb10 100%);
  background-image: -moz-linear-gradient(top, #76b60e 0%, #86c028 48%, #73B10E 49%, #73B10E 82%, #84cb10 100%);
  background-image: -o-linear-gradient(top, #76b60e 0%, #86c028 48%, #73B10E 49%, #73B10E 82%, #84cb10 100%);
  background-image: linear-gradient(top, #76b60e 0%, #86c028 48%, #73B10E 49%, #73B10E 82%, #84cb10 100%);
  border-color: hsl(83, 29%, 37%);
  -webkit-box-shadow: inset 0 0 1px 1px #95e512, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 0 1px 1px #95e512, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 0 1px 1px #95e512, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  -webkit-text-shadow: 1px 1px 1px #365207;
  -moz-text-shadow: 1px 1px 1px #365207;
  -o-text-shadow: 1px 1px 1px #365207;
  text-shadow: 1px 1px 1px #365207;
  -webkit-border-radius: 32px;
  -moz-border-radius: 32px;
  border-radius: 32px;
  padding: 12px 30px 12px 30px;
}

.shiny-button strong {
  letter-spacing: 1px;
  font-size: 22px;
}

.shiny-button:hover {
  color: #FFFFFF;
  background-color: #7cbf0f;
  background-image: -webkit-linear-gradient(top, #7fc40f 0%, #8fcc2b 48%, #7cbf0f 49%, #7cbf0f 82%, #8dd911 100%);
  background-image: -moz-linear-gradient(top, #7fc40f 0%, #8fcc2b 48%, #7cbf0f 49%, #7cbf0f 82%, #8dd911 100%);
  background-image: -o-linear-gradient(top, #7fc40f 0%, #8fcc2b 48%, #7cbf0f 49%, #7cbf0f 82%, #8dd911 100%);
  background-image: linear-gradient(top, #7fc40f 0%, #8fcc2b 48%, #7cbf0f 49%, #7cbf0f 82%, #8dd911 100%);
  border-color: hsl(83, 28%, 36%);
  -webkit-box-shadow: inset 0 0 1px 1px #9eed1e, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 0 1px 1px #9eed1e, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 0 1px 1px #9eed1e, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  -webkit-text-shadow: 1px 1px 1px #3f6008;
  -moz-text-shadow: 1px 1px 1px #3f6008;
  -o-text-shadow: 1px 1px 1px #3f6008;
  text-shadow: 1px 1px 1px #3f6008;
}

.shiny-button:active {
  color: #FFFFFF;
  background-color: #6aa30d;
  background-image: -webkit-linear-gradient(top, #649a0c 0%, #73B10E 100%);
  background-image: -moz-linear-gradient(top, #649a0c 0%, #73B10E 100%);
  background-image: -o-linear-gradient(top, #649a0c 0%, #73B10E 100%);
  background-image: linear-gradient(top, #649a0c 0%, #73B10E 100%);
  padding: 13px 30px 11px 30px;
}

これをSAASのSCSS文法で移植すると、変数が使えたり、ブロックの入れ子が可能になる
↓をstyle.scssとして保存し、変換するとCSSができる

/**
 * CSS Buttons Generator for your pleasure!
 * http://www.dextronet.com/css-buttons-generator
 * 
 * (c) Ondrej Zabojnik <zabojnik@dextronet.com>, released under the MIT license
 * 
 * Usage: 
 *   <a href="" class="shiny-button"><strong>Free Download</strong><br>No hidden battle droids inside</a>
 * 
 */

.shiny-button {
  $col0:#76b60e;
  $col1:#86c028;
  $col2:#73B10E;
  $col3:#73B10E;
  $col4:#84cb10;

  display: inline-block;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.1;
  font-weight: normal;
  font-family: sans-serif;
  color: #FFFFFF;
  font-size: 12px;
  
  background-color: $col2;
  background-image: -webkit-linear-gradient(top, $col0 0%, $col1 48%, $col2 49%, $col3 82%, $col4 100%);
  background-image: -moz-linear-gradient   (top, $col0 0%, $col1 48%, $col2 49%, $col3 82%, $col4 100%);
  background-image: -o-linear-gradient     (top, $col0 0%, $col1 48%, $col2 49%, $col3 82%, $col4 100%);
  background-image: linear-gradient        (top, $col0 0%, $col1 48%, $col2 49%, $col3 82%, $col4 100%);
  
  $box_shadow_color:#95e512;
  border-color: hsl(83, 29%, 37%);
  -webkit-box-shadow: inset 0 0 1px 1px $box_shadow_color, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 0 1px 1px $box_shadow_color, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 0 1px 1px $box_shadow_color, 0 0 1px 3px rgba(0, 0, 0, 0.15);

  $text_shadow_color:#365207;
  -webkit-text-shadow: 1px 1px 1px $text_shadow_color;
  -moz-text-shadow:    1px 1px 1px $text_shadow_color;
  -o-text-shadow:      1px 1px 1px $text_shadow_color;
  text-shadow:         1px 1px 1px $text_shadow_color;

  $border_radius:32px;
  -webkit-border-radius: $border_radius;
  -moz-border-radius:    $border_radius; 
  border-radius:         $border_radius; 

  padding: 12px 30px 12px 30px;
  
  strong{
    letter-spacing: 10px;
    font-size: 22px;
  }
  
  &:hover
  {
      $col0:#7fc40f;
      $col1:#8fcc2b;
      $col2:#7cbf0f;
      $col3:#7cbf0f;
      $col4:#8dd911;

      color: #FFFFFF;
	  background-color: $col0;
	  background-image: -webkit-linear-gradient(top, $col0 0%, $col1 48%, $col2 49%, $col3 82%, $col4 100%);
	  background-image: -moz-linear-gradient   (top, $col0 0%, $col1 48%, $col2 49%, $col3 82%, $col4 100%);
	  background-image: -o-linear-gradient     (top, $col0 0%, $col1 48%, $col2 49%, $col3 82%, $col4 100%);
	  background-image: linear-gradient        (top, $col0 0%, $col1 48%, $col2 49%, $col3 82%, $col4 100%);

	  border-color: hsl(83, 28%, 36%);

      $box_shadow_color:#9eed1e;
	  -webkit-box-shadow: inset 0 0 1px 1px $box_shadow_color, 0 0 1px 3px rgba(0, 0, 0, 0.15);
	  -moz-box-shadow:    inset 0 0 1px 1px $box_shadow_color, 0 0 1px 3px rgba(0, 0, 0, 0.15);
	  box-shadow:         inset 0 0 1px 1px $box_shadow_color, 0 0 1px 3px rgba(0, 0, 0, 0.15);

      $text_shadow_color:#3f6008;
	  -webkit-text-shadow: 1px 1px 1px $text_shadow_color;
	  -moz-text-shadow:    1px 1px 1px $text_shadow_color;
	  -o-text-shadow:      1px 1px 1px $text_shadow_color;
	  text-shadow:         1px 1px 1px $text_shadow_color;
  }
  
  &:active{
      $col0:#649a0c;
      $col1:#73B10E;

	  color: #FFFFFF;
	  background-color: #6aa30d;
	  background-image: -webkit-linear-gradient(top, $col0 0%, $col1 100%);
	  background-image: -moz-linear-gradient   (top, $col0 0%, $col1 100%);
	  background-image: -o-linear-gradient     (top, $col0 0%, $col1 100%);
	  background-image: linear-gradient        (top, $col0 0%, $col1 100%);
	  padding: 13px 30px 11px 30px;
	}
}

CSSと比べてみると、変数で値を管理できているし、
ブロックの入れ子のおかげで無駄な記述が減っています

SCSSの表面部分しか使っていないので、もっと理解すれば
ベンダープレフィックス部分など、もっと整理できるはず

最後に動作確認のHTML↓

<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta http-equiv="refresh" content="1">
</head>

<body>
scss test
<br>
<br>
<br>
<a href="" class="shiny-button"><strong>scss button test</strong><br>sub text text text text text text text text text text text text</a>
</body>

・SAASはRubyのgemで入れることができる
・scssファイルを書き換えると、それを検知してcssを出力するwatchオプションがある
・ブラウザでリロードし続けるためにHTMLにmetaを入れた
【引用】"Sass には、SASS 形式と SCSS 形式の 2 種類あるのですが、SCSS 形式は、CSS そのものです。
今までどおり CSS を書くように記述できるのでなんら問題ありません。
Sass の便利機能はプラスαとして、使える人だけ使えばいいのです。"
http://tech.naver.jp/blog/?p=885

私も、SCSSにCSSをコピーペーストしてから、徐々にSCSS形式に合わせていきました
CSSに互換性があるのがいいですね！