東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

sass メモ

ネスト

#main {
	section {
		margin-bottom: 50px;
		h1 {
			font-size: 140%;
		}
		p, ul {
			margin-bottom: 1.5em;
		}
		p.notes {
			color: red;
		}
	}
}

子孫セレクタ以外のセレクタのネスト

#main {
	section {
		+ section {
			margin-top: 50px;
		}
		> h1 {
			font-size: 140%;
		}
	}
}

@mediaのネスト

cssの場合はネストが使えないためメディアクエリを各位置が離れてしまって見通しが悪いのだがsassならネストで便利

#main{
         width: 640px;
        @media screen and (max-width: 640px){
                 float: none;
                 width: auto;
        }
}

セレクタの参照 &

ネストして、中に&がある場合一つ上のセレクタが&になる。

#side {
	width: 240px;
	body.top & {
		width: 300px;
	}
	ul.bnr {
		margin-bottom: 10px;
	}
}

また、親セレクタの参照は、疑似クラスやセレクタの前にもかける。

a {
	text-decoration: none;
	&:hover {
		text-decoration: underline;
	}
}

ul.pageNav {
	li {
		margin: 0;
		width: 50%;
		&.prev {
			float: left;
		}
		&.next {
			float: right;
		}
	}
}

変数

変数は$の直後に変数名を指定し、:のあとに値を指定。

$red: #cf2d3a;

.notes{
  color:$red; 
}

演算

sassはcalcなしで演算できる

.ex01{
  width: 500px + 8;
}

.ex02{
  width: 500px * 8;
}

.ex03{
  width: (500px / 8);
}

スタイルの継承 @extend

.box {
  margin: 0 0 30px;
  padding: 15px;
  border: 1px solid #ccc;
}

.item{
  @extend .box;
}

extendの便利な使い方

.extend.scss

.btnBase {
  text-align: center;
  margin: 0 0 10px;
  a {
    display: block;
    padding: 10px 20px;
    background: #999;
    color: #fff;
  }
}

.imgL {
  float: left;
  margin-right: 15px;
}


.style.scss

@import "extend";

ul.btnList {
	li {
		@extend .btnBase;
	}
}
.item {
	width: 300px;
	.photo {
		@extend .imgL;
		margin-bottom: 10px;
	}
	.text {
		overflow: hidden;
		.btn {
			@extend .btnBase;
			text-align: left;
		}
	}
}
.btnBase, ul.btnList li, .item .text .btn {
  text-align: center;
  margin: 0 0 10px;
}
.btnBase a, ul.btnList li a, .item .text .btn a {
  display: block;
  padding: 10px 20px;
  background: #999;
  color: #fff;
}
.btnBase a:hover, ul.btnList li a:hover, .item .text .btn a:hover {
  background: #ccc;
  color: #333;
}

.imgL, .item .photo {
  float: left;
  margin-right: 15px;
}

.item {
  width: 300px;
}
.item .photo {
  margin-bottom: 10px;
}
.item .text {
  overflow: hidden;
}
.item .text .btn {
  text-align: left;
}

あらかじめ用意した@extend専用のsassファイルに書かれている.btnBaseというセレクタのスタイルを2か所で継承している。
また、.btnでは、.btnBaseのtext-align:centerを上書きして値をleftに変えてる。
このように同じスタイルを使ってから一部を上書きしたり、extend.scssの.imgLのスタイルを継承しつつスタイルを追加している。

@extendで継承したセレクタはグループ化されて同じスタイルが適用され、上書きや追加したスタイルだけ別で生成されるため、合理的なソースになる。
cssでも同じスタイルだけカンマ区切りでグループ化すれば、cssファイルが軽くなり、合理的なソースになる。しかし、ルールセットがバラバラになってしまい、どこに何のスタイルが適用されるのかがわかりにくくなる。
その結果、同じスタイルを何度も書くという作業が非常に多くなってしまう。extendはこの問題を解決してくれる。

extend専用のプレースホルダセレクタ

extendはセレクタを継承する機能なので、コンパイル後のcssには必ず継承元のセレクタも生成されていた。しかし、extend専用としてセレクタを書きたい場合など、継承元のセレクタは不要になる場合もある。そういった場合にIDセレクタやクラスセレクタ
#や.の代わりに%を使う。

sass

