Saasを学習してみた

はじめに

絶賛HTMLとCSSを復習中！

今回は Saasという言語を学び始めたのでアウトプットします

Saasとは

公式サイト

Saasとは**「Syntactically Awesome StyleSheet」**の略で

Syntactically（文法的に）

Awesome（最高・素晴らしい）

StyleSheet（スタイルシート）

という言語です。

公式抜粋
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

略
Sassは、世界で最も成熟した、安定した、強力なプロフェッショナルグレードのCSS拡張言語です。

めちゃくちゃ凄そう！

自分なりに簡単にまとめてみると・・・

CSSをより便利に記述できるようにしたもので、cssでいっぱい記述するよりも完結に記述ができ、関数を設定してコードを再利用したりできます。

しかし、ブラウザ上ではSaasは読み込む事は出来ません。

そのため必ずSaasからCSSに変換してブラウザー上に反映させます。

変数

CSSの場合、

.style.css

# container {
    color: white;
}

.btn {
    color: white;
}

CSSでは変数は定義出来ないがSaasの中では定義する事ができます。
共通の数値や色の指定などに便利だと思います。

style.scss

//色を定義
$cWhite: white;

# container {
    color: $cWhite;
}

.btn {
   background-color: $cWhite;
}

ネスト

入れ子という言葉はrailsでよく使いました。

CSSでは1つのブロックの中に他のブロックを含める事は出来ませんが、Saasの中では異なるブロックを含める事ができます。

本来のCSSの記述

style.css

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
 
nav li {
    display: inline-block;
}
 
nav a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}

Saasの場合

style.scss

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { 
     display: inline-block; 
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

上記のように、Sassではネストで書くことができ、コードの可読性が向上します。

終わり

もっともっと良いメリットがあると思いますが、これから学習していきます！