Web Design Leaves

//SASS (.scss)
.foo {
  border: {
    top: 1px solid #999;
    bottom: 2px dotted #666;
  }
}

/* CSS コンパイル後*/
.foo {
  border-top: 1px solid #999;
  border-bottom: 2px dotted #666;
}

//SASS (.scss)
.bar {
  margin: 10px {
    top: 0;
  }
}

/* CSS コンパイル後*/
.bar {
  margin: 10px;
  margin-top: 0;
}

//SASS (.scss)
.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

/* CSS コンパイル後*/
.sidebar {
  width: 300px;
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

//SASS (.scss)
$padding: 10px;  //ドキュメントルート

.foo {
  $value : 30px; //ルールセット内
  margin: $value;  //参照可能 
  p {
    padding: $padding; //参照可能 
    margin: $value;  //参照可能  
  }
}

.bar {
  margin:  $value;  //参照不可（エラー）
}

//SASS (.scss)
#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;  //参照可能 （エラーにならない）
}

/* CSS コンパイル後*/
#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

//SASS (.scss)
.foo {
  $theme-color: green; //ローカル変数
  color: $theme-color; // green
}

$theme-color: red; //グローバル変数

.bar {
  $theme-color: green !default; //!defaultフラグを指定
  color: $theme-color; //!defaultの前にグローバル変数が定義されているのでred
}

/* CSS コンパイル後*/
.foo {
  color: green;
}

.bar {
  color: red;
}

//_extend.scss
%roundCorner {
  $borderRadius: 6px !default; // !defaultフラグを指定
  border-radius: $borderRadius;
}

//_setting.scss
$borderRadius: 4px;

//base.scss
@import "setting";
@import "extend";

.foo {
  @extend %roundCorner;
}

/* CSS コンパイル後*/
.foo {
  border-radius: 4px;
}

//SASS (.scss)
@import 'foo';
@import 'bar.scss';
@import '_baz';
 
//カンマで区切ってまとめて読み込むことも可能
@import "foo", "bar", "baz";
 
//階層が違う場合はディレクトリ名を指定  
@import "contents/foo";  
@import "contents/_bar";

//SASS (.scss)
@import "reset";   
// メインのスタイル
body { 
   ・・・
}  
・・・    
// 印刷用スタイル の読み込み 
@import "print";

//_foo.scss
a {
  color: #333;
}

p {
  margin:1em;
}

//bar.scss
#main {
  @import "_foo";
}

/* CSS コンパイル後　bar.css*/
#main a {
  color: #333; 
}
#main p {
  margin: 1em; 
}

@if 条件 {
　　条件にあっている場合に実行する処理
}

@if 条件 {
　　条件にあっている（true）場合に実行する処理
}@else {
    条件にあっていない（false）場合に実行する処理
}

@if 条件１ {
　　条件１にあっている場合に実行する処理
}@else if 条件２ {
    条件１にあっていない場合で、条件２にあっている場合に実行する処理
}@else {
    条件１、条件２にあっていない場合に実行する処理
}

//SASS (.scss)
$supportIE: true;  //IE をサポートする場合

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

/* CSS コンパイル後　IE をサポートする場合*/
.clearfix {
  *zoom: 1;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

//SASS (.scss)
$supportIE: false;  //IE をサポートしない場合

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

/* CSS コンパイル後　IE をサポートしない場合*/
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

//SASS (.scss)
$type: tree;
 
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == fire {
    color: red;
  } @else if $type == tree {
    color: green;
  } @else {
    color: black;
  }
}

/* CSS コンパイル後*/
p {
  color: green;
}

//SASS (.scss)
@for $変数名 from 開始の数値 through 終了の数値 {
  処理を記述
}

//SASS (.scss)
@for $変数名 from 開始の数値 to 終了の数値 {
  処理を記述
}

//SASS (.scss)
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

/* CSS コンパイル後*/
.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