// @extend 専用のプレースホルダーセレクタ
%boxBase {
	padding: 15px;
	border: 1px solid #999;
}

// プレースホルダーセレクタを継承
.item {
	@extend %boxBase;
	margin-bottom: 20px;
}
section {
	@extend %boxBase;
	margin-bottom: 60px;
}

css

.item, section {
  padding: 15px;
  border: 1px solid #999;
}

.item {
  margin-bottom: 20px;
}

section {
  margin-bottom: 60px;
}

@media内では@extendは使用できない

これを解決するには、@media内に継承したいセレクタを描く必要がある。

@media all and (orientation:landscape) {
	%btnBase {
		display: inline-block;
		padding: 5px 10px;
		background: #eee;
	}
	a {
		@extend %btnBase;
	}
}

柔軟なスタイルの定義が可能なミックスイン @mixin

// ミックスインを定義
@mixin boxSet {
	padding: 15px;
	background: #999;
	color: white;
}

// 定義したミックスインを呼び出し
.relatedArea {
	@include boxSet;
}

引数を使ったミックスイン

引数を使うことで、@extendとの違いがわかる。引数はミックスインで定義した値の一部を変更する機能。
引数を使う場合、ミックスイン名の直後に()を書き、カッコ内に引数をかく。

scss

@mixin kadomaru($value){
  -moz-border-radius: $value;
  -webkit-border-radius: $value;
  border-radius: $value;
}

.box {
  @include kadomaru(3px);
  background: #eee;
}

.item{
  border: 1px solid #999;
  @include kadomaru(5px 10px);
}

css

.box {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: #eee;
}
.item {
  border: 1px solid #999;
  -moz-border-radius: 5px 10px;
  -webkit-border-radius: 5px 10px;
  border-radius: 5px 10px;
}

引数に初期値を定義

引数を使う際に、毎回値を定義するのは面倒。そこで、頻繁に使う値を引数の初期値として定義しておくと、初期値を変えたい時だけ値をかけばすむようになる。
引数の初期値を定義している場合は()を省略できる。省略しない場合は()だけをかく。

@mixin kadomaru($value: 3px) {
	-moz-border-radius: $value;
	-webkit-border-radius: $value;
	border-radius: $value;
}
.boxA {
	@include kadomaru;
	background: #eee;
}
.boxB {
	@include kadomaru();
	background: #f1f1f1;
}

引数を複数指定する

引数は、カンマ区切りで複数指定できる。


scss

@mixin boxBase($margin: 30px 0, $padding: 10px){
  margin: $margin;
  padding: $padding;
}

.boxA{
  @include boxBase;
  background: #eee;
}

.boxB {
  @include boxBase(0 0 50px, 20px);
  background: #f1f1f1;
}

css

.boxA {
  margin: 30px 0;
  padding: 10px;
  background: #eee;
}

.boxB {
  margin: 0 0 50px;
  padding: 20px;
  background: #f1f1f1;
}

カンマを使うプロパティには可変長引数を利用する

先ほど引数を複数指定する方法だったが、cssのプロパティによってはカンマを使うものがある。例えばtext-shadowやbox-shadowが該当するが、これらを値としてそのまま使うとエラーになる。

以下のコードはエラーになるコード

@mixin shadow($value) {
	text-shadow: $value;
}

