Web製作者のためのSassの教科書#

1
// 赤色の変数を宣言
2
$red: #cf2d3a;

1
$width10: 10px;
2
$w-10: 10px;
3
$w_10: 10px;
4
$Ｗｉｄｔｈ１０: 10px;
5
$横幅10px: 10px;
6
$１０px: 10px;
7
$___w10___: 10px;
8
$-_-______----w:10px;
9
$変数はSassの便利な機能の１つです:black;
10

11
// 使えない文字
12
$10width: 10px; // 数字から始まっている
13
$@width10: 10px; // @など使えない記号
14
$--width: 10px; // 連続したハイフンから始まっている

1
$セレクタ名: '.pickupContentsArea, section.main';
2
$IMG_PATH: '../img/bg/';
3

4
#{$セレクタ名} {
5
  background-color: url(#{$IMG_PATH}pickup.png);
6
}

1
// paddingの値が変わった時に変数として持っておくとwidthに反映できる
2
article {
3
  $padding: 7px;
4
  width: $main_width - $padding * 2;
5
}

1
// 子孫セレクタ
2
.item p { ... }
3

4
// 子セレクタ
5
#main > article { ... }
6

7
// 隣接セレクタ
8
h2 + h3 { ... }
9

10
// 間接セレクタ
11
h3 ~ h3 { ... }

1
// エクステンド専用のプレースホルダーセレクタ
2
%boxBase {
3
    padding: 15px;
4
    border: 1px solid #999;
5
}
6

7
// プレースホルダーセレクタを継承
8
.item {
9
    @extend %boxBase;
10
    margin-bottom: 20px;
11
}
12
section {
13
    @extend %boxBase;
14
    margin-bottom: 60px;
15
}

1
// これはコンパイルエラーになってしまう
2
%btnBase {
3
    display: inline-block;
4
    padding: 5px 10px;
5
    background: #eee;
6
}
7

8
@media all and (orientation:landscape) {
9
    a {
10
        @extend %btnBase;
11
    }
12
}
13

14
// こちらに書き直すとうまくいく
15
@media all and (orientation:landscape) {
16
    %btnBase {
17
        display: inline-block;
18
        padding: 5px 10px;
19
        background: #eee;
20
    }
21
    a {
22
        @extend %btnBase;
23
    }
24
}

1
.btn {
2
    @extend %btnBase !optional;
3
}

1
// ミックスインを定義
2
@mixin boxSet {
3
    padding: 15px;
4
    background: #999;
5
    color: white;
6
}
7
// 定義したミックスインを呼び出し
8
.relatedArea {
9
    @include boxSet;
10
}

1
// 定義したミックスインを呼び出し
2
.relatedArea {
3
    @include boxSet;
4
}
5
// 別のルールセットでも呼び出し
6
.pickupArea {
7
    @include boxSet;
8
}

1
.relatedArea {
2
  padding: 15px;
3
  background: #999;
4
  color: white;
5
}
6
.pickupArea {
7
  padding: 15px;
8
  background: #999;
9
  color: white;
10
}

1
// 引数を使ったミックスインを定義
2
@mixin kadomaru($value) {
3
    -moz-border-radius: $value;
4
    -webkit-border-radius: $value;
5
    border-radius: $value;
6
}
7
.box {
8
    @include kadomaru(3px);
9
    background: #eee;
10
}
11
.item {
12
    border: 1px solid #999;
13
    @include kadomaru(5px 10px);
14
}
15
// 可変でプロパティを定義できる

1
@mixin kadomaru($value: 3px) {
2
    -moz-border-radius: $value;
3
    -webkit-border-radius: $value;
4
    border-radius: $value;
5
}
6
.boxA {
7
    @include kadomaru;
8
    background: #eee;
9
}
10
.boxB {
11
    @include kadomaru();
12
    background: #f1f1f1;
13
}

1
.boxA {
2
  -moz-border-radius: 3px;
3
  -webkit-border-radius: 3px;
4
  border-radius: 3px;
5
  background: #eee;
6
}
7
.boxB {
8
  -moz-border-radius: 3px;
9
  -webkit-border-radius: 3px;
10
  border-radius: 3px;
11
  background: #f1f1f1;
12
}

