【Sass入門者】雪でサイトをデコレーションしてみた！
はじめに
こんにちは！テナアダム松山支店のキムラーです。
12月となり、季節が冬になるとご自身のホームページに雪を降らせたくなりませんか？
私はなってしまいます。(笑)
今回は「Sass」入門者の私が学習のアウトプットとして、雪を降らせるCSSを「Sass」で表現してみました！
また、今回のコードを書くにあたって以下の記事を参考にしましたのでご紹介します。
因みに、CSSはできるけど「Sass」をまだ学習したことのない方は、WEBクリエイターボックスさんのこちらの動画とそのシリーズの動画が分かり易く、短時間で基礎を知ることができるので非常におすすめです。
そして、本記事ではSassという言語そのものを指すときは「Sass」と表記し、Sassのコードが書かれたファイルのことを「SCSSファイル」と表記します。
「Sass」と「SCSS」の違いにつきましては以下の記事が参考になりますので興味のある方はご覧ください。
「@import」が廃止される件について
これからSassの学習を始める方に知っていただきたいのが、分割したファイルを読み込む「@import」が2022年10月頃に廃止されると言われていることです。
代替方法として「@use」があり、その紹介も兼ねて今回ご紹介するコードにもその「@use」の使用しており、変数用のSCSSファイルとスタイリング用SCSSファイルで分けて紹介します。
また、「@use」の使い方は先に紹介したWEBクリエイターボックスさんのYouTubeチャンネルで配信している「Sass入門講座 #02」で紹介されていますのでまだ使い方を知らない方は是非ご覧ください。
サンプルコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="snow">●</div>
</body>
</html>
_variables.scss
始めに「base」というディレクトリを作り、サイトの背景や雪の色、大きさなど後から変更する可能性のある値はこのファイルで管理します。
$bg :#070A31;
$snow_color: snow;
$snow_size: 18px;
$snow_initial_pos: -5%;
$snow_fall_speed: 5s;style.scss
1行目で「@use」を使って_variables.scssの値を読み込みます。
@use 'base/variables' as var;
body {
background: var.$bg;
.snow {
color: var.$snow_color;
font-size: var.$snow_size;
position: fixed;
top: var.$snow_initial_pos;
text-shadow:
5vw -100px 2px,
10vw -400px 3px,
20vw -500px 4px,
30vw -580px 1px,
39vw -250px 2px,
42vw -340px 5px,
56vw -150px 2px,
63vw -180px 0,
78vw -220px 4px,
86vw -320px 9px,
94vw -170px 7px;
animation: anim var.$snow_fall_speed linear infinite;
}
}
@keyframes anim {
100% {
color: transparent;
top: 150%;
}
}できあがったもの
このようなものが作れました！
さいごに
以上、キムラーによるSassで表現したサイトに雪を降らせるコードでした！
メンテナンス性が良く効率の良い方法で制作をするのもプログラマーにとって重要なスキルだと思うので今後もSassの学習を継続し、現場で使用できるレベルまで技術を高めていきたいです。
また、私は過去にプログラミングに関する記事を投稿しているので興味のある方は是非ご覧ください。
この記事が役に立った！と感じていただけた方は、是非をスキしてブックマークしていただけましたら幸いです。
この記事が気に入ったらサポートをしてみませんか？