//SASS (.scss)
@for $value from 1 to 5 {
  .marginTop_#{$value * 10} {
    margin-top: 10px * $value;
  }
}

/* CSS コンパイル後*/
.marginTop_10 {
  margin-top: 10px;
}
.marginTop_20 {
  margin-top: 20px;
}
.marginTop_30 {
  margin-top: 30px;
}
.marginTop_40 {
  margin-top: 40px;
}

//SASS (.scss)
@while 繰り返しを継続する条件 {
  スタイルなどの指定（処理を記述）
  繰り返しの条件を設定
}

//SASS (.scss)
$value: 10;

@while $value < 50 {
  .marginTop_#{$value} {
    margin-top: $value + px;
  }
  $value: $value + 10;
}

/* CSS コンパイル後*/
.marginTop_10 {
  margin-top: 10px;
}
.marginTop_20 {
  margin-top: 20px;
}
.marginTop_30 {
  margin-top: 30px;
}
.marginTop_40 {
  margin-top: 40px;
}

//SASS (.scss)
$list : foo, bar, baz;
$list : foo bar baz;
$list : (foo) (bar) (baz);

//SASS (.scss)
@each $変数名 in リスト {
  実行する処理
}

//SASS (.scss)
$classList: top, about, contact;

@each $class in $classList {
  .#{$class} {
    background-image: url(../images/bg_#{$class}.png);
  }
}

/* CSS コンパイル後*/
.top {
  background-image: url(../images/bg_top.png);
}

.about {
  background-image: url(../images/bg_about.png);
}

.contact {
  background-image: url(../images/bg_contact.png);
}

<ul>
  <li class="top_color"><a href="#">HOME</a></li>
  <li class="about_color"><a href="#">ABOUT</a></li>
  <li class="contact_color"><a href="#">CONTACT</a></li>
</ul>

//SASS (.scss)
$classList: top, about, contact;  //クラス名のリスト
$color: #446D9E, #489069, #E36707;  //色の値のリスト

ul{
  li{
    @each $class in $classList{
      $index_key: index($classList, $class);  //インデックスを取得
      &.#{$class}_color{
        a{
          color: nth($color, $index_key);
          //取得したインデックスで n 番目の色を指定
        }
      }
    }
  }
}

/* CSS コンパイル後*/
ul li.top_color a {
  color: #446D9E;
}
ul li.about_color a {
  color: #489069;
}
ul li.contact_color a {
  color: #E36707;
}

//SASS (.scss)
$map: (
    key1: value1,  // key1にvalue1を設定
    key2: value2,
    key3: value3,
);

//以下のように記述しても同じ
$map: (key1: value1, key2: value2, key3: value3,);

//SASS (.scss)
@each $キーの変数名, $値の変数名 in マップ {
  実行する処理
}

//SASS (.scss)
$classColorMap: (top:#446D9E, about:#489069, contact:#E36707);

ul{
  li{
    @each $class, $color in $classColorMap{
      &.#{$class}_color{
        a{
          color: $color;
        }
      }
    }
  }
}

/* CSS コンパイル後*/
ul li.top_color a {
  color: #446D9E;
}
ul li.about_color a {
  color: #489069;
}
ul li.contact_color a {
  color: #E36707;
}

//SASS (.scss)
$width: 100%;

div {
  width: $width / 3;
}

.foo {
  width: ceil($width / 3);  //切り上げ
}

.bar {
  width: floor($width / 3);  //切捨て
}

.baz {
  width: round($width / 3);  //四捨五入
}

/* CSS コンパイル後*/
div {
  width: 33.33333%;
}

.foo {
  width: 34%;
}

.bar {
  width: 33%;
}

.baz {
  width: 33%;
}

