うたたね

とあるフリーランスのねごと

SassのScss記法

リンクの指定

書き方

  • &:hover
  • &:active

変数の定義

f:id:utataneclub:20190918040102p:plain

変数は利用する箇所より前で定義しないと使えません。
スタイルシートCSS)は上から下に読み込まれていくため、利用したい箇所の下で変数を定義してしまうと、読み込まれるタイミングでは変数がないものと判断されエラーが起きてしまいます。

// 変数$wanko-colorを定義
$wanko-color: #7579a3;


// 文字の色に変数$wanko-colorの値を指定
.title {
    color: $wanko-color;
 }

// 背景色に変数$wanko-colorの値を指定してください
.button {
    background: $wanko-color;
}

mixinとは

f:id:utataneclub:20190918040617p:plain
いくつかのコードを1つにまとめて、複数箇所で簡単に呼び出すことができる機能
同じコードを何度も書く必要がなくなり、無駄なコードを省略することができる

定義

@mixin mixin名 { コード }

f:id:utataneclub:20190918040644p:plain

mixinを使う方法

mixinは、使用したいSassファイルの中で「@include mixin名」とすることで使うことができます。includeすると右の図のように呼び出した箇所にmixinのcssが代入されます。mixin を使用した場合、下記の2つの図は同じコードとなります。
f:id:utataneclub:20190918040750p:plain

circle で丸設定や、kadomaru で角丸設定をしておけば、呼び出すだけで楽ちん。

mixinと引数(ひきすう)

mixinには色などの情報を「引数(ひきすう)」として渡すことができます。
引数はプログラミング全般でよく使われ、追加情報のような役割を果たします。mixinで色などの情報を引数で指定すると、mixin内ではその指定された情報を利用することができます。

f:id:utataneclub:20190918041309p:plain
f:id:utataneclub:20190918041323p:plain

メモ:これの使い方、メリットがいまいちわからない。カッコ内で簡単に指定できるから?別途指定したほうがわかりやすそう。


関数とは

f:id:utataneclub:20190918041813p:plain
関数は様々なプログラミング言語で必ずといっていいほど出てきます。Sassの場合、関数を利用すると「特定の色から50%明るい色を使う」といったことが簡単にできます。

f:id:utataneclub:20190918041846p:plain

// 変数で基本色を定義
$blue: #0ac4ff;
$pink: #fd6eb6;

  .blue2 {
    // 色を$blue、値を10%としてdarken関数を用いてください
    background-color: darken($blue, 10%);
    
  }
  
  .blue3 {
    // 色を$blue、値を20%としてdarken関数を用いてください
     background-color: darken($blue, 20%);
    
  }
  
  .pink2 {
    // 色を$pink、値を10%としてlighten関数を用いてください
    background-color: lighten($pink, 10%);
    
  }
  
  .pink3 {
    // 色を$pink、値を20%としてlighten関数を用いてください
    background-color: lighten($pink, 20%);
    
  }

import

外部のファイルを読み込む「import」について見ていきましょう。
読み込み先のファイル名の先頭には「_(アンダーバー)」を付ける必要があります。また、ファイルを読み込むためには右の図のように「@import "ファイル名"」とします。

import時に指定するファイル名は、右の図のように「_(アンダーバー)」と拡張子(.scss)を省略できる


importのよくある使い方

変数をまとめたファイルを作成し、使いたいファイル内で読み込む


「@import:」はNG。コロンはいらない