CSS3 SCSS SASS

？

 
Web Tips.
Booskanium's
Booskanium's Web Tips.

いつかはSCSSを使ってみようかなと思いつつ、SCSSの学習が億劫で使っていませんでした。
そこでSCSSの概要を読みながら、CSS3との比較を行った落書きです。
※比較内容は実際に動作確認していないので、間違っていたらm(_ _)m

CSS3 SCSS SASS の比較

  • CSS3
    SCSS
    SASS

  • 入れ子表現

    HTMLの「 <p class="text">contentは<a href="～">ここ</a></p>」のStyleを指定の場合

    インデントさせることである程度入れ子関係が表現できる。少々冗長でもある。
    .text{
  font-size: 20px;
}
  .text a{
    color: white;
  }
     CSS Nesting Moduleが2021-08に公開されて、2023-08に主要ブラウザの対応が出揃った。しかし、まだまだ現役の古いOS環境のブラウザが置いてけぼりなので時期尚早かもしれない。
    .text{
  font-size: 20px;
  & a{
    color: white;
  }
}
     「&」はクラス指定なら不要だが付ける癖をつけといた方が無難
    ｛｝括りで入れ子して記述できるので簡素で解りやす。
    .text{
  font-size: 20px;
  a{
    color: white;
  }
}
    Pythonの様にインデントで入れ子を表現して終わりのセミコロン無し。簡素な記述だが慣れないと奇異に感じる。なんらかの終止符が無いと落ち着かない落書き人には少々馴染めない。
    .text
  font-size: 20px
  a
    color: #ffffff

  • グローバルCSS変数

    :root {
  --bkcolor: gray;
}
#test{
  background-color: var(--bkcolor);
}
#box {
  background-color: var(--bkcolor);
}
     JavaScriptでStyleのCSS変数が扱える。
    ・エレメント.style.backgroundColor = 'var(--bkcolor)';
    ・document.documentElement.style.setProperty('--bkcolorr', 'silver');
    等でcss変数を操作できることから、ページ表示後も柔軟性が高い。 
    $bkcolor: gray;
#test{
  background-color: $bkcolor;
}
#box {
  background-color: $bkcolor;
}
     cssへのビルド後は固定値になりCSS変数になるわけでない。
    ということで静的なページなら便利だが、ページ表示後の柔軟性は低い。 
    $bkcolor: gray
#test
  background-color: $bkcolor
#box
  background-color: $bkcolor
     
  • :root {
  --attention: rgba(198, 83, 140, 0.88);
}
.atten {
  border: 1px solid var(--attention);
}
     
    $base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);
.atten {
  border: 1px solid $border-dark;
}
     
    $base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);
.atten
  border: 1px solid $border-dark

  • 擬似要素

    .star {
  font-size: 10px;
}
.star::before {
  content: "★";
}
    今なら 
    .star {
  font-size: 10px;
  &::before {
    content: "★";
  }
}
     
    .star {
  font-size: 10px;
  &::before {
    content: "★";
  }
}
     
    .star
  font-size: 10px
  &::before
    content: "★"

  • 擬似クラス

    root {
  --anker-color: blue;	
  --anker-hover-color: white;	
  --anker-hover-bk: blue;	
}
a {
  color: var(--anker-color);
}
  a:hover {
    color: var(--anker-hover-color);
    background-color: var(--anker-hover-bk);
  }
     今なら 
    root {
  --anker-color: blue;	
  --anker-hover-color: white;	
  --anker-hover-bk: blue;	
}
a {
  color: var(--anker-color);
  &:hover {
    color: var(--anker-hover-color);
    background-color: var(--anker-hover-bk);
  }
}
     
    $anker-color: white;
$anker-hover-color: white;
$anker-hover-bk: blue;
a {
  color: $anker-color;
  &:hover {
    color: $anker-hover-color;
    background-color: $anker-hover-bk;
  }
}

  • スタイルの継承

    スタイルの継承元のクラスに続いて、上書きするクラスを指定する。 
    <div class="contentMold content">content</div>