h2 {
	@include shadow(8px 8px 0 #999, 15px -10px 0 #eee);
}

そこで、次のように引数の跡に「...」と記述する可変長引数を使う。

@mixin shadow($value...){
  text-shadow: $value;
}

h2{
  @include shadow(8px 8px 0 #999, 15px -10px 0 #eee);
}

ifを使って条件分岐

変数「$generalStyle」の値がtrueになっている場合、コンパイルすると汎用的なclass名が付いたスタイルがcssにも生成されるが、falseにすれば生成されなくなる。これであらかじめ用意した汎用的なsassファイルをサイトの要件に合わせてスタイルの切り分けをすることができる。

ifのみの条件分岐

// 汎用的なclassを使うかどうか
$generalStyle: true;

@if $generalStyle{
  .fl{
    float: left;
  }

  .fr{
    float: right;
  }
}

ifとelseifとelseを使って条件分岐

$getStyle: 0;

@mixin style{
@if $getStyle == 1{
margin: 0 0 30px;
padding: 15px;
background: #eee;
}

@else if $getStyle == 2{
margin: 0 10px 15px;
padding: 20px 15px;
border: 2px solid #333;
}

@else{
margin: 0 0 10px;
}
}

.box{
@include style;
}


forで繰り返し処理を行う

@forは繰り返しの命令文のひとつで、@forを使うことで指定した開始の数値から終了の数値まで一つずつ増やしながら繰り返して処理される。
@forの構文は次の2つある。

@for $変数名 from 開始の数値 through 終了の数値{ ←●回以下繰り返す
...(スタイル)...
}

@for $変数名 from 開始の数値 to 終了の数値{ ←●回未満繰り返す
...(スタイル)...
}

@for $value from1 through 3 {
  .throughSample_#{value}{
    margin-bottom: 1px * $value;
  }
}

/*  

*/
#{} 補完について

Sassは補完を行うための構文として#{}を用意している。
変数に入った文字列は通常は値として認識されてエラーが出てしまうので、そのままだとプロパティの値にしか使用できないが、 シャープ記号を前に置いた波括弧 #{}と組み合わせることでセレクタやプロパティ名にも使うことができるようになる
https://tenderfeel.github.io/SassReference/sass-script/interpolation.html


whileでより柔軟な繰り返し処理を行う

@whileは、@forよりも複雑な繰り返し処理ができる。

sass

$value: 300;
@while $value > 200{
  .box_#{$value}{
    width: 2px * $value;
  }
  $value: $value - 32;
}

コンパイルcss

.box_300{
  width: 600px;
}

.box_268{
  width: 536px;
}

.box_236{
  width: 472px;
}

.box_204{
  width: 408px;
}

このように@forでは1つずつ増えながら繰り返し処理が行われてきたが@whileでは増やし方やへらし方を変えることができる。

eachでリスト(配列)の要素に対して繰り返し処理を実行

【構文】
@each 変数名 in リスト{
...スタイル
}

どういうときに使うかというと例えば
cssでこういう感じにかくことがあるはず。

.body-top {
	background-image: url(../img/bg_top.png);
}
.body-about {
	background-image: url(../img/bg_about.png);
}
.body-company {
	background-image: url(../img/bg_company.png);
}
.body-contact {
	background-image: url(../img/bg_contact.png);
}

このように一定のルールでセレクタ名や背景画像のパスが変わる場合に@eachを使うことで、効率的にかける。

$nameList: top, about, company, contact;

@each $name in $nameList{
  .body-#{$name}{
    background-image: url(../img/bg_#{$name}.png);
  }
}

sassのよく使う関数

数値の絶対値を取得するabs()

$margin: -15px;

section {
	margin-left: $margin;
	.item {
		float: left;
		width: 200px;
		margin-left: abs($margin);
	}
}

数値の小数点以下を四捨五入するround()

数値の小数点以下を切り上げるceil()と数値の小数点以下を切り捨てるfloor()

16進数のRGB値に透明度を指定して、RGBA形式に変換できるrgba()

