絶対に挫折しないScss(超丁寧)

11036 ワード
Sass scss Sass テキストリンク

Scssとは？

SCSSとSASSは、Sass（Syntactically Awesome Style Sheets）というRuby製のCSSメタ言語です。メリットはたくさんありますので、利用者は多いです。プログラミング言語にかなり似ているので、変数やmixin,ループ処理も行えます。Cssでの記述量と比較すると半分程度で済むかもしれません。それぞれ、Scssで出来ることを説明していきますね。

ネスト構造(これはHTML構造に似てる)

style.css
header{
width:100%;
position:relative;
clear:both;
}

header h1{
float:left;
}

header.imformation{
float:right;
width:350px;
}

↓Scssだとこんなにコンパクトに記述出来るのです！

style.scss
header{
 width:100%;
 position:relative;
 clear:both;

 & h1{
 float:left;
 }

 &.imformation{
 float:right;
 width:350px;
 }
}

変数(プログラミング言語に近い感覚)

style.css
section h2{
color:#6cc6c4;
}

.text p{
border:1px solid #6cc6c4;
}

ul.top li > p{
background-color:#6cc6c4;
}
/*何度も色番号を手入力しないといけないのってめんどくさいですよね？*/
style.scss
/* 色番号を変数に代入してしまう＝使い回しが何度でも可能だし、修正がしやすいですよね。
cssだけだと、全部書き直しもしくは、置換するしかない。 */
$color:#6cc6c4;

section h2{
color:$color;
}

.text p{
border:1px solid $color;
}

ul.top li > p{
background-color:$color;
}

mixin

style.scss
@mixin .maru{
border-radius:10px;
border:0.5px dashed #000;
}

div.bg{
@include .maru;
background-color:navy;
}

/*もしくは*/
.maru{
border-radius:10px;
border:0.5px dashed #000;
}

div.bg{
@extend .maru;
background-color:navy;
}
/*extendの場合、mixinを使用する必要が無い！*/
style.css
.maru{
border-radius:10px;
border:0.5px dashed #000;
}

div.bg{
border-radius:10px;
border:0.5px dashed #000;
background-color:navy;
}

ループ処理

style.scss
@for $j from 1 through 3 {
  /* #は文字列を表現しています。*/
  li:nth-child(#{$j}) {width: 10px * $i;}
}
style.css
li:nth-child(1){
width: 10px;
}

li:nth-child(2){
width: 20px;
}

li:nth-child(3){
width: 30px;
}

Scssの導入について

環境構築っていうやつです。ここで躓く方はいると思います。(私はここに3ヶ月くらい悩んでいました涙)　結論から申し上げると、visual studio codeを使っている方であれば、かなり容易です！！

❶まずやることは、vscodeをインストールしましょう。
(https://code.visualstudio.com/)

❷インストールが終わったら、拡張機能であるLive Sass Compilerをインストールしてくる。

❸アプリケーション下部に表示されているWatch Sassをクリックする。(写真だと、watching...に
なっている部分)

❹拡張子が .scssのファイルを作成し、保存する。

この時に、画面左下のWatch Sassをクリックすると、自動的にファイル名.css.mapファイルが
生成されます。

ーーーこれで、コンパイルという作業が終わり、Scssが、cssに自動的に変換されます。ーーー


⬆︎ちなみに、HTMLファイルでScssファイルを読み込む場合ですが、必ず、コンパイルされたCssファイルを読み込んでください！　私は、Scssファイルを読み込んでおり、あれ？コンパイル上手くいってない？とプチパニックになりましたっけ笑
みなさんはすぐに出来ると思いますので、是非、挑戦してみてくださいね！