.contentMold {
  height: 100%;
  width: 100%;
  background-color: #fff;
}
.content {
  background-color: #ff0211;
}
    SCSSではHTMLのclass指定が冗長にならない。

    @extendで置換して雛形を取り込み
    <div class="content">content</div>

.contentMold {
  height: 100%;
  width: 100%;
  background-color: #fff;
}
.content {
  @extend .contentMold {
    background-color: #aaa;
  }
}

    SCSSと同じことはHTMLタグのclass属性にクラス名を複数書けば良いように思う。
    それとCSS自体の継承ルールを活かせば良いとは思う。 
    %shared {
  border: 1px solid blue;
  padding: 10px;
  color: navy;
 }
 .target1{
	@extend %shared;
 }
 .target2{
  	@extend %shared;
  	border-color: green;
 }

    一見良さそうだけれどCSSの流儀とは違う方法で継承を行うのって頭が混乱する落書き人の思考？

  • @mixin→@includeで引数で指定する方法
    @mixin contentMold($bgColor:#fff) {
  height: 100%;
  width: 100%;
  background-color: $bgColor;
}
.content {
  @include required(#aaa);
}
    なれれば良さそうだけれど一寸見で記号のお化けに見える
    =contentMold($bgColor:#fff)
  height: 100%
  width: 100%
  background-color: bgColor
.content
  +contentMold(#aaa)

  • 計算

    css3でも計算が可能で大きな差異は感じられない。

    #content1 {
  width: calc(100vw * 0.5);
}
     
    #content1 {
  width: (vwidth * 0.5);
}

  • 関数

    単純な例なので比較になっていないかもしれないが、単純ならばどっちでも良い気がする。

    CSS3には関数は無いので、SCSSの事例と同じ事を行う記述例
    :root {
  --width: 360px - 60px;
}
div {
  width: clac(360px - var(--width));
}
ul {
  width: clac(360px - var(--width));
}
							
    @function widthCalc($pixel) {
  @return $pixel - 60px;
}
p {
  width: widthClac(360);
}
ul {
  width: widthClac(360);
}

  • JavaScriptとの連携

    この場合はCSS3に軍配があがる。 

    :root {
  --text-color: black;
}
p {
  color: var(--text-color);
}
li {
  color: var(--text-color);
}

    JavaScriptで青色に変えるコード

    document.documentElement.style.setProperty('--text-color', blue);
							
    @function setColor() {
  @return black;
}
p {
  color: setColor();
}
li {
  color: setColor();
}

    JavaScriptで色を変えるコード

    let eleP = document.getElementsByTagName('p');
for (let i = 0; eleP.length; i++) {
  eleP[i].style.color = 'blue';
}
let eleLi = document.getElementsByTagName('li');
for (let i = 0; eleLi.length; i++) {
  eleLi[i].style.color = 'blue';
}

  • 子要素の数により幅を決める

    これ、SASSに軍配があがります。

    JavaScriptでしか出来ません。
    要素の個数に応じてスタイルを出し分けるCSS

    ※動的に要素が増減する場合はJSで行うしかありません。

  • CSS3とSCSSを比較した総括

    CSS3での記述でも動的な柔軟性は考慮はされています。JavaScriptとの連携も考慮されています。
    SCSSやSASSに比べれば若干は冗長的ですが、苦になるほどじゃないと感じます。
    SCSSとSASSはCSSへのトランスパイルへの指示言語として動的で柔軟性をもたせていますが、トランスパイル後は静的なCSSです。
    トランスパイルの段階で要素数により幅を決める時などには便利です。

    CSS2に対してならいSCSSが圧倒的に優れているのは間違いありません。
    CSS3に対しはなら、
    ・ページの静的部分の柔軟に管理するにはSCSS
    　└→静的なウェブページへの適用なら優れている
    ・ブラウザ表示後の動的動作はCSS3
    　└→動的なウェブアプリ等でJavaScriptによる制御が必要ならCSS3
    という具合に用途に適したハイブリッド利用がベストかもしれません。
    CSS3とのハイブリッド利用ならSASSよりSCSSの方が可読性が高いと考えます。