body{
  background: rgba(#6a5468,0.3);
}

明るい色を簡単に作れるlighten()と暗い色を簡単に作れるdarken()

// クロを30%明るく
body{
  background: lighten(000, 30%);
}

2つのカラーコードの中間色をつくれるmix()

リストのN番目の値を取得できるnth()

$nameList: top, about, company;
.item{
  background: url(#{nth($nameList, 2)}.png);
}

// この場合background: url(about.png);となる

自作関数を定義する@function

【文法】
@function 自作関数名($引数){
@return 戻り値;
}

@functionで関数の宣言をし、引数を設定、@returnに戻り値をかく。
ミックスインと似ているが、大きな違いは用途で。ミックスインはルールセットごと使用するのに対し、関数は主に値で使用する。数値の計算や返還などの処理は@function。

オリジナル関数の例

@function halfSize($value){
  @return $value / 2;
}

.boxA{
  width: halfSize(100px);
}

補完(インターポレーション)

インターポレーションは変数が参照できない場所でも使うことができるようにする機能。

$imgPath: '../common/images/';

#main{
  background: url(#{imgPath}main.png);
}

演算しないようにする

>||
p.sampleB{
$font-size: 12px;
$line-height: 30px;
font: #{$font-size]/#{$line-height};
}
|

演算できない場所で演算する

@for $1 from 0 to 2{
  .bt#{$i * 5}{
    margin-top: 5px * $i;
  }
}

// コンパイル後
.mt0 {
  margin-top: 0px;
}
.mt5 {
  margin-top: 5px;
}

@eachを使ってベンダープレフィックスを自動で付与する

transitionとかび-webkitとかもろもろ付けるとき便利!!!!!!!!

// 付与するベンダープレフィックス
$prefixList: -webkit-, -moz-, -ms-, -o-, null;

a{
  @each $prefix in $prefixList{
    #{$prefix}transition: all 0.3s linear;
}
// コンパイル後
a {
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
}


また、この@eachを毎回書くのも手間なので、そういったスタイルはミックスインとして定義しておくとよい。

// mixin

@mixin transition($value) {
	@each $prefix in $prefixList {
		#{$prefix}transition: $value;
	}
}

@mixin border_radius($value: 3px) {
	@each $prefix in $prefixList {
		#{$prefix}border-radius: $value;
	}
}

@mixin box_shadow($value...) {
	@each $prefix in $prefixList {
		#{$prefix}box-shadow: $value;
	}
}

@mixin text_shadow($value...) {
	@each $prefix in $prefixList {
		#{$prefix}text-shadow: $value;
	}
}

// mixinを呼び出す
a {
	@include transition(all 0.5s linear);
}

#main {
	padding: 20px;
	background: #efefef;
	@include box_shadow(1px 1px 5px rgba(black, .3));
	@include border_radius();

	h2 {
		font-size: 160%;
		@include text_shadow(0 1px 0 #fff, 0 -1px 0 #fff);
	}
}

面倒なcss3のアニメーション(keyframes)を簡単にする

まずは、次のようなアニメーション用のミックスインを作る。
@includeした後にスタイルを描くと、そのスタイルが@contentで展開される。

@mixin keyframes($animaName) {
	@-webkit-keyframes $animaName {
		@content;
	}
	@-moz-keyframes $animaName {
		@content;
	}
	@-o-keyframes $animaName {
		@content;
	}
	@-ms-keyframes $animaName {
		@content;
	}
	@keyframes $animaName {
		@content;
	}
}


次にアニメーションを適用したいセレクタにanimation関係のスタイルを各。ここではeachでベンダープレフィックスを付与。

$prefixList: -webkit-, -moz-, -o-, null;

body:after {
	content: "";
	width: 100px;
	height: 50px;
	position: absolute;
	top: 25px;
	right: 10%;
	z-index: 0;
	background: url(../img/neko.png) no-repeat;
	@each $prefix in $prefixList {
		#{$prefix}animation-duration: 3.5s;
		#{$prefix}animation-timing-function: linear;
		#{$prefix}animation-iteration-count: 1;
		#{$prefix}animation-name: headerBGAnima;
	}
}

最後にアニメーションの流れを指定する@keyframesをミックスインの@includeを使って次のように書く。

@include keyframes(headerBGAnima) {
	0% {
		opacity: 0;
		top: 350px;
		right: 78%;
	}
	50% {
		opacity: 1;
		top: 25px;
		right: 10%;
	}
	100% {
		top: 25px;
		right: 10%;
	}
}

IEの対応をしつつ「rem」を使ってフォントサイズを指定

mixinを使う場合

@mixin fz($size){
  font-size: $size + px;
  font-size: ($size / 10) * 1rem;
}

html{
  font-size: 62.5%;
}

.item{
  @include fz(18);
}

.box{
  @include fz(26);
}

上記はミックスインでremを処理したが同じことが@forと@extendを使っても可能。@extendにすることでセレクタがグループ化されるのでより効率的なcssソースになる。

@for i from 8 through 40 {
  %fz#{$i}{
    font-size: $$i + px;
    font-size: ($i / 10) * 1rem;
  }
}

html{font-size: 62.5%;}
aside{@extend %fz18};
.item{@extend %fz18};
.box{@extend %fz18};

コンパイルcss

html {
  font-size: 62.5%;
}
aside, .item {
  font-size: 18px;
  font-size: 1.8rem;
}
.box {
  font-size: 26px;
  font-size: 2.6rem;
}

throughの跡の「終了の値」は実際に使いそうな範囲で最大フォントサイズの値を入れる。プレースホルダセレクタを使っているので不要なclassは生成されない。
asideとitemは同じサイズだったためグループ化される。


clearfixを@extendで活用

$supportIE: true; // IE非対応の場合 false

.clearfix {
	@if $supportIE {
		*zoom: 1;
	}
	&:after {
		content: "";
		display: table;
		clear: both;
	}
}

.item {
	@extend .clearfix;
	background: #eee;
	.image {
		float: left;
		height: 100px;
	}
	.text {
		float: left;
	}
}

@forを使って余白調整用のclassを生成する

$spacePaddingをfalseにすることでpaddingのクラスは生成されない。

$spaceClass: true !default;
$spacePadding: false !default;
$endValue: 10 !default;

@if $spaceClass {
	@for $i from 0 through $endValue {
		.mt#{$i * 5} {
			margin-top: 5px * $i !important;
		}
		.mb#{$i * 5} {
			margin-bottom: 5px * $i !important;
		}
		@if $spacePadding {
			.pt#{$i * 5} {
				padding-top: 5px * $i !important;
			}
			.pb#{$i * 5} {
				padding-bottom: 5px * $i !important;
			}
		}
	}
}