1
@mixin boxBase($margin: 30px 0, $padding: 10px) {
2
    margin: $margin;
3
    padding: $padding;
4
}
5

6
.boxA {
7
    @include boxBase;
8
    background: #eee;
9
}
10
.boxB {
11
    @include boxBase(0 0 50px, 20px);
12
    background: #f1f1f1;
13
}

1
@mixin shadow($value...) {
2
    text-shadow: $value;
3
}
4

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

1
@mixin boxBase($w: 250px, $pd: 15px, $bg_c: #fff, $bd_c: #ccc) {
2
    width: $w;
3
    padding: $pd;
4
    background-color: $bg_c;
5
    border: 1px solid $bd_c;
6
}
7

8
$values: 300px, 20px; // こういう変数定義もできるんだと知った
9

10
.item {
11
    float: left;
12
    @include boxBase($values...);
13
}

1
.main {
2
    @mixin margin {
3
        margin: 50px 0;
4
    }
5
    .item {
6
        @include margin;
7
    }
8
}
9
// あまりスコープを制限する例は無いが一応覚えておく

1
@mixin media($width-media: 768px) {
2
    @media only screen and (max-width: $width-media) {
3
        @content;
4
    }
5
}
6

7
.item {
8
    .image {
9
        float: left;
10
        @include media {
11
            float: none;
12
        }
13
    }
14
    .text {
15
        overflow: hidden;
16
        margin-left: 15px;
17
        @include media {
18
            margin-left: 0;
19
        }
20
    }
21
}

1
.item .image {
2
  float: left;
3
}
4

5
@media only screen and (max-width: 768px) {
6
  .item .image {
7
    float: none;
8
  }
9
}
10

11
.item .text {
12
  overflow: hidden;
13
  margin-left: 15px;
14
}
15

16
@media only screen and (max-width: 768px) {
17
  .item .text {
18
    margin-left: 0;
19
  }
20
}

1
@mixin shadow1 { ～ }
2
@mixin shadow-1 { ～ }
3
@mixin shadow_1 { ～ }
4
@mixin 影 { ～ }
5
@mixin ｓｈａｄｏw { ～ }
6
@mixin _shadow { ～ }
7
@mixin -shadow { ～ }
8

9
// 使えない文字
10
@mixin 01shadow { ～ } // 数字から始まっている
11
@mixin shadow@2 { ～ } // @など使えない記号
12
@mixin --shadow { ～ } // 連続したハイフンから始まっている

1
.block {
2
    .element-A {
3
        width: 80%;
4
    }
5
    @at-root .element-B {
6
        width: 100%;
7
    }
8
}

1
.block .element-A {
2
  width: 80%;
3
}
4

5
.element-B {
6
  width: 100%;
7
}

1
.DataTypes {
2
    /* Number型 */
3
    property: type-of(10%);
4
    /* Color型 */
5
    property: type-of(red);
6
    /* String型 */
7
    property: type-of(sans-serif);
8
    /* Boolean型 */
9
    property: type-of(true);
10
    /* Null型 */
11
    property: type-of(null);
12
    /* List型 */
13
    property: type-of(1.5em 1em 0 2em);
14
    /* Map型 */
15
    $map:(key1: value1, key2: value2);
16
    property: type-of($map);
17
    /* Function型 */
18
    property: type-of(get-function("lighten"));
19
}

1
.DataTypes {
2
  /* Number型 */
3
  property: number;
4
  /* Color型 */
5
  property: color;
6
  /* String型 */
7
  property: string;
8
  /* Boolean型 */
9
  property: bool;
10
  /* Null型 */
11
  property: null;
12
  /* List型 */
13
  property: list;
14
  /* Map型 */
15
  property: map;
16
  /* Function型 */
17
  property: function;
18
}

1
@function example($value) {
2
    @if type-of($value) == number {
3
        処理
4
    }
5
}
6
// typeで判断して関数を作れますよという説明

1
$width: 105px;
2
@function halfSize($value:$width) {
3
    @return round($value / 2);
4
}
5
.boxA {
6
    width: halfSize();
7
}
8
.boxB {
9
    width: halfSize(200px);
10
}

1
@debug 10em + 12em;

1
test.scss:1 DEBUG: 22em

