0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

SCSS

Last updated at Posted at 2016-01-23

[Variables 変数]
変数を一元管理して使用すればスタイルに一貫性があり修正に強いサイトができる

 <scss側>
 $hensu: #ffffff;
 body {
      color: $hensu;
 }

 ↓ コンパイルする

 <css側>
 body {
      color: #ffffff;
 }

*コーポレートカラーを変数に代入しておくとカラー変更などの時にすぐに対応が出来る

[Nesting ネスト]
モジュール単位でCSSを管理する

.oya {
color: #000;
.kodomo {
color: #111;
.mago {
color: #222;
}
}
}

 ↓ コンパイルする

 <css側>
 .oya {
      color: #000;
 }
 .oya .kodomo {
      color: 111;
 }
 .oya .kodomo .mago {
      color: #111;
 }

[Mixins ミックスイン]

@mixin marumi($hankei) {
-moz-border-radius: $hankei;
-webkit-border-radius: $henkei;
border-radius: $hankei;
}
.box {
border: 1px #000 solid;
@include marumi(4px);
}

 ↓ コンパイルする

 <css側>

.box {
border: 1px #000 solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

これをCompassで記述してみると…

.marumi {
@include border-radius(4px);
}

 ↓ コンパイルする

 <css側>
 .marui {
      -webkit-border-radius: 4px;
      -mozt-border-radius: 4px;
      -ms-border-radius: 4px;
      -o-border-radius: 4px;
      border-radius: 4px;
 }

*最初からMixinsを作るよりもCompassのMixinsを使う方が良い
http://compass-style.org/search/?q=mixins

[Selector Inheritance 継承]

.message-box {
padding: 5px 10px;
border: 1px black solid;
font-size: 14px;
font-weight: bold;
}

 .alert-box {
      @extend .message-box;
      border: 1px red solid;
      color: red;
 }

 ↓ コンパイルする

 <css側>
 .message-box, .alert-box {
      padding: 5px 10px;
      border: 1px black solid;
      font-size: 14px;
      font-weight: bold;
 }
 .alert-box {
      border: 1px red solid;
      color: red;
 }

*モジュール単位でうまく継承できればコードを格段に削減することが出来る

最後に…近い将来CSSでも変数を定義できる日がくるみたい

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?