ushiroyubi1's blog

お勉強の記録。備忘録。その他。

sass_3-7 sassの@import

sassは分割したscssを一つのcssファイルとして書き出す事が出来る。
ファイルを分割するには「_」から始まる名前にする必要がある。
また、そういった部分的なファイルをpartial と呼ぶらしい。

// _ を省略してインポート
@import "module.scss";

// _ と 拡張子を省略してインポート
@import "module";

// 一階層上からインポート
@import "../module.scss";

// commonフォルダからインポート
@import "common/module";

メインのscssに読み込むには上のように書いていく。
接頭辞や拡張子を省略して書くことが出来る。

また、違う階層から読み込む場合は、下のように書く。

// 一階層上からインポート
@import "../module.scss";

// commonフォルダからインポート
@import "common/module";

こんな使い方も出来るみたい。

sass

.oldArea {
  @import "old";
}
p {
  margin-bottom: 1.5em;
}

書き出したCSSはこうなる。

.oldArea .item {
  margin: 10px;
}
.oldArea p {
  margin: 0 0 10px;
}

p {
  margin-bottom: 1.5em;
}

_old.scssにmarginが指定されていたので、元々のものと合わさってこうなる感じ。


@importはどこに記述してもいいらしい。
最初でも最後でも可能。

分割して、一つのCSSにまとめる事によって管理もしやすく、読み込みも早くなる。

参考


【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる ｜ Developers.IO


【Sassを覚えよう！Vol.7】ファイルを分割して管理を楽に（partialについて） - CSS HappyLife

sass_3-6 演算

sassの演算について勉強した。

こんな風に書くことが出来る。

article {
  width: 560px - 14px;
  padding: 7px;
}

実際に書きだすとこうなる。

article {
  width: 546px;
  padding: 7px;
}

マイナスした分の値が引かれているのが分かる。
下のように色々と足したり引いたり出来る。

// 足し算
.example01 {
  width: 500px + 8;
}
// 掛け算
.example02 {
  width: 500px * 8;
}
// 割り算
.example03 {
  width: (500px / 8);
}


結果、こうなる。

.example01 {
  width: 508px;
}
.example02 {
  width: 4000px;
}
.example03 {
  width: 62.5px;
}

足し算は足し算でも、こんな風に足すことも出来る。

article {
  width: 300px + 5cm;
}

結果、こうなる。

article {
  width: 488.97638px;
}

cmという単位で足せるのに驚いた。
実際使う機会あるのかと思うけど。


変数と一緒に使ったりもできる。

$main_width: 560px;

article {
  width: $main_width - 7 * 2;
  padding: 0 7px;
}

$main_width: 560px;

article {
  $padding: 7px;
  width: $main_width - $padding * 2;
  padding: 0 $padding;
}

2つあるけれど、結果は同じ。

article {
  width: 546px;
  padding: 0 7px;
}

色を指定するときにも活躍したりする。

a {
  color: #000 + #111;
}

$font_color: #333;

a.sample01:hover {
  // 変数 + rgb() 関数
  color: $font_color + rgb(51,51,51);
}
a.sample02:hover {
  // キーワード + 変数
  color: blue + $font_color;
}
a.sample03:hover {
  // 変数 - 数値
  color: $font_color - 3;
}
a.sample04:hover {
  // rgb() 関数 - 数値
  color: rgb(255,255,255) - 10;
}

結果はこうなる。

a {
  color: #111111;
}

a.sample01:hover {
  color: #666666;
}
a.sample02:hover {
  color: #3333ff;
}
a.sample03:hover {
  color: #303030;
}
a.sample04:hover {
  color: whitesmoke;
}


参考


【Sassを覚えよう！Vol.9】変数と演算で効率的に - CSS HappyLife

sass_3-5 変数

sassは変数を作ることができる。

変数を宣言したsass

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

.notes {
  color: $red;
}
.notesBox {
  border: 3px double $red;
}

書きだしたCSS

.notes {
  color: #cf2d3a;
}
.notesBox {
  padding: 20px;
  border: 3px double #cf2d3a;
}

こんな感じで、自由に変数を作ることが出来る。
何度も使いそうな値は変数を作っておくと良さそう。

こんなふうにも使える。

変数を宣言したsass

section {
  $value: 30px;
  margin-top: $value;
  margin-bottom: $value;
}

.item {
  $value: 15px;
  padding: $value;
  p {
    margin-bottom: $value;
  }
}

書きだしたCSS

section {
  margin-top: 30px;
  margin-bottom: 30px;
}

.item {
  padding: 15px;
}
.item p {
  margin-bottom: 15px;
}

これは普通に想像がつくけれど、セレクタの名前やパスも入れれたりする。

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

$セレクタ名 {
  background: url($IMG_PATHpickup.png);
}


参考


Sassの変数使用時に覚えておきたい6つのこと

sass_3-4 コメントアウト

sassには二通りのコメントの書き方がある。

cssにコメントが残らない書き方。

.box {
	//width: 350px;
	min-height: 300px;
	_height: 300px; // IE6対策
}


cssにコメントが残る書き方。


.box {
/*
	width: 350px;
*/
	min-height: 300px;
	_height: 300px; /* IE6対策 */
}


注意喚起したり、メモを残すなら後者を使っていったほうがいいのかな。
前者はあまり使い道がないような気がする。

参考


目指せSassマスター！デザイナーがすぐ実践できる基本テクニック12連発 | 株式会社LIG

sass_3-3 プロパティのネスト

プロパティをネストした。

CSSとsassの比較

.sample {
  border-top: 5px solid #ccc;
  border-bottom-width: 3px;
  border-bottom-style: dotted;
  border-bottom-color: black;
}

.sample_other {
  text-shadow: 1px 1px 0 #fff;
  text-align: right;
  z-index: 5;
}

.item {
  margin: 0;
  margin-left: 10px;
  border: 5px solid #cccccc;
  border-bottom: 0;

CSSで書くとこうなるが、sassで書くとこうなる。

.sample {
  border: {
    top: 5px solid #ccc;
    bottom: {
      width: 3px;
      style: dotted;
      color: black;
    }
  }
}

.sample_other {
  text: {
    shadow: 1px 1px 0 #fff;
    align: right;
  }
  z: {
    index: 5;
  }
}

.item {
  margin: 0 {
    left: 10px;
  }
  border: 5px solid #ccc {
    bottom: 0;
  }
}

こんな感じで書けるんだろうとは思っていたけれど、実際見てみたら、一回は見ておかないと書けないなと思う部分があった。
z-indexはこんな風に書くのか。

書き方が分かれば、まとまりがはっきりしてるから分かりやすい気がするな。

参考

Sass の基本的な使い方のメモ | Web Design Leaves

sass_3-2 親セレクタの参照　＆

親セレクタを参照する場合の記述をやった。

CSSとsassとの比較

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

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

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

CSSで書くとこうなるけれど、sassで親セレクタを参照するとこうなる。

#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;
    }
  }
}

所々についている＆が親セレクタに成り代わっているんですね。

参考

Sassの親セレクタ参照&について - MOL

sass_3-1-3 @media のネスト

@mediaを使う場合の記述を学んだ。

CSSとsassの比較。

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

CSSで書くとこうなるけれど、sassで書くとこうなる。

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

今回もネストする事で短くなって、分かりやすい。
@mediaで#mainを囲うよりよっぽど分かりやすい。#mainのことだとひと目で分かる。
@medeiaはこれから使っていかなくてはならないので、今日やれて良かった。

参考


メディアクエリ - Web developer guide | MDN


HTML - Media Queriesの指定について - Qiita