LoginSignup
3
1

More than 3 years have passed since last update.

@hiro-hiro(hiro hiro)

SCSS　まとめ１（基本文法）

Last updated at Posted at 2021-03-06

SCSSまとめ集

  1. 基本文法
  2. 関数
  3. コンパイル方法

目次

  1. Sass,SCSSとは？
  2. SCSS 基本文法集

1. Sass, SCSSとは？

Sassとは？

  • CSSを拡張したメタ言語(2006年に誕生)の一種。
  • 記法として２種類（SASS, SCSS）の２種類がある。
  • 勘違いしやすいが、SassはCSSを拡張したメタ言語、SASSとSCSSは記法のこと。

SASS, SCSS それぞれの記法

sass
ul
  margin: 10px
  li
    margin-top: 5px
scss
ul{
  margin: 10px;
  li{
    margin-top: 5px;
  }
}

2. SCSS 基本文法集

セレクタ

  • 階層構造で書くことが可能で。
  • 子セレクタに「&」をつける→「&」の箇所が親セレクタになる。
  • 子セレクタに「&」をつけない→親セレクタとスペースになる。
scss
ul{
  margin: 10px;
  li{
    margin-top: 5px;
    &.left{
      margin-left: 5px;
    }
  }
}

//トランスパイル後
ul {
  margin: 10px;
}
ul li {
  margin-top: 5px;
}
ul li.left {
  margin-left: 5px;
}

コメント

  • １行ずつ or 複数行コメントアウトすることができる。
scss
main {
  //１行ずつコメント
  //border: 1px solid #000;

  /* 複数行コメント */
  /*
  margin: 10px;
  */
}

変数

  • 「$変数名:〜;」で宣言できる。
  • 共通させたいスタイル（色、長さ、フォント等）がある時に使うと効果的。
  • どこからでも参照可能な変数をグローバル変数、ブロック内のみ参照可能な変数をローカル変数と呼ぶ。
scss
$basic_color: #000000;
$basic_font-size: 14px;
.car {
  color: $basic_color;
  font-size: $basic_font-size;
}

//トランスパイル後
.car {
  color: #000000;
  font-size: 14px;
}
  • 変数を値の一部として使用したい場合
scss
$img_path: '../img/';

.item {
  background: url(#{$img_path}back.png);
}

//トランスパイル後
.item {
  background: url(#../img/back.png);
}

※変数の上書きについて

以下、３種類の上書きについて記載。

  • グローバル変数はそのまま、ローカル変数によりブロック内部のみ値が変わる
scss
$width: 100px;

.box1{
  $width: 200px;
  width: $width;
}
.box2{
  width: $width;
}

//トランスパイル後
//グローバル変数の値は変わらない
.box1{
  width: 200px;
}
.box2{
  width: 100px
}
  • !default　同名の変数が既に定義されてある場合、上書きしない
scss(!defaultを使用)
$width: 100px;

.box1{
  $width: 200px !default;
  width: $width;
}

//トランスパイル後
.box1{
  width: 100px;
}
  • !global　同名の変数が既に定義されてある場合、上書きする
$width: 100px;

.box1{
  $width: 200px !global; 
  width: $width;
}
.box2{
  width: $width;
}

//トランスパイル後
.box1{
  width: 200px;
}
.box2{
  width: 200px;
}

演算

  • 加算、減算、乗算、除算、剰余ができます。
scss
$base_width: 100px;

.base{
  /* 加算 */
  width: $base_width + 10px;
  /* 減算 */
  width: $base_width - 5px;
  /* 乗算 */
  width: $base_width * 2;
  /* 除算 */
  width: $base_width / 2;
  /* 剰余 */
  width: $base_width % 3;
}

//トランスパイル後
.base{
  /* 加算 */
  width: 110px;  //(100px + 10px)
  /* 減算 */
  width: 95px;   //(100px - 5px)
  /* 乗算 */
  width: 200px;  //(100px * 2)
  /* 除算 */
  width: 50px;   //(100px / 2) 
  /* 剰余 */
  width: 1px;    //(100px % 3)
}

インポート

  • 他のSCSSファイルをインポートすることができます。
scss
//色々な書き方が可能
@import url(common.scss);
@import url("common.scss");
@import "common.scss";
@import 'common.scss';

データ型

  • 以下のようなデータ型ある
    • 数値(Number)型
    • 真偽(Boolean)型
    • 色(Color)型
    • 文字列(String)型
    • 配列(List)型
    • 連想配列(Map)型
    • 関数(Function)型
    • Null型

以下、それぞれの型の例

scss

//数値(Number)型
$number1: 10;
$number2: 1.1;
$number3: 100px;
$number4: 50%;
$number5: 2em;

//真偽(Boolean)型
$boolean1: true;
$boolean2: false;

//色(Color)型
$color1: blue; 
$color2: #ff0000;
$color3: rgba(255, 255, 0, 0.5);
$color4: hsla(110, 100%, 30%, 70%);

//文字列(String)型
$string1: 'Sass';   //シングルクォートで囲まれた文字
$string2: "scss";   //ダブルクォートで囲まれた文字
$string3: auto;

//配列(List)型
$list1: 'hoge' 'fuga' 'piyo';   //スペースで区切る
$list2: red, blue, yellow;      //カンマで区切る
$list3: (10px)(20px)(30px);     //カッコで区切る
$list4: ('hoge' 'fuga' 'piyo'); //カッコで囲んでもOK
$list5: ['hoge' 'fuga' 'piyo']; //カギカッコで囲んでもOK
$list6: [[black, lime, fuchsia, olive], [blue, aqua], [yellow, red]]; //多重配列もOK

//連想配列(Map)型
$map1:(
  google:'https://www.google.com/',
  yahoo:'https://www.yahoo.co.jp/',
  amazon:'https://www.amazon.co.jp/'
);

//関数(Function)型
@function myFunction($val: 1){
  @return $val * 100;
}

//Null型
$null1: null;

ちなみに、配列(List)型や連想配列(Map)型の値は、以下のような記述で取得できる。

scss(配列)
$colors: red, blue, yellow;

//配列　単体を取得
main {
  color: nth($colors, 1);  //配列のインデックス番号は1からスタートする
}

//トランスパイル後
main {
  color: red;
}

//配列　複数を取得
@each $color in $colors {
    .#{$color}-bg {
        background: #{$color};
    }
}

//トランスパイル後
.red-bg {
  background: red;
}
.blue-bg {
  background: blue;
}
.yellow-bg {
  background: yellow;
}
scss(連想配列)

$colors: (
  color1: red,
  color2: blue,
  color3: yellow
);

//連想配列　単体を取得
main{
  color: map-get($colors, 'color1');
}

//トランスパイル後
main{
  color: red;
}

//連想配列　複数を取得
//ここで書かれてある$key, $colorは、連想配列のKeyとValueに対応してある(任意の変数名を設定可能)
@each $key, $color in $colors {
    .#{$key} {
        color: $color;
    }
}