//SASS (.scss)
.foo {
  background: rgba(#8D9EB8, 0.7);
}

.bar {
  background: rgba(orange, 0.3);
}

/* CSS コンパイル後*/
.foo {
  background: rgba(141, 158, 184, 0.7);
}

.bar {
  background: rgba(255, 165, 0, 0.3);
}

lighten($color, $amount)
darken($color, $amount)

//SASS (.scss)
.foo {
  background: lighten(#000, 30%);
}

.bar {
  background: darken(hsl(25, 100%, 80%), 20%);
}

$bg_color: #999;

.baz {
  background: darken($bg_color, 25%);
}

div {
  background-image :linear-gradient($bg_color, darken($bg_color, 20%));
}

/* CSS コンパイル後*/
.foo {
  background: #4d4d4d;
}

.bar {
  background: #ff8833;
}

.baz {
  background: #595959;
}

div {
  background-image: linear-gradient(#999999, #666666);
}

mix($color1, $color2, [$weight:50%])

//SASS (.scss)
.foo {
  background: mix(pink, red, 65%);
}

/* CSS コンパイル後*/
.foo {
  background: #ff7d84;
}

//SASS (.scss)
.foo {
  background: mix(rgba(#70B1ED, 0.8), #F7B03B);
}

/* CSS コンパイル後*/
.foo {
  background: rgba(193, 176, 130, 0.9);
}

str-insert($string, $insert, $index)

//SASS (.scss)
str-insert("abcd", "X", 1) => "Xabcd"
str-insert("abcd", "X", 4) => "abcXd"
str-insert("abcd", "X", 5) => "abcdX"

//SASS (.scss)
str-insert("abcd", "X", -1) => "abcdX"
str-insert("abcd", "X", -4) => "aXbcd"

str-index($string, $substring)

//SASS (.scss)
str-index(abcd, a)  => 1
str-index(abcd, ab) => 1
str-index(abcd, X)  => null
str-index(abcd, c)  => 3

str-slice($string, $start-at, [$end-at])

//SASS (.scss)
str-slice("abcd", 2, 3)   => "bc"
str-slice("abcd", 2)      => "bcd"
str-slice("abcd", -3, -2) => "bc"
str-slice("abcd", 2, -3)  => "b"

//SASS (.scss)
$list: foo, bar, baz;
nth($list, 2) => bar
nth($list, -1) => baz

//SASS (.scss)
index(1px solid red, solid) => 2
index(1px solid red, dashed) => null
index((width: 10px, height: 20px), (height 20px)) => 2

//SASS (.scss)
$list: 10px 20px 30px 40px;

.foo {
  margin: set-nth($list, 2, -20px);
}
.bar {
  margin: set-nth($list, -2, -50px);
}
.baz {
  margin:$list;
}

/* CSS コンパイル後*/
.foo {
  margin: 10px -20px 30px 40px;
}
.bar {
  margin: 10px 20px -50px 40px;
}
.baz {
  margin: 10px 20px 30px 40px;
}

//SASS (.scss)
$list1: foo, bar, baz;
$list2: aaa bbb ccc;
.sample {
    &:before {
        content: "#{join($list1, $list2)}";
    }
}

/* CSS コンパイル後*/
.sample:before {
  content: "foo, bar, baz, aaa, bbb, ccc";
}

//SASS (.scss)
append(10px 20px, 30px) => 10px 20px 30px
append((blue, red), green) => blue, red, green
append(10px 20px, 30px 40px) => 10px 20px (30px 40px)
append(10px, 20px, comma) => 10px, 20px
append((blue, red), green, space) => blue red green

//SASS (.scss)
$list: (10px 5px 5px #8D9EB8,);
$extra: 20px 10px 10px #B0F5C9;

.foo {
  box-shadow: append($list, $extra, comma);
}

.bar{
  box-shadow: $list;
}

/* CSS コンパイル後*/
.foo {
  box-shadow: 10px 5px 5px #8D9EB8, 20px 10px 10px #B0F5C9;
}

.bar {
  box-shadow: 10px 5px 5px #8D9EB8;
}

$class_colors: (
  home: #E8E4E4,
  about: #EFF6FB,
  contact: #E4F8EF,
  news: #F8FBE3
);

//SASS (.scss)
$class_colors: (
  home: #E8E4E4,
  about: #EFF6FB,
  contact: #E4F8EF,
  news: #F8FBE3
);

@each $class, $color in $class_colors {
  .#{$class} {
    background-color: $color;
  }
}

/* CSS コンパイル後*/
.home {
  background-color: #E8E4E4;
}
.about {
  background-color: #EFF6FB;
}
.contact {
  background-color: #E4F8EF;
}
.news {
  background-color: #F8FBE3;
}

//SASS (.scss)
$sample: ("foo": #FFF, "bar": #000, "baz": #CCC);

.sample1 {
  color:map-get($sample, "foo");  // => #FFF
}
.sample2 {
  color:map-get($sample, "bar");  // => #000 
}
.sample3 {
  color:map-get($sample, "xxx");  // => null 
}

/* CSS コンパイル後*/
.sample1 {
  color: #FFF;
}
.sample2 {
  color: #000;
}
/*.sample3 は null なのでプロパティは書き出されません。*/

//SASS (.scss)
$map1: (foo:1, bar:2, baz:3,);

$map2: (aaa:4, bbb:5, foo:6,);

$map3: map-merge($map1, $map2);

//$map3 => (foo:6, bar:2, baz:3, aaa:4, bbb:5);

//SASS (.scss)
$map: (foo:1, bar:2, baz:3);

$map1: map-remove($map, foo);  // (bar:2, baz:3,)

$map2: map-remove($map, bar, baz); // (foo:1)

//SASS (.scss)
$map: (foo:1, bar:2, baz:3);

.map {
    content: map-keys($map);
}

/* CSS コンパイル後*/
.map {
  content: foo, bar, baz;
}

//SASS (.scss)
$map: (foo:1, bar:2, baz:3);

.map {
    content: map-values($map);
}

/* CSS コンパイル後*/
.map {
  content: 1, 2, 3;
}

//SASS (.scss)
map-has-key(("foo": 1, "bar": 2), "foo") => true
map-has-key(("foo": 1, "bar": 2), "baz") => false

//SASS (.scss)
$map: (foo:#EEE, bar:#AAA, baz:#000);

p {
  @if map-has-key($map, foo) {
    color: map-get($map, foo);
  } @else {
    color: red;
  }
}

/* CSS コンパイル後*/
p {
  color: #EEE;
}

//SASS (.scss)
$map: (foo:1, bar:2, baz:3);

.foo {
  content: inspect($map);
}

/* CSS コンパイル後*/
.foo {
  content: (foo: 1, bar: 2, baz: 3);
}

//SASS (.scss)
type-of(100px)  => number
type-of(asdf)   => string
type-of("asdf") => string
type-of(true)   => bool
type-of(#fff)   => color
type-of(blue)   => color

//SASS (.scss)
unit(100) => ""
unit(100px) => "px"
unit(3em) => "em"
unit(10px * 5em) => "em*px"
unit(10px * 5em / 30cm / 1rem) => "em/rem"
/*SASS のサイトでは上記は "em*px/cm*rem" を返すように書かれていますが、
実際には異なるようです。*/

//SASS (.scss)
unitless(100) => true
unitless(100px) => false

//SASS (.scss)
$val: 100;

@if(unitless($val)) {
  $val: $val + "px";
}

.foo {
  width: $val ;
}

/* CSS コンパイル後*/
.foo {
  width: "100px";
}

//SASS (.scss)
comparable(2px, 1px) => true
comparable(100px, 3em) => false
comparable(10cm, 3mm) => true

@function 関数名($引数) {
  // 処理の記述（必要であれば）
  @return 戻り値;
}

//SASS (.scss)
@function _changeSize($value, $size) {
  @return $value * $size;
}

.foo {
  width: _changeSize(200px, 1/3) ;
}
.bar {
  height: _changeSize(50px, 1.6);
}

/* CSS コンパイル後*/
.foo {
  width: 66.66667px;
}

.bar {
  height: 80px;
}

//SASS (.scss)
@function _changeSize($value, $size) {
  @return floor($value * $size);
}

.foo {
  width: _changeSize(200px, 1/3) ;
}

/* CSS コンパイル後*/
.foo {
  width: 66px;
}

//SASS (.scss)
$grid-width: 60px;
$gutter-width: 20px;

@function _grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

.container {
  width: _grid-width(12);
  margin: 0 auto;

  .main {
    width: _grid-width(8);
    float: left;
    margin-right: $gutter-width;
  }

  .sidebar {
    width: _grid-width(4);
    float: left;
    margin-right: $gutter-width;
  }
}

/* CSS コンパイル後*/
.container {
  width: 940px;
  margin: 0 auto;
}
.container .main {
  width: 620px;
  float: left;
  margin-right: 20px;
}
.container .sidebar {
  width: 300px;
  float: left;
  margin-right: 20px;
}

//SASS (.scss)
// @function _linearGradient　グラデーションの値を返す
// @param    {Color} $baseColor
// @param    {Number} percentage 0-100% default: 20%
// @return   {String} linear-gradient valuse

@function _linearGradient($baseColor, $amount: 20%) {
  @return "linear-gradient(" + $baseColor + "," + darken($baseColor, $amount) + ")";
}

.foo {
  background-image :_linearGradient(#CCCCCC);
}

/* CSS コンパイル後*/
.foo {
  background-image: "linear-gradient(#CCCCCC,#999999)";
}

//SASS (.scss)
@debug 10em + 3em * 4;

// コマンドプロンプト
style.scss:2 DEBUG: 22em

//SASS (.scss)
$list1: foo, bar, baz;
$list2: aaa bbb ccc;
@debug join($list1, $list2);

// コマンドプロンプト
style.scss:4 DEBUG: foo, bar, baz, aaa, bbb, ccc

//SASS (.scss)
@function _myMixColor($color1, $color2) {
  $mixColor1: ($color1 + $color2);
  @debug $mixColor1;
  $mixColor2: $mixColor1/2;
  @debug $mixColor2;
  @return $mixColor2;
}

.foo {
  color: _myMixColor(#999999, #AAAAAA);
}

// コマンドプロンプト
style.scss:4 DEBUG: white
style.scss:6 DEBUG: gray

//SASS (.scss)
@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  }
  position: relative; left: $x; top: $y;
}

.foo {
  @include adjust-location(10, 20);
}

// コマンドプロンプト
WARNING: Assuming 10 to be in pixels  //警告メッセージ
on line 4 of C:/.../sass/style.scss, in `adjust-location'
from line 15 of C:/.../sass/style.scss

WARNING: Assuming 20 to be in pixels //警告メッセージ
on line 8 of C:/.../sass/style.scss, in `adjust-location'
from line 15 of C:/.../sass/style.scss

/* CSS コンパイル後*/
.foo {
  position: relative;
  left: 10px;
  top: 20px;
}

//SASS (.scss)
@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @error "$x には単位が必要です： #{$x}";
  }
  @if unitless($y) {
    @error "$y には単位が必要です： #{$y}";
  }
  position: relative; left: $x; top: $y;
}

.foo {
  @include adjust-location(10, 20);
}

// コマンドプロンプト
error sass/style.scss (Line 4: $x には単位が必要です： 10)

/* CSS コンパイル後*/
/*
Error: $x には単位が必要です： 10
    on line 4 of C:/.../sass/style.scss, in `adjust-location'
    from line 13 of C:/.../sass/style.scss
    ........

//SASS (.scss)
@mixin adjust-location($x, $y) {
  position: relative; left: $x; top: $y;
}

.foo {
  @include adjust-location(10, 20);
}

/* CSS コンパイル後*/
.foo {
  position: relative;
  left: 10;   //単位なし
  top: 20;    //単位なし
}