コンパイルcss

.mt0 {
  margin-top: 0px !important;
}
.mb0 {
  margin-bottom: 0px !important;
}
.mt5 {
  margin-top: 5px !important;
}
.mb5 {
  margin-bottom: 5px !important;
}

...(略)...

.mt50 {
  margin-top: 50px !important;
}
.mb50 {
  margin-bottom: 50px !important;
}

リストマーカー用の連番を使ったclass名を作成

%markBase{
  padding-left: 15px;
  background-position: 0em .5em;
  background-repeat: no-repeat;
}

@for $i from 1 through 3{
  .mark_#{$i} {
    @extend %markBase;
    background-image: url(../img/mark_#{$i}.png);
  }
}


コンパイルcss

.mark_1, .mark_2, .mark_3 {
  padding-left: 15px;
  background-position: 0em .5em;
  background-repeat: no-repeat;
}

.mark_1 {
  background-image: url(../img/mark_1.png);
}
.mark_2 {
  background-image: url(../img/mark_2.png);
}
.mark_3 {
  background-image: url(../img/mark_3.png);
}

連番を使ったclassのゼロパディング(0埋め)

$tmp: "";
@for $i from 1 through 15 {
	@if $i < 10 {
		$tmp: "0#{$i}";
	} @else {
		$tmp: $i;
	}
	.mark_#{$tmp} {
		background-image: url(../img/mark_#{$tmp}.png);
	}
}


コンパイルcss

.mark_01 {
  background-image: url(../img/mark_01.png);
}

.mark_02 {
  background-image: url(../img/mark_02.png);
}

...(略)...

.mark_14 {
  background-image: url(../img/mark_14.png);
}

.mark_15 {
  background-image: url(../img/mark_15.png);
}

文字リンクカラーのミックスインを作る

@mixin link-color($normal, $hover){
  color: $normal;
  &:hover{
    color: $hover;
    text-decoration: none;
  }
}

