Sassを基本からまとめてみた【入門】 #CSS

Sassとは?

Sassとは「Syntactically Awesome StyleSheets」の略称で、日本語では「サース」と読む。
各ワード「Syntactically＝構文的に」「Awesome＝凄い・素晴らしい」
「StyleSheets＝スタイルシート」で成り立つSassは「構文的に凄いスタイルシート」と直訳できる。

Sassを利用するメリット

ネスト（入れ子構造）で記述できる
&(アンパサンド)の使い方
変数が利用できる
.scssファイルを分割管理できる
コードを複数箇所で使用できる
メディアクエリ(ミックスイン（@mixin))機能が利用できる
カラーコードを便利に管理できる

「Visual Studio Code」というテキストエディタで、
編集画面で「！」と打つとHTMLの雛形が表示される。

VScodeでインストール

『Sass』『Live Sass』

ソースコードを入力したら、下のバーの『Watch Sass』を押し、
コンパイルをする

コンポーネント・ファイル構成

  styles
   ├── _function.scss
   ├── _variables.scss
   ├── style.scss
   └── index.html

_function.scss

@mixin flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

_variables.scss

//変数を宣言
$mainColor: pink;
$leftContentColor: orange;
$leftTextColor: cornsilk;
$rightContentColor: aquamarine;
$rightTextColor: cornsilk;

style.scss

//変数を宣言
// $mainColor: pink;
// $leftContentColor: orange;
// $leftTextColor: cornsilk;
// $rightContentColor: aquamarine;
// $rightTextColor: cornsilk;
@import './variables';
@import './functions';

// @mixin flexCenter {
//   display: flex;
//   justify-content: center;
//   align-items: center;
// }

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: aqua;
}

main {
  width: 100%;
  height: 100%;
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  @include flexCenter;
  background-color: $mainColor;
}

.content {
  display: flex;
  //入れ子ができる
  .leftContent {
    width: 650px;
    height: 470px;
    background-color: $leftContentColor;
    border-radius: 10px;
    margin-right: 20px;
    position: relative;

    h2 {
      color: $leftTextColor;
      position: absolute;
      top: 40px;
      right: 30px;
      font-size: 50px;
      cursor: pointer;
      transition: all 0.2s;
      &:hover {
        font-size: 65px;
        color: $mainColor;
      }
    }
  }

  .rightContent {
    width: 300px;
    position: relative;

    p {
      position: absolute;
      top: 120px;
      height: 400px;
      border-radius: 10px;
      background-color: $rightContentColor;
      padding: 15px;
      color: $rightTextColor;
    }
    button {
      position: absolute;
      top: 300px;
      left: 30px;
      padding: 13px;
      border: none;
      border-radius: 3px;
      background-color: gray;
      color: $rightTextColor;
      cursor: pointer;
      transition: all 0.2s;

      &:hover {
        font-size: 20px;
        color: $mainColor;
      }
    }
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sass Tutorial</title>
    <link rel="stylesheet" href="./styles/style.css" />
  </head>
  <body>
    <main>
      <div class="content">
        <div class="leftContent">
          <h2>Sass Tutorial</h2>
        </div>
        <div class="rightContent">
          <p>Lorem ipsum dolor sit amet.</p>
          <button>And More</button>
        </div>
      </div>
    </main>
  </body>
</html>

参考サイト

【Sass入門】CSSを圧倒的に楽にコーディングできるSassを学んでみよう
 【Sass入門】意味から使い方、メリットまで基本を紹介
 SASSの超便利な使い方【HTML/CSSコーディング】