初心者のためのSASS ( SCSS )

SASSとは何か
SASSは、プロセッサのスクリプト言語で、解釈されたり、コンパイルされたりします.
ブラウザはsassをロードしません、しかし、それはSSSで書かれます、そして、CSSに輸出されます.(ブラウザがSASSを読むことができないからです.

SASSとSCSS
SASSに利用できる2つの構文があります.

SCSSの例
CSSのようなブラケットを使うので、CSSに似ています.この構文を使用するファイルは.scss 拡張.

//SCSS
$font-stack: Helvetica, sans-serif;
$primary-color : #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

例
SASSは、セレクタの入れ子を示すために括弧ではなくインデントを使い、プロパティを分離するためにセミコロンではなく改行を使用します.この構文を使用しているファイル.sass 拡張.

//Sass
$font-stack: Helvetica, sans-serif
$primary-color : #333

body 
  font: 100% $font-stack
  color: $primary-color

設定
私は以前Sass(SCSS)を自分で使ってきました.私はNPMを通してそれをインストールしました、しかし、クラスでは我々はRuby SassとLive SASSコンパイラ

これをインストールし、コードを再起動します.(もしあなたがノードsassを使うつもりなら、install node-sass )

ファイルの分離とコメントの書き込み
あなたのような各部分の別のファイルを持つことができます_header.scss , _home.scss or _variable.scss , _mixin.scss . それは完全にuptoあなたにですが、あなたはそれらの分離scssファイルを1つのファイルにインポートする必要がありますstyle.scssファイルをその関数またはレイアウトで区切る場合、コードを維持し再利用するのは簡単です.


理由は、ファイル名の前にunderscorechenです.
ファイル名の前にアンダースコアを追加しない場合は、分離されたSCSSファイルはすべてコンパイルされます.
しかし、ファイル名の前にアンダースコアを追加すると、それはメインファイルの一部であることをSassに知らせることができ、そのファイルはコンパイルされず、使用することができます@import
コメント

/* This comment will be visible in CSS even after compiling. */
// This won't be compiled, only visible in Scss

営巣
私は個人的にこれはSCSSの良いものの一つだと思う.
これらのコードを入れ子にすることで、HTMLのようなCSSコードの構造を見ることができます.これは、コードを読みやすくなります.

nav {
    background : #C39BD3;
    padding : 10px;
    height: 50px;
    ul {
        display: flex;
        list-style : none;
        justify-content: flex-end;
        li {
            color: white;
            margin-right: 10px;
        } 
    }
}

ネスティングを使用する理由?
CSSを使用すると、親要素の継承要素にスタイルを与えたい場合は、必要に応じて親を選択する必要があります.
CSSの例

.info-list div {
  display: flex;
  font-size: 14px;
  color: #4f4f4f;
}

.info-list div dt {
  font-weight: 700;
  margin-right: 7px;
}

しかし、あなたはSCSS

.info-list {
  div {
    display: flex;
    font-size: 14px;
    color: #4f4f4f;
    dt {
      font-weight: 700;
      margin-right: 7px;
    }
  }
}

※注意!あまりにも深すぎる方法でネスティングを避けてください.(3レベル以上が深い場合は、CSSにコンパイルされた場合には不必要なセレクターを使用することはできません).

営巣特性
プロパティをネストすることもできます.
それはクラスに背景スタイルを与えることです.add-iconプロパティをネストすることができますbackground 名前background-image , background-position , など
また、CORIN (:)をネストプロパティに使用する必要があります.

add-icon {
  background : {
    image: url("./assets/arrow-right-solid.svg");
    position: center center;
    repeat: no-repeat;
    size: 14px 14px;
  }
}

上のコードは以下のようにCSSにコンパイルされます.

.add-icon {
  background-image: url("./assets/arrow-right-solid.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

アンド・アンパサンド
&外部セレクタを参照します.また、後続のような擬似要素、ホバー、擬似要素を追加することもできます.
SCSS

.box {
  // pseudo classes
  &:focus{} 
  &:hover{}
  &:active{}
  &:first-child{} 
  &:nth-child(2){}
  // pseudo elements
  &::after{} 
  &::before{} 
}

CSS

.box:focus{} 
.box:hover{}
.box:active{}
.box:frist-child{}
.box:nth-child(2){}
.box::after{}
.box::before{}

例-スタイルを与えるli そして、それは擬似要素と擬似クラスです.

ul {
  li {
    //pseudo element
    &:hover {
      background: white;
      cursor: pointer;
    }
    //pseudo class
    &:last-child {
      border-bottom: 2px solid black;
    }
  }
}

また、ボックスの黄色またはボックスレッドのような同じ単語で起動する場合は、クラスをネストすることができます.“ボックス”は、この方法を行うことができます使用される一般的な単語です.
SCSS

.box {
  &-yellow {
    background: #ff6347;
  }
  &-red {
    background: #ffd700;
  }
  &-green {
    background: #9acd32;
  }
}

CSS

.box-yellow {
  background: #ff6347;
}
.box-red {
  background: #ffd700;
}
.box-green {
  background: #9acd32;
}

アットルート
入れ子になったコードから取得できます.@at-rootそれの中のすべては、通常の巣作りを使う代わりに、文書のルートで発されます.
SCSS

.article {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  .article-content {
    font-size: 14px;
    opacity: 0.7;
    @at-root i {
      opacity: 0.5;
    }
  }
}

CSS

.article {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.article .article-content {
  font-size: 14px;
  opacity: 0.7;
}
/* You can see this isn't nested. It's separated from the nested code. */
i { 
  opacity: 0.5;
}

変数
変数を与えることができることは1つずつ値を変更する必要はありません.これは、コードを維持することがはるかに容易になります.
※注意!あなたが無差別に変数を宣言するならば、それがクラッシュすることができることに気づいてください.それが正当な理由があるときだけ、変数を宣言してください.あなたがチームにいるならば、あなたは変数を宣言する前に十分にこれらについて話す必要があります.

ときに変数を使用するには?

値を繰り返し使用する場合.(値を記憶せずにスタイル要素を指定することができますが、変数を指定します.

既存の値を変更する必要がある場合.(変数のない多くの異なる要素/プロパティで使用されますが、1つずつ変更する必要がありますが、その値を変数に設定する場合、変数の値を変更する必要があります.

sassの変数の宣言

/* bg */
$bgColor : #FFF

繰り返し使用する場合は、変数を使用して簡単にスタイルを設定できます.

// colour
$red: #ee4444;
$black: #222;
$bg-color: #3e5e9e;
$link-color: red;
$p-color: #282A36;

// font-size
$font-p: 13px;
$font-h1: 28px;

// font
$base-font: 'Noto Sans KR', sans-serif;

body {
    background-color : $bg-color;
    font-size : $font-p;
    font-family : $base-font;
}

h1 {
    font-size: $font-h1;
    color: $black;
}

p {
    font-size: $font-p;
    color: $black;
}

a {
    color: $link-color;
}

変数の型

番号( 1 .

string (./img/cutedog . png ", bold , left , uppercase , ...)

色(緑、角、FFF、RGBA(255、0、0、5)……)

boolean ( true , false )

NULL

リスト

$font-size : 10px 12px 16px; // list of font-size
$image-file : photo_01, photo_02, photo_03 // list of image-file

// can also use this way - ruby sass
// it iterates from index 1 in sass(*** not 0)
nth(10px 12px 16px, 2); // 2nd value of $font-size is 12px
nth([line1, line2, line3], -1); // if it's negative, it iterates from right to left. Therefore, -1 of $image-file is line3

マップ

$font-weights: ("regular": 400, "medium": 500, "bold": 700); // map of font-weights. (key-value pair)

// use this way - ruby sass
map-get($font-weights, "medium"); // 500
map-get($font-weights, "extra-bold"); // null

リストと地図について

リスト

// You can declare value of list using , or whitespace
$sizes: 40px, 50px, 80px;
// above code works the same with $sizes: 40px 50px 80px;
$valid-sides: top, bottom, left, right;

***リストのインデックスは1から始まります

組み込みリスト機能

append(list,value,[s]) : リストに値を追加する関数.

index(list, value) : リストの値のインデックスを返す関数.

nth(list, n) : リストのインデックスの値を返す関数.
例

// Scss
$valid-sides: left, center, right;

.screen-box {
    text-align : nth($valid-sides, 1);
}

/* CSS */
.screen-box {
  text-align: left;
}

マップ
mapは値をkeyとして保存します.キーはユニークである必要があります!

組み込みマップ機能

map-get(map, key) : キーの値を返す関数.

map-get(map) : マップのキーを返す関数

map-values(map) : マップの値を返す関数
例

// Scss
$font-sizes: ("h1": 45px, "h2": 19px, "p": 16px);

section {
    h2 {
        font-size : map-get($font-sizes, "h2");// 19px
    }
}
map-get($font-size, "h3");// null

/* CSS */
section h2 {
    font-size : 19px;
}

文字列と数値も機能を持ちます.もっと見るstring functions in Sass

スコープ
ローカル変数とグローバル変数があります.

ローカル変数

.info{
        // local variable
    $line-normal : 1.34; 
    font-size : 15px;
    line-height : $line-normal;
    text-align : right;
  span{
        line-height : $line-normal;
    }
}

グローバル変数

//Scss
// global variable
$font-p : 15px; 

.main-box{
    p {
        font-size : $font-p;
    }
    a {
        font-size : $font-p;
      color : blue;
        text-decoration : none;
    }
}

.main-box p {
  font-size: 15px; 
}

.main-box a {
  font-size: 15px;
  color: blue;
  text-decoration: none; 
}

また、使用することができます!グローバル変数にローカル変数を作成するグローバル.

$mycolor: #ffffff !global;

もっとvariables in Sass

演算子

a < b : AがBより小さいかどうかチェックする

a <= b : AがBと同じか、Bより小さいかチェックする

a > b : Aが100より大きいかどうかをチェックする

a >= b : AがBであるか、Bより大きいかどうかチェックしてください

@debug 100 > 50; // true
@debug 10px < 17px; // true
@debug 96px >= 1in; // true
@debug 1000ms <= 1s; // true

エラー
両方がユニットを持ち、それらのユニットが同じでない場合、エラーが発生します.
でも!それはあなたがユニットと数と数と比較するときに罰金です.
例

@debug 100px > 10s;
// Error: Incompatible units px and s

@debug 100 > 50px; // true
@debug 10px < 17; // true
// Not Error

a == b : AとBが同じかどうかチェックしてください.

a !== b : Aがあるかどうかチェックしてください.

例

// number
@debug 1px == 1px; // true
@debug 1px != 1em; // true
@debug 1 != 1px; // true
@debug 96px == 1in; // true

// string
@debug "Poppins" == Poppins; // true
@debug "Open Sans" != "Roboto"; // true

// colour
@debug rgba(53, 187, 169, 1) == #35bba9; // true
@debug rgba(179, 115, 153, 0.5) != rgba(179, 115, 153, 0.8); // true

// list
@debug (5px 7px 10px) != (5px, 7px, 10px); // true
@debug (5px 7px 10px) != [5px 7px 10px]; // true
@debug (5px 7px 10px) == (5px 7px 10px); // true

a + b

a - b

a * b

a / b

a % b : A/Bの剰余

@debug 10s + 15s; // 25s
@debug 1in - 10px; // 0.8958333333in
@debug 5px * 3px; // 15px*px
@debug 1in % 9px; // 0.0625in (1in == 96px)

エラー

@debug 100px + 10s;
// Error: Incompatible units px and s.

@debug 100px / 2;
// 50px (Not Error)

文字列
+演算子とA、Bがすべて文字列の場合、A、Bを組み合わせ、結合文字列を返します.
いずれも文字列ではなくても文字列と組み合わせることができます.

@debug "Helvetica" + " Neue"; // "Helvetica Neue"
@debug sans- + serif; // sans-serif
@debug sans - serif; // sans-serif

@debug "Elapsed time: " + 10s; // "Elapsed time: 10s";
@debug true + " is a boolean value"; // "true is a boolean value";

ブーリアン

not : trueの場合はfalseを返します.falseの場合はtrueを返します.

and : 両方がtrueの場合にtrueを返します.偽の値を返します.

or : 両方が偽の場合にfalseを返します.それらのうちの1つがそうであるならば、trueを返してください.本当です.

@debug not true; // false
@debug not false; // true

@debug true and true; // true
@debug true and false; // false

@debug true or false; // true
@debug false or false; // false