SCSSに@mixinを使えば、クラスを定義することができます。
@mixin定義
@mixin themable($theme-name,container-bg,$left-bg,$right-bg,$innertext,$button-bg){
.#{$theme-name}{
.container{
background-color:$container-bg;
border:1px solid #000;
display:flex;
justify-content:space-between;
margin:0 auto;
width:50%;
}
*{
color:$innertext;
font-size:1rem;
}
.left {
background-color: $left-bg;
height: 100%;
width: 69%;
}
.right {
background-color: $right-bg;
height: 100%;
position: relative;
width: 29%;
}
.button {
background-color: $button-bg;
border: 0;
border-radius: 10px;
bottom: 10px;
cursor: pointer;
font-size: 1rem;
font-weight: bold;
padding: 1em 2em;
position: absolute;
right: 10px;
}
input{
outline:none;
background:none;
border:none;
border-bottom:1px solid white;
box-shadow:none;
}
}
}
これでthemableというクラスが定義できました。
それでは、@includeで実際にthemableを定義してみます。
@includeでmixinを継承
@include themable(dark-theme,#898989,#454545,#252525,#ffffff,#e5e5e5);
@include themable(light-theme,#ffffff,#ffa3a3,#ffa3d1,#000000,#ffd1a3);
dark-theme
<body class="dark-theme">
<div class="container ">
<div class="left d-flex justify-content-center align-items-center">
<span>LEFT</span>
</div>
<div class="right d-flex flex-column justify-content-center ">
<span class="align-self-center">RIGHT</span>
<button class="button">BUTTON</button>
</div>
</div>
</body>
light-theme
<body class="light-theme">
<div class="container ">
<div class="left d-flex justify-content-center align-items-center">
<span>LEFT</span>
</div>
<div class="right d-flex flex-column justify-content-center ">
<span class="align-self-center">RIGHT</span>
<button class="button">BUTTON</button>
</div>
</div>
</body>
dark-themeとlight-themeで宣言するだけで、簡単でスタイリングできようになりました。
これによってデサイントレンドのダークモードも手軽に実装できます。
皆さんもぜひ日常のフロント設計やコーディングの中にSCSS（またはSASS）を使ってみてください！