1
// WARNで警告
2
$value: 1000px;
3
@function warnTest(){
4
    @if unitless($value) {
5
        $value: $value + px;
6
    }
7
    @else {
8
    @warn "#{$value}は駄目！$valueに単位は入れないで！";
9
    }
10
    @return $value;
11
}
12
.box {
13
    width: warnTest();
14
}
15

16
// ERROR で処理を中断
17
$value: 1000px;
18
@function errorTest(){
19
    @if unitless($value) {
20
        $value: $value + px;
21
    }
22
    @else {
23
    @error "#{$value}は駄目！$valueに単位は入れないで！";
24
    }
25
    @return $value;
26
}
27
.box {
28
    width: errorTest();
29
}

1
.navigation {
2
    width: 100%;
3
    &__item {
4
        color: #666;
5
        &_state_active {
6
            color: #000;
7
        }
8
    }
9
}

1
.example {
2
    @keyframes anima-example {
3
        0% {
4
            transform: translate(0%, -100%);
5
        }
6
        100% {
7
            transform: translate(0%, 0%);
8
        }
9
    }
10
    animation: anima-example 0.9s linear 500ms 1;
11
}

1
.example {
2
  animation: anima-example 0.9s linear 500ms 1;
3
}
4
@keyframes anima-example {
5
  0% {
6
    transform: translate(0%, -100%);
7
  }
8
  100% {
9
    transform: translate(0%, 0%);
10
  }
11
}

1
@mixin clearfix {
2
    &::after {
3
        content: "";
4
        display: block;
5
        clear: both;
6
    }
7
}
8
// include
9
.item {
10
  @include .clearfix;
11
  background: #eee;
12
  .image {
13
    float: left;
14
    width: 100px;
15
  }
16
  .text {
17
    float: left;
18
  }
19
}

1
// 全体の幅
2
$wrap-width: 960px;
3
// メインエリアの幅
4
$main-width: 640px;
5
// サイドバーの幅
6
$side_width: $wrap_width - $main_width - 20;
7
#contents {
8
    width: $wrap_width;
9
}
10
#main {
11
    width: $main_width;
12
}
13
#side {
14
    width: $side_width;
15
}

1
$spaceClass: true !default;
2
$spacePadding: false !default;
3
$endValue: 10 !default;
4

5
@if $spaceClass {
6
    @for $i from 0 through $space_endValue {
7
        .mt#{$i * 5} {
8
            margin-top: 5px * $i !important;
9
        }
10
        .mb#{$i * 5} {
11
            margin-bottom: 5px * $i !important;
12
        }
13
        @if $spacePadding {
14
            .pt#{$i * 5} {
15
                padding-top: 5px * $i !important;
16
            }
17
            .pb#{$i * 5} {
18
                padding-bottom: 5px * $i !important;
19
            }
20
        }
21
    }
22
}

1
.mt0 {
2
  margin-top: 0px !important;
3
}
4
.mb0 {
5
  margin-bottom: 0px !important;
6
}
7
.mt5 {
8
  margin-top: 5px !important;
9
}
10
.mb5 {
11
  margin-bottom: 5px !important;
12
}
13
...（略）...
14
.mt50 {
15
  margin-top: 50px !important;
16
}
17
.mb50 {
18
  margin-bottom: 50px !important;
19
}
20
// あまり作成しすぎるとCSSコード量も増えるので程々に

1
@mixin link-color2($n) {
2
    color: $n;
3
    &:hover {
4
        color: lighten($n, 30%);
5
        text-decoration: none;
6
    }
7
}
8
a {
9
  @include link-color2(#f00);
10
}

1
$breakpoints: (
2
    xs: "only screen and (max-width: 320px)",
3
    s: "only screen and (max-width: 575px)",
4
    m: "only screen and (max-width: 767px)",
5
    l: "only screen and (max-width: 991px)",
6
    xl: "only screen and (max-width: 1199px)",
7
);
8
@mixin media($breakpoint) {
9
    @media #{map-get($breakpoints, $breakpoint)} {
10
        @content;
11
    }
12
}
13
body {
14
    background-color: white;
15
    @include media(l) {
16
        background-color: blue;
17
    }
18
    @include media(m) {
19
        background-color: green;
20
    }
21
    @include media(xs) {
22
        background-color: red;
23
    }
24
}