はじめに
忍者codeでSassの練習をしたため、中級編と上級編の解答を自分でアレンジしたものを載せておきます。
自作アレンジ
@mixin myStyle($sizeW: 200px, $sizeH:500px, $col: red, $col2: blue) {
width: $sizeW;
height: $sizeH;
color: $col;
background-color: $col2;
}
.box1 {
@include myStyle();
}
.box2 {
@include myStyle(500px, 3000px, magenta, aqua);
}
.box3 {
@include myStyle(50px, 10px, yellow)
}
自由にサイズや色を変えられるミックスイン（呼び出しができるセットのようなもの）を作りました。初期値も設定しています。
CSSに変換後のコード
.box1 {
width: 200px;
height: 500px;
color: red;
background-color: blue;
}
.box2 {
width: 500px;
height: 3000px;
color: magenta;
background-color: aqua;
}
.box3 {
width: 50px;
height: 10px;
color: yellow;
background-color: blue;
}
/*# sourceMappingURL=practice1.css.map */
SassからCSSへの変換は、VSCodeのLive Sass Compilerで容易にできます。
続いてはこちら
@mixin myStyle($sizeW, $sizeH, $color) {
width: $sizeW;
@if $sizeH == 'S' {
height: 20px;
} @else if $sizeH == 'M' {
height: 50px;
} @else if $sizeH == 'L' {
height: 80px;
} @else if $sizeH == 'XL' {
height: 100px;
}
@if $color == 1 {
color: magenta;
} @else if $color == 2 {
color: aqua;
} @else if $color == 3 {
color: yellow;
} @else if $color == 4 {
color: mediumspringgreen;
} @else {
color: silver;
}
}
.style1 {
@include myStyle(50px, S, 3)
}
.style2 {
@include myStyle(80px, M, 6)
}
.style3 {
@include myStyle(30px, XL, 1)
}
Sassにおけるif文の練習です。
コンパイル後
.style1 {
width: 50px;
height: 20px;
color: yellow;
}
.style2 {
width: 80px;
height: 50px;
color: silver;
}
.style3 {
width: 30px;
height: 100px;
color: magenta;
}
/*# sourceMappingURL=practice2.css.map */
サイズや色を自由に選べます。
ジャンジャン行ってみましょー
@mixin myStyle($pos1, $pos2, $space) {
position: absolute;
@if $pos1 == 'top' {
top: $space;
} @else if $pos1 == 'bottom' {
bottom: $space;
}
@if $pos2 == 'left' {
left: $space;
} @else if $pos2 == 'right' {
right: $space;
}
}
$myColor: gray;
.parentBox {
position: absolute;
background-color: $myColor;
}
.box1 {
@include myStyle(top, left, 20px);
background-color: darken($myColor, 30%);
}
.box2 {
@include myStyle(bottom, right, 0px);
background-color: lighten($myColor, 20%);
}
親要素に対する位置と間隔を指定することで、親要素との位置関係を維持しながら自由に移動ができます。
色を変化させるdarken,lighten関数も使ってみました。
コンパイル後
.parentBox {
position: absolute;
background-color: gray;
}
.box1 {
position: absolute;
top: 20px;
left: 20px;
background-color: #343434;
}
.box2 {
position: absolute;
bottom: 0px;
right: 0px;
background-color: #b3b3b3;
}
/*# sourceMappingURL=practice3.css.map */
ちゃんと色も暗くなったり明るくなったりしてますね。
最後です。
$sizeList: 10px, 20px, 30px, 50px, 100px, 200px;
$colorList: red, blue, orange, pink, lime, maroon;
$blueColor: midnightblue, skyblue, aqua, turquoise, royalblue;
$theme-colors: (
main: magenta,
sub: orange,
notice: salmon,
announcement: slateblue,
info: violet
);
.box1 {
width: nth($sizeList, 3);
color: nth($colorList, 5);
}
@each $val in $blueColor {
$key: index($blueColor, $val);
.box#{$key} {
background-color: #{$val};
}
.box#{$val} {
color: #{$val}
}
}
.box2 {
width: nth($sizeList, 5);
color: map-get($theme-colors, 'announcement')
}
配列の練習です。ついでにmapについても練習しました。
コンパイル後
.box1 {
width: 30px;
color: lime;
}
.box1 {
background-color: midnightblue;
}
.boxmidnightblue {
color: midnightblue;
}
.box2 {
background-color: skyblue;
}
.boxskyblue {
color: skyblue;
}
.box3 {
background-color: aqua;
}
.boxaqua {
color: aqua;
}
.box4 {
background-color: turquoise;
}
.boxturquoise {
color: turquoise;
}
.box5 {
background-color: royalblue;
}
.boxroyalblue {
color: royalblue;
}
.box2 {
width: 100px;
color: slateblue;
}
/*# sourceMappingURL=practice4.css.map */
やけに長大なCSSができてしまいました。
@each文を使った際に、各配列のインデックス番号を取得してクラス名に付けたものと、それぞれの色名をクラス名に付けくわえたものがあります。
総論
一般的なプログラミング言語と感覚はほぼ同じです。
Sassが使えるようになると、色々なことができるようになって楽しいですね。
元々processingやp5.jsによるクリエイティブコーディングが好きなので、CSSよりも自由度が増すのはうれしい限りです。
今後もこのような練習成果を載せることもあるかもしれません。
参考
忍者code SASSコース
https://ninjacode.work/course/SASS
practice4で使用 配列、mapの使い方など
https://shanabrian.com/web/sass/array.php
https://cly7796.net/blog/css/manage-a-plurality-of-colors-in-array-of-sass/
https://qiita.com/yuusuke510/items/743a0eebb39bf664a8f5
それでは～