基本のSacc

プロパティのネスト

.item{
    margin: auto {
        top:10px;
    }
}

上のように1箇所だけcssを変更する時はプロパティをネストします。 下記のようになります。

.item {
  margin: auto;
    margin-top: 10px;
}

ハイフンがあるプロパティは全てネストできる

font:{
    family: sans;
    weight: 300;
    size: 1.6rem;
}

css

.item {
  font-family: sans;
  font-weight: 300;
  font-size: 1.6rem; 
}

パスを変数にする

色などを変数にするのはもちろん画像パスを変数にすると便利

$img_path:'../img/';

.item{
    background: url("#{$img_path}concept_bk.png");
}

css

/* CSS Document */
.item {
  background: url("../img/concept_bk.png"); }

エクステンド

.sec{
    color: red;
}

.item{
    @extend .sec;
}

/* CSS Document */
.sec, .item {
  color: red; }

同じルール内で複数継承することもできます。 エクステンドは属性セレクタ・連結セレクタ・擬似クラス・擬似要素なども使えます。

input[type="text"]{
    padding-left: 10px;
}
a:hover{
    color: red
}
.item{
    @extend input[type="text"];
    @extend a:hover;
}

/* CSS Document */
input[type="text"], .item {
  padding-left: 10px; }

a:hover, .item {
  color: red; }

エクステンド専用のプレースホルダーセレクタ

%item{
    color: red;
}

.item{
    @extend %item;
}

/* CSS Document */
.item {
  color: red; }

ミックスイン

/* sass Document */
//基本
@mixin set{
    padding: 10px;
}
//引数有り
@mixin kadomaru($value){
    border-radius: $value;
}
//引数に初期値を設定
@mixin base($margin:30px 0, $paddingTop:20px){
    margin: $margin;
    padding-top: $paddingTop;
}
.box{
    @include set;
    @include kadomaru(10px);
    @include base;
}

/* css Document */
.box {
  padding: 10px;
  border-radius: 10px;
  margin: 30px 0;
  padding-top: 20px; }

繰り返し処理

//３回以下繰り返す
@for $value from 1 through 3{
    .through_#{$value}{
        margin-bottom: 1px * $value;
    }
}
//３回未満繰り返す
@for $value from 1 to 3{
    .to_#{$value}{
        margin-bottom: 1px * $value;
    }
}

/* css Document */
.through_1 {
  margin-bottom: 1px; }

.through_2 {
  margin-bottom: 2px; }

.through_3 {
  margin-bottom: 3px; }

.to_1 {
  margin-bottom: 1px; }

.to_2 {
  margin-bottom: 2px; }

配列

$list:top, about, menu;

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

/* css Document */
.body-top {
  background: url("../img/top.png"); }

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

.body-menu {
  background: url("../img/menu.png"); }

N番目の値を取得　nth()

$list:top, about, menu;

.body{
    background: url("../img/#{nth($list,2)}.png");
}

/* css Document */
.body {
  background: url("../img/about.png"); }

キーで指定して値を取得

$list:(
    top:#000,
    about:#001,
    menu:#fff,
);

.body{
    background: map-get($list,top);
}

/* css Document */
.body {
  background: #000; }

多次元配列

$sns:(
    colors:(
        twitter: red,
        fasebook: blue,
        insta: green,
    ),
    sizes:(
        sm:25%,
        md:50%,
        lg:75%,
    )
);

@each $name, $color in map-get($sns, 'colors'){
    .sns_#{$name}{
        background: url("../img/#{$name}.png");
        color: $color;
    }
}
@each $size, $width in map-get($sns, 'sizes'){
    .#{$size}{
        width: $width;
    }
}

.sns_twitter {
  background: url("../img/twitter.png");
  color: red; }

.sns_fasebook {
  background: url("../img/fasebook.png");
  color: blue; }

.sns_insta {
  background: url("../img/insta.png");
  color: green; }

.sm {
  width: 25%; }

.md {
  width: 50%; }

.lg {
  width: 75%; }

セレクタをルートに戻せる@at-root

.block{
    .a{
        width: 100%;
    }
    @at-root .b{
        width: 80%;
    }
}

.block .a {
  width: 100%; }
.b {
  width: 80%; }

ネストしたセレクタを@at-rootとselecotr-replaceを使って置き換える

.block{
    .itemA{
        a{
            background: red;
            @at-root #{selector-replace(&,'.itemA','.itemB')}{
                background: green;
            }
        }//a
    }//.itemA
}//block

.block .itemA a {
  background: red; }
  .block .itemB a {
    background: green; }