デイトラWeb制作中級編Day7～8『sass』学習記録

Day7～8で学んだこと「Sass」の書き方・使い方

【Day7】CSSの上位互換！Sassを学習しよう

Sassとは

CSSを楽に早く書くための言語。CSSが管理しやすくなる。

Sassには「Sass」と「Scss」という2種類の記述方法がある。

CSSと書き方が似ている「Scss」が主流。

代表的な機能

入れ子

・親要素の中に子要素、孫要素を書いていける

・入れ子にすることで、記載するコーディング量が減り、なおかつアイテムごとのまとまりとして把握しやすくなる

.items {
	padding: 0;
	margin: 0;
	list-style: none;

	li {
	   display: inline-block;

	   a {
	     text-decoration: none;
	     color: #333;
	     display: block;
	     padding: 12px;
	   }
	}
}

＆でつなげる擬似要素

・親要素の値を引き継ぐ

a {
	color: #333;
	text-decoration: none;
	font-weight: 400;
	
	&:hover {
		opacity: 0.6;
	}
	
	&.active {
		font-weight: 700;
	}
}

変数

・カラーコードや、文字サイズ、フォントファミリーなどを一元管理できる

$layout-width-inner: 1024px; 
//　インナー幅を定義
$color-main: #3F51B5; 
// メインとなるカラーの定義
$color-accent:#E81919; 
// アクセントカラーの定義
$color-text: #333333; 
//文字カラーの定義

四則演算

・幅をパーセンテージ(%)で出したり、line-heightの値を出すために使うことが多い。

（例）横幅が、980px。右側のメインカラムが680px、サイドカラムを200pxとする時に、これを％に直す

• メインカラム → width: (680 / 980) * 100%
• サイドカラム → width: (200 / 980) * 100%

@extend

・定義したスタイルを全て継承し、使いまわせる

.base-border{
  border:1px solid #ddd;
}
.box1{
  @extend .base-border;
  width:100%;
}
.box2{
  @extend .base-border;
  width:50%;
}

@mixin

・定義したスタイルの一部変更ができる

@mixinで定義し、@includeで呼び出す

引数を使わない場合

@mixin baseBorder{
    border:1px solid #ccc;
}
.box1{
    @include baseBorder;
    width: 100%;
}
.box2{
    @include  baseBorder;
    width: 50%;
}

引数を使う場合

@mixin baseBorder($borderSize:1px, $borderType:solid, $borderColor:#ccc){
    border:$borderSize $borderType $borderColor;
}
.box1{
    @include baseBorder();
    width: 100%;
}
.box2{
    @include  baseBorder($borderColor:#f90);
    width: 50%;
}

mixinを使ったメディアクエリの設定方法

//マップ型変数breakpointsを定義
$breakpoints: (
//キー　　値
  'sp': 'screen and (max-width: 767px)', 
  'pc': 'screen and (min-width: 768px)' 
) !default;

//メディアクエリ用のmixinを定義。
@mixin mq($breakpoint: sp) {
//map-get(マップ型変数, キー)で値を取得
  @media #{map-get($breakpoints, $breakpoint)} {
    //この中をカスタムできる
    @content;
  }
}

//使用例
.header {
  height: 100px; //ＰＣ用の表示

  @include mq(sp) {
    height: 60px; //スマホの時だけ高さを60pxに！
  }
}

/*このように @media screen and (width: 767px) { } を書かなくても、
PC用のcssを書きながらスマホ用の表示を書き足すことができる */

function

・自分で関数を定義する

引数を使わない場合

@function colorRed() {　　
// 関数colorRedを定義
  @return #00f
}

.test {
  color: colorRed();
}

CSSにコンパイルすると以下のようになる

.test {
  color: #00f;
}

引数を使う場合

@function colorCode($value) {    
  @return $value
}

.test {
  color: colorCode(green);
　// 引数をgreenと記述
}

CSSにコンパイルすると以下のようになる。
引数に指定したプロパティがそのまま反映される。

.test {
  color: green;
}

【Day8】デイトラ簡易版サイトのCSSをSassで書き直してみよう

・Live Sass Compilerの導入

Sassで書いた内容をCSSに変換する『コンパイル』という処理をするため

・ベンダープレフィックスとは

CSSの新しいプロパティに付けて、各ブラウザが対応できるようにする接頭辞。

ベンダープレフィックス	対応ブラウザ
-ms-	Internet Explorer
-webkit-	Google Chrome / Safari
-moz-	Firefox / Mozilla

・Autoprefixerという拡張機能で自動入力できる。

・Sassファイルの分割

保守性が高まるのでファイルは分割する方が良い

style.scssで読み込む際は、「@import」を使ってアンダーバー ”_”と「.scss」を除いたファイル名を指定

@import "button";
@import "heading";

※@importは廃止される予定

【デイトラ簡易版サイトの書き換えで使ったSass】

まとめ

Sassで一番感動したのメディアクエリ！！

とにかくレスポンシブ対応が楽になりました！

変数は使いこなすのが難しそうですが、まずは簡単な事だけでも使って行こうと思います！！