//トランスパイル後
.color1 {
  color: red;
}
.color2 {
  color: blue;
}
.color3 {
  color: yellow;
}

条件分岐

  • 他言語同様、if~elseを使い条件分岐することができる。
  • 条件演算子、論理演算子は以下の通り。

条件演算子

演算子 意味
== 左辺と右辺が等しい
!= 左辺と右辺が等しくない
> 左辺は右辺より大きい
< 左辺は右辺より小さい
>= 左辺は右辺以上
<= 左辺は右辺以下

論理演算子

演算子 意味
and かつ
or または
not 否定
scss
$var: 1;

main{
  @if $var == 0{
    color: red;
  }
  @else if $var == 1{
    color: blue;
  }
  @else {
    color: yellow;
  }
}

//トランスパイル後
main{
  color: blue;
}

繰り返し

  • 他言語同様、繰り返し処理を行うことができる
  • @for, @while, @eachの３種類。
scss(for文)
//@for
//@for ~ through
@for $val from 0 through 2{
  .frame_#{$val}{
    z-index: $val;
  }
}
//@for ~ to
@for $val from 0 to 2{
  .frame_#{$val}{
    z-index: $val;
  }
}

//トランパイル後
.frame_0{
  z-index: 0;
}
.frame_1{
  z-index: 1;
}
.frame_2{
  z-index: 2;
}
scss(while文)
//@while
$val: 3;

@while $val > 0{
  .frame_#{$val} {
    z-index: $val;
  }
  $val: $val - 1;
}

//トランスパイル後
.frame_3{
  z-index: 3;
}
.frame_2{
  z-index: 2;
}
.frame_1{
  z-index: 1;
}
scss(each文)
//@each
$images: 'hoge' 'fuga' 'piyo';

@each $image in $images{
  .box-#{$image}{
    background-image: url(../img/#{$image}.png);
  }
}

//トランスパイル後
.box-hoge{
  background-image: url(../img/hoge.png);
}
.box-fuga{
  background-image: url(../img/fuga.png);
}
.box-piyo{
  background-image: url(../img/piyo.png);
}

スタイルの継承

  • @extendを使用し、他セレクタのスタイルを継承することが可能
scss(extendを使用)
.box1{
  width: 100px;
}
.box2{
  @extend .box1;
  height: 200px;
}

//トランスパイル後
.box1, .box2{
  width: 100px;
}
.box2{
  height: 200px;
}
  • @mixinを使用することで引数を指定したスタイルの継承を行うことも可能（関数についてはまとめ2で解説）
scss(mixinを使用)
@mixin box($width: 100px, $bgcolor: #000){
  width: $width;
  background: $bgcolor;
}
.box1{
  @include box;
}
.box2{
  @include box(200px, #ff0000);
}

//トランスパイル後
.box1{
  width: 100px;
  background: #000;
}
.box2{
  width: 200px;
  background: #ff0000;
}
3
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
Sign upLogin
3
1