CSS3 SCSS SASS

CSS3

SCSS

SASS

入れ子表現

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

インデントさせることである程度入れ子関係が表現できる。少々冗長でもある。

.text{
	--text-font-size: 20px;
}
	.text a{
		--anker-color: white;
	}

｛｝括りで入れ子して記述できるので簡素で解りやす。

.text{
	--text-font-size: 20px;
	a{
		--anker-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: "★"

擬似クラス

root {
  --anker-color: blue;	
  --anker-hover-color: white;	
  --anker-hover-bk: blue;	
}
a {
  color: var(--anker-color);
}
  a:hover {
    color: $anker-color;
    background-color: $anker-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);
}

関数

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

: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';
}

CSS3とSCSSを比較した総括

CSS3での記述でも動的な柔軟性は考慮はされています。JavaScriptとの連携も考慮されています。
SCSSやSASSに比べれば若干は冗長的ですが、苦になるほどじゃないと感じます。

SCSSとSASSはCSSへのトランスパイルへの指示言語として動的で柔軟性をもたせていますが、トランスパイル後は静的なCSSです。
これはJavaScriptから動的にCSSを扱う者の目から見た感想として、CSS3の柔軟性に劣る場合があります。
自分にとっては、優れたトランスパイラ―が出現して、無駄なCSS記述の警告や矛盾を見つけ出してくれて、CSS3にトランスパイルしてくれるのならSCSSを使う動機づけになるかもしてません。

CSS2に対してならいざ知らず、CSS3に対しはSCSSが圧倒的に優れているとは思えません。
SCSSの簡単な事例での比較ですので、もう少し掘り下げて比較しないとだめかもしれません。
モダンブラウザはCSS3に逐次対応してくれるので、IE亡き後のVanilla JS(ES2015以降) と jQueryの関係みたいになる予感がしてしまいました。
肝心なSCSSに乗り換える決断には至りませんでした。

CSS3 SCSS SASS の比較