a{
  @include link-color(#f00, #00f);
}


●初期値を定義パターン

$normal: #f00;
$hover: #00f;
@mixin link-color($n:#normal, $h:$hover){
  color: $n;
  &:hover{
    color: $h;
    text-decoration: none;
  }
}

a{
  @include link-color;
}


●色の関数でマウスオーバーの色を変更

@mixin link-color2($n) {
	color: $n;
	&:hover { 
		color: lighten($n, 30%);
		text-decoration: none;
	}
}

a {
  @include link-color2(#f00);
}

複数の値を@eachでループし、ページによって背景を変更

$setBG: top, about, company, contact;

@each $i in $setBG {
	.body-#{$i} {
		background-image: url(../img/bg_#{$i}.png);
	}
}


コンパイルcss

.body-top {
  background-image: url(../img/bg_top.png);
}
.body-about {
  background-image: url(../img/bg_about.png);
}
.body-company {
  background-image: url(../img/bg_company.png);
}
.body-contact {
  background-image: url(../img/bg_contact.png);
}

多次元外烈で複数の値を@eachでループし、ページによって背景を変更

$setBG: top red, about blue, company green, contact yellow;

@each $i in $setBG {
	.body-#{nth($i, 1)} {
		background-image: url(../img/bg_#{nth($i, 2)}.png);
	}
}


コンパイルcss

.body-top {
  background-image: url(../img/bg_red.png);
}

.body-about {
  background-image: url(../img/bg_blue.png);
}

.body-company {
  background-image: url(../img/bg_green.png);
}

.body-contact {
  background-image: url(../img/bg_yellow.png);
}

シンプルなグラデーションのミックスインを作る

@mixin linear-gradient($color:#f00, $way:top, $percent:20%) {
	background-color: $color;
	background-image: -webkit-linear-gradient($way, $color 0%, lighten($color, $percent) 100%);
	background-image: -moz-linear-gradient($way, $color 0%, lighten($color, $percent) 100%);
	background-image: linear-gradient($way, $color 0%, lighten($color, $percent) 100%);
}
.item {
	@include linear-gradient;
}

コンパイルcss

.item {
  background-color: red;
  background-image: -webkit-linear-gradient(top, red 0%, #ff6666 100%);
  background-image: -moz-linear-gradient(top, red 0%, #ff6666 100%);
  background-image: linear-gradient(top, red 0%, #ff6666 100%);
}


上記の引数は下記のように設定している

@include linear-gradient(開始色,方向, 明るくするパーセント);

引数を変えることでグラデーションの色と方向を変えることができる。
定義した開始色に、終了色はlighten()関数で色を明るくしている。

.item{
  @include linear-gradient(#999, left, 50%);
}

retinaディスプレイなど高解像度端末の対応を楽にする

// 付与するベンダープレフィックス
$prefixList: -webkit-, .moz-, -o-, null;

// background-size
@mixin bg_size($w, $h: auto){
  @each $prefix in $prefixList{
    #{$prefix}background-size: $w $h;
  }
}


// 上記ミックスインを使う。

body {
  background: #fff url(../img/bg_logo.png) no-repeat fixed;
  @media screen and (-webkit-min-device-pixel-ratio:1.5), (min-resolution: 2dppx){
    @include bg_size(690px / 2, auto);
  }
}

レスポンシブウェブデザイン対応で楽をするため、@contentを活用する

異なるメディアクエリが複数あるとき数値を忘れがち。そのために数値じゃなくて半角英字でメディアクエリを設定しちゃう。

@mixin yoko{
  @media all and (orientation:landscape){
    @content;
  }
}

@mixin tate{
  @media all and (orientation: portrait) {
    @content;
  }
}

.item {
  width: 50%;
  @include tate{
    width: 100%;
  }
  @include yoko{
    width: 25%;
  }

}
||< 


上記はスマホの縦横でメディアクエリを設定したが、レスポンシブではmax-widthやmin-widthでよく設定する。
その場合のコードは以下。

>||
// ブレイクポイントを設定
$bp-tablet: 1024px;
$bp-sp: 640px;
$bp-iphone: 320px;

// メディアクエリ用のミックスイン
@mixin media($media-width) {
	@if $media-width == sp {
		@media only screen and (max-width: $bp-sp) {
			@content;
		}
	}
	@else if $media-width == iphone {
		@media only screen and (max-width: $bp-iphone) {
			@content;
		}
	}
	@else if $media-width == tablet {
		@media only screen and (max-width: $bp-tablet) {
			@content;
		}
	}
}

#main {
	float: left;
	width: 610px;
	padding: 15px;
	background: #f1f1f1;
	@include media(tablet) {
		float: none;
		margin: 0 auto;
	}
	@include media(sp) {
		width: auto;
		margin: 0 10px;
	}
	@include media(iphone) {
		width: 100%;
		margin: 0;
	}
}

compass 導入

scssファイル

@import "compass";

@import "compass/css3";
@import "compass/typography";
@import "compass/utilities";
@import "compass/reset";
@import "compass/layout";

config.rb

http_path = "/"
css_dir = "css"
sass_dir = "scss"


ディレクト
●scssフォルダ

  • style.scss

cssフォルダ

●config.rb


compass導入参考URL】
http://ozpa-h4.com/2013/03/05/compass-sass-scss-sublime-text/

compass css3モジュール ベンダープリフィックス対応

scssファイル

.box{
	@include border-radius(10px 5px);
}

このscssをかくとcssで以下になる。

.box {
  -moz-border-radius: 10px 5px;
  -webkit-border-radius: 10px;
  border-radius: 10px 5px;
}