「scss」の記事 - Crieit

Bootstrap 5 + scroll-margin-top + ダークモード + パララックスについてメモ

2022-04-28T00:04:15+09:00

経緯

Bootstrap 5 で JavaScript の記述なしにアンカーリンクへのアニメーション付きスクロールが scroll-behavior で実装されていることを最小限構成で確認したので、改めて Bootstrap 5 で検証したいと思います。

デモ

Home - Vault Celestia

早速ですがデモを。

scroll-margin-top

上述の通り、 Bootostrap 5 ではアンカーリンクへのアニメーション付きスクロールは scroll-behavior: smooth; で実装されているのでこの部分はそちらに任せて、 scroll-margin-top のみ自前で記述。

// foundation/_variable.scss
$navbar-height: 56px;

/* css変数 + Scss変数 */
:root {
    --navbar-height: #{$navbar-height};
}


// object/utility/_u-ssnapmt.scss
.u-ssnapmt {
    scroll-margin-top: var(--navbar-height);
}

今回は css変数 + Scss の併用で記述してみました。

css変数 + ページごとのキービジュアル画像の変更

キービジュアル (ページ最上部にある画像 + 見出し + キャッチコピー等のパーツ) の背景画像について、ページごとに異なる画像を表示させたい、というのはよくある話だとは思います。

今回は css変数を使って

予め headタグ内の styleタグでは background-image: var(--img); でcss変数で指定しておく
各要素で変数の値を都度差し替える

という形で画像を切り替える形式を採ってみました。

なお、今回はデモなので Jumbotron風の実装で。

ダークモード

// layout/_l-main.scss
@charset "utf-8";

@use "../foundation" as f;

.l-main {
    background-color: f.$bg-color;
    color: f.$color;
    #dark > & {
        /* ダークモード対応 */
        @media (prefers-color-scheme: dark) {
            background-color: f.$color;
            color: f.$bg-color;
        }
    }
}

メディアクエリ @media (prefers-color-scheme: dark) によるダークモードを試しに記述。

ブログのような色に対して中立性の高いコンテンツの場合は使えそうですが、ブランドカラーが決まっている場合は難しそうな感。

個人的には基本ダークモードの方がありがたいのですが……。

パララックス

最後はパララックス。これについてはパッケージを利用しました。

    "dependencies": {
        "ukiyojs": "^3.0.0"
    },

import Ukiyo from 'ukiyojs';

window.addEventListener( 'load', () => {
    const ukiyoParallaxes = document.querySelectorAll( '.ukiyo' );
    ukiyoParallaxes.forEach( ( ukiyoParallax ) => {
        new Ukiyo( ukiyoParallax, {
            scale: 1.75,
            speed: 1.75,
        } );
    });
});

公式のドキュメント通りです。

GitHub - yitengjun\/ukiyo-js: ⛰️Modern parallax library for picture elements and any images

検索すると自前実装も出てくるのですが、後々を考えるとパッケージの方が良さそうな気がするので。

参考

scroll-margin-top

パララックス

stylelint 周りのアップデート (Scss対応、 rgb 指定)

2022-03-05T23:05:27+09:00

久々にパッケージガーデニングしたら stylelint から Scss 関連や rgb の指定で怒られるようになってしまったので対処。

現象

$ stylelint ./src/scss/**/*.scss

src/scss/global/_scssVariables.scss
 19:19  ✖  Unexpected unknown function "color.scale"   function-no-unknown
 21:19  ✖  Unexpected unknown function "color.adjust"  function-no-unknown
 22:17  ✖  Unexpected unknown function "color.adjust"  function-no-unknown
 23:19  ✖  Unexpected unknown function "color.scale"   function-no-unknown
 24:20  ✖  Unexpected unknown function "color.scale"   function-no-unknown

src/scss/object/component/_c-button.scss
 19:31  ✖  Expected modern color-function notation  color-function-notation

src/scss/_plugins/articlesns/_articlesns.scss
 40:16  ✖  Unexpected unknown function "color.scale"  function-no-unknown
 53:31  ✖  Unexpected unknown function "map.get"      function-no-unknown
 57:35  ✖  Unexpected unknown function "color.scale"  function-no-unknown
 57:47  ✖  Unexpected unknown function "map.get"      function-no-unknown
 57:81  ✖  Unexpected unknown function "map.get"      function-no-unknown

npmパッケージをアップデートした際に stylelint やそれに関連するパッケージ等をアップデートしたところ、いくつかの項目で怒られるようになってしまいました。

この中で特に気になったのが Expected modern color-function notation color-function-notation のエラー。

かじさんはTwitterを使っています「stylelint-config-standard の 23.0.0 アップデートで、 color-function-notation が 'modern' で追加された。従来のコンマ区切りだったrgb()、rgba()をスペース区切りに揃えるもの。ついでにrgbaをrgbに揃えている。 https:\/\/t.co\/yHFngFOS8J」 \/ Twitter

検索したところ、このツイートがヒット。

stylelint-config-standard のアップデートで色指定が引っかかるようになったようです。これは css level 4 の構文に対応したもののようです。

CSS Color Module Level 4 （日本語訳）

構文としては次のように変更になります。

/* 旧来 */
.hoge {
    background-color: rgba(48, 48, 48, 0.5);
}

/* 新 */
.hoge {
    background-color: rgb(48 48 48 / 50%);
}

rgb() と rgba() から rgb() へ統一
RGB値はカンマ区切りからスペース区切りへ
RGB値とアルファ値の区切りはカンマからスラッシュへ

一方、 Scss でも独自に rgb() が存在しています。このおかげで、 Scss で次のように色の指定でRGB値ではなく16進数や変数を使用しても問題が発生しないわけですね。

$black: #333;

.hoge {
    background-color: rgba($black, 0.5);
}

ただ、 Scss 側ではまだカンマ区切りしか対応していなさそうです。そのため、仮に css level 4 の構文を使用して Scss のトランスパイルを走らせると、次のようにエラーになってしまいます。

[hh:ii:ss] gulp-notify: [sass] Error: src\scss\object\component\_c-newscards.scss
Error: Missing element $blue.
    ╷
128 │     box-shadow: inset 2px 2px 5px 0 rgb(g.$us-main-color 0.5);
    │                                     ^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  src\scss\object\component\_c-newscards.scss 128:37  @use
  src\scss\contents.scss 36:1                         root stylesheet


 19:31  ✖  Expected modern color-function notation  color-function-notation

Scss の構文にすると stylelint でコケて、 stylelint のデオフォルトに従って css level 4 の構文にすると Scss のトランスパイルが通らない、と。

対処

仕方ないので、上述引用のツイートと同様に color-function-notation のパラメータを legacy にすることで回避することにしました。

.stylelint.json

    "rules": {
        // 略
        "color-function-notation": "legacy",
        // 略
    }

余談

上述対処の前に他の回避方法がないか試す中で、一通りパッケージをアップデートしたりしましたがかえって Scss の関数等のエラーが出てしまったのは冒頭の通り。

そこでそれらへの対応として次のようにしました。

package.json

    "devDependencies": {
        // 略
        "stylelint-config-standard-scss": "3.0.0",  // 追加
        // 略
    }

.stylelint.json

    "extends": [
        "stylelint-config-standard",
        "stylelint-config-standard-scss",      // 追加
        "stylelint-config-recommended-scss",
        "stylelint-config-prettier"
    ],

まず stylelint-config-standard-scss を追加。

.stylelint.json

    "rules": {
        // 略
        "at-rule-no-unknown": null,                                                                    // Scss関数は stylelint-config-standard-scss に任せるようにしたため独自で追加していた設定は削除
        "function-no-unknown": [
            true,                                                                                      // map.get や color.scale 等 Dart Sass の関数は引っかかってしまうのでルールを追加
            {
                "ignoreFunctions": [
                    "/^map\\..+/",
                    "/^color\\..+/"
                ]
            }
        ],
        "scss/at-rule-no-unknown": true,                                                               // Scssのデフォルト関数以外は引っかかるようにする
        "scss/dollar-variable-pattern": "^(([a-z][a-zA-Z0-9_]+)|([a-z][a-z0-9]*)(-[a-zA-Z0-9_]+)*)$",  // 互換性のためケバブケース強制は除去
        "scss/at-mixin-pattern": "^(([a-z][a-zA-Z0-9_]+)|([a-z][a-z0-9]*)(-[a-zA-Z0-9_]+)*)$",         // 互換性のためケバブケース強制は除去
        "scss/at-mixin-argumentless-call-parentheses": "always"                                        // 互換性のため引数なしのmixin呼び出しの際は括弧強制
        "stylelint-config-standard-scss": "3.0.0",  // 追加
        // 略
    }

その上で .stylelint.json のルールをいくつか変更しました。

これで stylelint を走らせてエラーが出なくなったことを確認。

参考

color-function-notation

css level 4

CSS Color Module Level 4 （日本語訳）
Getting error in CSS with rgb$0 0 0 \/ 15%$ - Stack Overflow
- 似たようなケース

Scss 周りへの対応

marked

Marked Documentation

パースする関数が marked から marked.parse メソッドに変更になっていた。

Bootstrap 5 の変数やマップを上書きする

2022-02-06T21:41:13+09:00

Bootstrap 5 が去年5月にリリースされてからかなり経ってしまいましたが、 4 とは変数の上書きや追加の方法が変わっていると知ったので実験をしてみました。

検証結果

ページ: Black in me - Black! - Blackout
リポジトリ: GitHub - arm-band\/test_bootstrap5_blackout: Bootstrap5 の変数を上書きできるかテスト。

コード

ディレクトリ (関連する部分のみ)

   /
  └ src/
    └ scss/
       └ foundation/
            ├ bootstrap/
            │    └ _import.scss
            │
            ├ _append.scss
            ├ _index.scss
            ├ _mixin.scss
            └ _variables.scss

ひとまずこんな形に。今回はデモ用なので globalディレクトリを用意しませんでしたが、実際には globalディレクトリで運用しようかな、と思います。

src/scss/foundation/bootstrap/_import.scss

@charset "utf-8";

// color custom (override)
@import "../variables";

// Configuration
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/utilities";

// color custom (add to map)
@import "../append";

// Layout & components
@import "node_modules/bootstrap/scss/root";
@import "node_modules/bootstrap/scss/reboot";
// 略

元々の Bootstrap 5 の bootstrap/scss/bootstrap.scss のパスを調整したコピーを用意。

このコピーに2箇所手を加えます。

Configuration の読み込みの前に src/scss/foundation/_variables.scss を読み込む
Configuration の読み込みの後に src/scss/foundation/_append.scss を読み込む

src/scss/foundation/_index.scss

@charset "utf-8";

//@forward "variables";
@forward "bootstrap/import";
@forward "mixin";

元々同じディレクトリにあった _variable.scss の読み込みを削除。これは先の src/scss/foundation/bootstrap/_import.scss で _variable.scss を読み込んでいるためです。

src/scss/foundation/_variables.scss (既存変数の上書き)

@charset "utf-8";

@use "sass:color";

$m-color: #333;
$m-main-color: #666;
$m-main-color_d: color.scale($m-main-color, $lightness: -8%);
$m-main-color_l: color.scale($m-main-color, $lightness: 8%);
$m-accent-color: color.adjust($m-main-color, $hue: 150deg);
$m-link-color: color.adjust($m-main-color, $hue: 210deg);
$m-link-v-color: color.scale($m-link-color, $lightness: -8%);
$m-link-ha-color: color.scale($m-link-color, $lightness: 8%);
$m-bg-color: #fff;

// override
$primary:       $m-main-color;
$secondary:     $m-bg-color;

変数宣言。前半は自分用の変数なのでお好みで。ただし $link-color 等は Bootstrap 側の変数とバッティングするのでそういった変数名は避けます。

その上で、今回は最後の部分に Bootstrap5 の変数の値を上書きするための $primary や $secondary を用意。このように Bootstrap 5 の変数より前に定義することで既存変数の上書きができます。

src/scss/foundation/_append.scss

@charset "utf-8";

$custom-colors: (
  "blackout": #000
);

// blackout をマップ $theme-colors に追加
$theme-colors: map-merge($theme-colors, $custom-colors);

一方、マップ $theme-colors に新たな要素を追加するためには先程の変数上書きとは異なり、 Bootstrap 5 の変数等の後でマップに追加する必要があります。

……確かに map-merge で合体するマップを指定する都合上、予め指定するマップが存在していなければならないですよね。

これで既存のマップ $theme-colors に要素 blackout を追加できました。

結果

Bootstrap のボタンで検証。左から2つの primary と secondary は上書きしたのでカスタマイズした色に、3つ目はオリジナルの blackout です。4つ目以降はデフォルトの success や info 等が続いており、上述のようにマップに一部の色のみを指定して map-merge しても他の色が影響を受けていないことを確認しました。

これで大丈夫そうですね。

参考

【VSCode】拡張機能一覧（主にWeb系システム開発用）

2021-03-28T18:20:44+09:00

個人用メモ。
主にPHPを使用して開発する環境で使用している拡張機能一覧。
（他のも混じっているけど）
（後で追加・変更・削除するかも）

VSCode

Bookmarks
　あらかじめソースコード中にブックマークを設定しておくと、他の場所からブックマークまで一瞬で移動することが出来る。
indent-rainbow
　インデントを色付きで表示してくれる。
Japanese Language Pack for Visual Studio Code
　VSCodeの日本語化。

HTML

Auto Close Tag
　自動的に閉じタグを追記してくれる。
Auto Rename Tag
　タグを変更すると、対応する閉じタグを自動的に変更してくれる。
HTML Snippets
　HTMLの予測変換を表示してくれる。
HTMLHint
　HTMLの文法チェックをしてくれる。

PHP(Laravel)

Bracket Pair Colorizer 2
　メソッドやArrayなどで、対となるカッコを色付きで表示してくれる。
php cs fixer
　PHPソースを自動整形してくれる。
　※別途、「php-cf-fixer.phar」のインストールが必要。
PHP Debug
　PHPをステップ実行してデバッグできるようになる。
PHP IntelliSense
　PHPの予測変換を表示してくれる。

【2021.8.8 追加】
* Laravel Blade Snippets
　Laravelのbladeファイル内のタグやディレクティブを色付きで表示してくれる。

Laravel Blade formatter
　Laravelのbladeファイル用のフォーマッタ。
　blade独自のディレクティブもインデントしてくれる（これ重要）。

JavaScript(Node.js,Vue.js)

ESLint
　JavaScriptの構文チェックをリアルタイムで実行してくれる。
　※Vue.jsで使用するには設定が必要。
JavaScript (ES6) code snippets
　JavaScriptの予測変換を表示してくれる。
Vetur
　Vue.jsコードのシンタックスハイライトやコード補完、リント、フォーマットを行ってくれる。

CSS(Sass,SCSS)

IntelliSense for CSS class names in HTML
　CSSクラス名を入力するときに、入力補完してくれる。
SCSS Formatter
　SCSSコードを自動整形してくれる。

その他

Log File Highlighter
　ログファイルの内容を色付きで表示してくれる。
MySQL
　VSCodeでMySQLを使用可能にする。
Rainbow CSV
　CSVファイルをカラムごとに色分けして表示してくれる。
Regex Previewer
　正規表現の実行結果をプレビュー表示してくれる。
SFTP
　サーバへ自動的にソースファイルをアップロードしてくれる。

【参考】

「Visual Studio Code」をインストールしてPHPコードのデバッグ環境を設定する方法
https://incloop.com/visualstudiocodeのデバッグ設定/

Visual Studio Codeで作るPHP開発環境のおすすめ拡張機能17選
https://wonwon-eater.com/vscode-php-plugin/

VScodeの日本語化ができない変わらない時の対処法[Visual Studio Code]
https://rabotiku-sato.com/vscode-japanese-setting

vscodeでVue.jsを書くときに使っているプラグインとか
https://qiita.com/dayoshix/items/c61a75a971331418c348

【HTML編】Visual Studio Code おすすめプラグイン紹介 #02
https://so-da.tech/tech/vscode/vscd3/

VSCodeのAuto Rename Tagで閉じタグも自動変更
https://tech.pjin.jp/blog/2020/04/27/vscode_extension_auto_rename_tag/

VSCode で HTML の文法チェックを行う拡張機能 HTMLHint
https://loumo.jp/archives/26229

VSCode拡張機能『indent-rainbow』でインデントを虹色にする方法
https://onedarling.site/programming/tool/vscode-indent-rainbow/

【2020年版】VSCodeでhtml/css/jsの拡張機能おすすめ
https://uetani33.net/vscode-web-extensions/#toc_id_3_2

VSCode使い必見！？使って便利な Visual Studio Code 拡張機能10選
https://www.geekfeed.co.jp/geekblog/vscode_extension

【超便利】VSCodeでMySQLを利用する方法
https://newmtube07.com/vscode-mysql/

[Visual Studio Code] PHPのコードを整形する「php cs fixer」の設定
https://www.searchlight8.com/visual-studio-code-php/

VSCode(Visual Studio Code)でSFTP・FTP経由でファイルを自動アップロードや同期できる拡張機能「SFTP」が超便利
https://www.karelie.net/vscode-sftp/

Windows10でVisual Studio Code + vue-cliの開発環境構築メモ
https://belhb.hateblo.jp/entry/2020/08/08/142540

【2021.8.8 追加】
LaravelでVisual Studio Codeを使う時に入れておきたい拡張機能3選
https://biz.addisteria.com/laravel-vscode/

Laravel blade formatter VSCode Extensionを作った
https://shufo.dev/2020/10/03/published-vscode-blade-formatter/

VSCodeでBladeテンプレートを整形する
https://blog.nplpl.com/310

gulp-sass から Scss を疑似的な動的読み込みを行う

2021-01-26T23:55:22+09:00

経緯

Scss で @import, @use, @forward のような他のファイルを読み込む機能は、 @ディレクティブ内では使用できないません。そのため、例えば以下のようなことができません。

$flag: true;

@if ($flag) {
    @use "parts1.scss";
}

あるフラグ変数(ここでは $flag ですが、実際はファイル中ではなく Gulp タスク内で管理)が true のときのみ parts1.scss を読み込む。

$flag: true;

@if ($flag) {
    @use "parts1.scss";
}
@else {
    @use "parts2.scss";
}

あるいは、フラグ変数の値によって読み込む Scss ファイルを切り替える。

この部分について、どうにかできないか(本当にやりたいのは最初の例ですが、代替案として2つ目の例でブランクの parts2.scss をダミーとして用意する方法を考える)、と。

対処

css - Sass dynamic import based on environment - Stack Overflow

色々検索した結果、 gulp-sass の includePaths オプションを使えばそれらしいことができそうだ、ということが分かりました。

今回はたまたま自分も gulp-sass を使用している前提で、しかも Scss 本体の変数ではなく Gulp タスク内で管理しているフラグによって、というのが希望だったのでこの形はぴったりでした (この方法でなければ、上記スレの上の方にあるように、フラグをいったん Scss ファイルに変数として出力し、それを読み込むことで伝播させようと考えていました)。

const { src, dest } = require('gulp');
const plumber       = require('gulp-plumber');
const notify        = require('gulp-notify');
const sass          =  require('gulp-sass');
sass.compiler = require('sass');
const Fiber = require('fibers');
const autoprefixer  = require('gulp-autoprefixer');

// dynamic import test
const flag = true;

// scssコンパイルタスク
const scss = () => {
    let opt = {
        fiber: Fiber,
        outputStyle: 'compressed'
    };
    // dynamic import test
    if (flag) {
        opt.includePaths = [
            `src/scss/parts/enable`
        ]
    }
    else {
        opt.includePaths = [
            `src/scss/parts/disable`
        ]
    }
    return src('src/scss/**/*.scss')
        .pipe(plumber({
            errorHandler: notify.onError({
                message: 'Error: <%= error.message %>',
                title: 'scss'
            })
        }))
        .pipe(sass(opt).on('error', sass.logError))
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(dest('dist/css'));
};

module.exports = scss;

Scss のコンパイルタスクはこのような感じで。

src/
　└ scss/
      ├ .scssファイル やディレクトリ
      ├ import/
      │   └ _index.scss
      │
      └ parts/
          ├ disable/
          │    └ parts_hoge.scss
          └ enable/
               └ parts_hoge.scss

このようなディレクトリ構造で、 src/scss/import/_index.scss から src/scss/parts の中のenable または disable のどちらかの parts_hoge.scss を読み込む、とした場合。

// dynamic import test
@use "parts_hoge";

src/scss/import/_index.scss の記述はこれだけですが、 Scss のコンパイルタスクに記述されている変数 flag によって読み込む元のディレクトリの候補が src/scss/parts/enable または src/scss/parts/disable のどちらかに切り替わる、ということです。

あとは src/scss/parts/disable/parts_hoge.scss は中身のないブランクのファイルにしておけば、 flag が true の場合のみ css が当たる、ということになります。

出力される css の切り分けはできたので、とりあえずはこの方法でしょうかね。

参考

カーソルを特定要素にホバーすると画像を表示するマウスストーカーのサンプル

2020-12-14T21:10:33+09:00

マウスストーカーが盛んに取り上げられるようになって早数年。さすがにそろそろやり方くらいは……と思い、試してみることにしました。

コード

まずは成果物を。

要素ホバーで拡大: Home - Vampire Stoker
要素ホバーで背景画像表示: Home - Vampire Stoker

最初の方(要素ホバーで拡大)は参考コードほぼそのままです。次のものはマウスストーカーが大きくなるだけでなく、背景画像をスポットライト的に切り抜いて表示する機能も付けたものになります。

arm-band/test_vampire_stoker

リポジトリ。

HTML

HTMLはいたってシンプル。カーソル用の要素とディレイがかかって追いかけてくる要素の2つの div を用意します。

今回はさらにラッパーで覆って overflow: hidden; をかけることで、画面端にカーソルが移動した際にディレイ要素の大きさ分だけはみ出てスクロールバーが表示されないようにしました。

それから、今回はサクッと試すために CDN で TweenMax を読み込むようにしました。

css(Scss)

body {
    position: relative;
    // 元々のマウスカーソルを消す
    cursor: none;
}

.c-mouseStalker {
    // イベント反応させなくする
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    &_wrapper {
        // イベント反応させなくする
        pointer-events: none;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        // 端にカーソルを持って行ったときにディレイの部分だけはみ出てスクロールバーが表示されてしまうのを抑止
        overflow: hidden;
    }
    &_cursor,
    &_delay {
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none; // イベント反応させなくする
    }
    &_cursor {
        width: 0.5rem;
        height: 0.5rem;
        background-color: f.$color;
        z-index: 10001;
        border-radius: 50%;
    }
    &_delay {
        $delayRadius: 100px / 4;
        width: 100%;
        height: 100%;
        background-color: f.$main-color;
        z-index: 10000;
        transition: clip-path ease 0.1s; // 遅くするともっさりした感じになる
        opacity: 0.4;
        // at 以降は円の中心の定義
        clip-path: ellipse($delayRadius $delayRadius at 50% 50%);
        &.active {
            $activeTimes: 4;
            background: {
                image: url("../img/img.jpg");
                attachment: fixed;
                size: cover;
                position: center center;
            }
            opacity: 1;
            clip-path: ellipse($delayRadius * $activeTimes $delayRadius * $activeTimes at 50% 50%);
        }
    }
}

body の cursor: none;: デフォルトのマウスカーソルを非表示に
.c-mouseStalker と .c-mouseStalker_wrapper:
- pointer-events: none;
- どちらも表示画面サイズいっぱいまで拡大
.c-mouseStalker_wrapper: overflow: hidden; で端にカーソルを持って行ったときにディレイの部分だけはみ出てスクロールバーが表示されてしまうのを抑止
.c-mouseStalker_delay: 肝
- 要素自体は透明。 clip-path で切り取った円形の範囲のみ見える状態にする
  - デフォルトは単色半透明のマスク
  - 特定要素にホバーしたとき、 jQuery でクラス付与 (ホバー解除時にクラスも削除)
    - クラスが付与されたとき、背景を単色から background-image で指定した画像にする
      - 背景画像は background-attachment, background-size, background-position 指定あり
- transition: clip-path ease 0.1s; でホバー時の拡大縮小等の切り替えを easing
  - 0.3s にすると TweenMax のディレイも相まってもっさりした動きになってしまうので、 0.1s で

JavaScript (jQuery + TweenMax)

// mouse stalker
const mouseStalker = () => {
    const $cursor = $('#c-mouseStalker_cursor');
    const $delay = $('#c-mouseStalker_delay');
    const paramsArray = {
        cursor: {
            width: $cursor.outerWidth(),
            coorX: 0,
            coorY: 0,
            delay: 0.001,
        },
        delay: {
            width: $delay.outerWidth(),
            coorX: 0,
            coorY: 0,
            delay: 6,
        },
    };
    const activeClass = 'active';
    let clipRadius = 100 / 4;
    let clipScale = 1;
    let clipPathCoor = `ellipse(${clipRadius * clipScale}px ${clipRadius * clipScale}px at 50% 50%)`;
    // カーソルの遅延アニメーション
    // ほんの少しだけ遅延させる (0.001秒)
    TweenMax.to(
        {},
        paramsArray.cursor.delay,
        {
            repeat: -1,
            onRepeat: function() {
                paramsArray.delay.coorX += (paramsArray.cursor.coorX - paramsArray.delay.coorX) / paramsArray.delay.delay;
                paramsArray.delay.coorY += (paramsArray.cursor.coorY - paramsArray.delay.coorY) / paramsArray.delay.delay;

                clipPathCoor = `ellipse(${clipRadius * clipScale}px ${clipRadius * clipScale}px at ${paramsArray.delay.coorX}px ${paramsArray.delay.coorY}px)`;
                // delay
                TweenMax.set(
                    $delay,
                    {
                        css: {
                            clipPath: clipPathCoor,
                        }
                    }
                );

                // cursor
                TweenMax.set(
                    $cursor,
                    {
                        css: {
                            left: paramsArray.cursor.coorX - (paramsArray.cursor.width / 2),
                            top: paramsArray.cursor.coorY - (paramsArray.cursor.width / 2),
                        }
                    }
                );
            }
        }
    );

    // mouse hover
    $('#hoverElmID').on({
        mouseenter: function () {
            $cursor.addClass(activeClass);
            $delay.addClass(activeClass);
            clipScale = 4;
        },
        mouseleave: function () {
            $cursor.removeClass(activeClass);
            $delay.removeClass(activeClass);
            clipScale = 1;
        },
    });

    // get mouse coordinate
    $(document).on('mousemove', function (e) {
        paramsArray.cursor.coorX = e.pageX;
        paramsArray.cursor.coorY = e.pageY;
    });
};

window.addEventListener('load', () => {
    mouseStalker();
});

だいたいサンプルコードに則ったコード
カーソルとディレイ要素の各種パラメータは別の変数で持っていると個人的に分かりづらかったのでオブジェクトにまとめました
変数 clipPathCoor で指定した値が実際の clip-path で切り取られるディレイ要素の指定
- カーソル用はほぼ弄らず
- ディレイ要素の方は TweenMax の to で指定するパラメータが top, left から clip-path のみに変更
特定要素のホバー時に上述 Scss の指定が反映されるようにクラスの付け外しを実施
- 同時に clip-path で切り取られる範囲を拡大縮小(拡大率の数値を変更している)

今回はこれで望んだ挙動になりました。

参考

マウスストーカー

背景画像切り抜き

要素内座標(未使用)

要素内のマウスカーソルの座標を取得する！スマホ対応【Javascript】 | MUUMV

Dart Sass (@use, @forward 使用)で Bootstrap 4 の変数やマップを上書きする

2020-12-02T23:50:23+09:00

Dart Sass (@use, @forward 使用)で Bootstrap 4 の変数・マップを上書きしたくなったので実験してみました。

今まで (node-sass / LibSass)

前提

   /
  └ src/
    ├ html/
    │    └ index.html
    │
    └ scss/
       ├ assets/
       │  └ bootstrap/
       │    │    └ bootstrap/
       │    │         └ 略
       │    └ bootstrap.scss
       │
       ├ foundation/
       │    ├ _index.scss
       │    ├ _mixin.scss
       │    └ _variables.scss
       │
       ├ layout/
       │    ├ _l-footer.scss
       │    ├ _l-header.scss
       │    └ _l-main.scss
       │
       ├ object/
       │    ├ component/
       │    │    └ 略
       │    ├ project/
       │    │    └ 略
       │    └ utility/
       │         └ 略
       │
       └ index.scss

今回の検証で使用するプロジェクトのディレクトリ構造は、このような状態とします。

src/html/index.html


    プライマリーボタン
    メインボタン

例として、こんな HTML があったとして。

src/scss/foundation/_scss_variable.scss

$theme-colors: (
    /* 上書き */
    primary: $own-color,
    /* デフォルトにないカラーの追加 */
    main: $own-main-color,
);

マップの定義を上書きするコードを書きます。

src/scss/foundation/_index.scss

@import "variables"; //変数(Bootstrap の変数上書きのコードあり)
@import "mixin";
@import "../assets/bootstrap/bootstrap"; //bootstrap

同じ foundation の中に読み込み用の Scss を用意します。

注意する点としては、「 Bootstrap の Scss を読み込むより前に、 Bootstrap の変数(マップ)を上書きするための自前の定義が書かれた Scss を読み込む」ということ。

src/scss/index.scss

@import "./foundation/index"; //読み込み

最後に、実際に index.css にコンパイルされる src/scss/index.scss で src/scss/foundation/_index.scss を読み込みます。

今までは、これで変数の上書きができました。

Dart Sass での検証1 (失敗 / 単純に `@import` を `@use`, `@forward` に書き換え)

さて、ここで単純に今まで @import で記述していたのを @use, @forward に書き換えてみます。

src/scss/foundation/_scss_variable.scss

$theme-colors: (
    /* 上書き */
    primary: $own-color,
    /* デフォルトにないカラーの追加 */
    main: $own-main-color,
);

上書きしたい変数(マップ)の定義はそのまま。

src/scss/foundation/_index.scss

@forward "scss_variables"; //変数(Bootstrap の変数上書きのコードあり)
@forward "mixin";
@forward "../assets/bootstrap/bootstrap"; //bootstrap

今度は @import ではなく、 @forward に書き換えます。

src/scss/layout/_l-header.scss

@use "../foundation" as f;

.l-header {
    .navbar-brand {
        &,
        &:link,
        &:visited {
            color: f.$own-main-color;
        }
        &:hover,
        &:active,
        &:focus {
            color: f.$own-main-color_l;
        }
    }
}

// 略

実際に src/scss/foundation/_index.scss を読み込んで使用する Scss で @use による読み込みを行います。

src/scss/index.scss

@use "layout/l-header"; //_l-header.scss の中で @use を使って src/scss/foundation/_index.scss を読み込み、使用
@use "layout/l-main";
@use "layout/l-footer";

こんな形に書き換えます。

流れとしては、「src/scss/index.scss -(@use)-> src/scss/layout/_l-header.scss -(@forward)-> src/scss/foundation/_index.scss」という関係。

この状態で Dart Sass によるコンパイルを実行すると、$theme-colors の変数名が重複しているのでエラーになってしまいます。

Error: src/scss/foundation/_index.scss
Error: Two forwarded modules both define a variable named $theme-colors.
    ╷
3   │ @forward "variables";
    │ ━━━━━━━━━━━━━━━━━━━━ original @forward
... │
5   │ @forward "../assets/bootstrap/bootstrap"; //bootstrap
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ new @forward
    ╵
  src/scss/foundation/_index.scss 5:1  @use
  src/scss/layout/_l-header.scss 3:1   @use
  src/scss/index.scss 8:1              root stylesheet

回避するためにはいくつかの方法が考えられますが、 Bootstrap 4 の @import を書き換えていくのは大変な上に既存ライブラリに手を入れるのはできれば避けたいので今回は不採用。

他の方法としては with を使う方法が考えられます。

ただし、これもいくつか工夫が必要です。

Dart Sass での検証2 (失敗 / `@foward` ～ `with`)

安直に with を使おうかと考えましたが、構文的に with は @use でしか使えません。

そのため、以下のような書き換えは不可です。

src/scss/foundation/_index.scss

@forward "../assets/bootstrap/bootstrap" with (
    /* with の中では use で読み込んだファイルのスコープは使えない */
    $theme-colors: (
        /* 上書き */
        primary: #333,
        /* デフォルトにないカラーの追加 */
        main: red,
    ),
); //bootstrap

Dart Sass での検証3 (失敗 / ファイルスコープ)

@use とセットで使うということが分かったので、今度は @use で読み込んでいる場所で with を付けたそうと思いました。

src/scss/layout/_l-header.scss

@use "../foundation" as f with (
    $theme-colors: (
        /* 上書き */
        primary: f.$own-color,
        /* デフォルトにないカラーの追加 */
        main: f.$own-main-color,
    ),
);

.l-header {
    .navbar-brand {
        &,
        &:link,
        &:visited {
            color: f.$own-main-color;
        }
        &:hover,
        &:active,
        &:focus {
            color: f.$own-main-color_l;
        }
    }
}

// 略

ただし、このような既述をすると以下のエラーが発生します。

Error: src/scss/layout/_l-header.scss
Error: There is no module with the namespace "f".
  ╷
7 │         primary: f.$own-color,
  │                  ^^^^^^^^^^^^^
  ╵
  src/scss/layout/_l-header.scss 7:18  @use
  src/scss/index.scss 8:1              root stylesheet

with の中では、その直前で既述した名前空間はまだ使えません。

「独自に定義したメインカラーでプライマリーカラーを上書きしたい」というケースが多いと思われるので、 with で上書きするときにメインカラーが変数で指定できないのは困ります。

そこで、独自定義の変数読み込みと Bootstrap 4 の読み込み部分を分けることにしました。

最終形

ディレクトリ構造

   /
  └ src/
    ├ html/
    │    └ index.html
    │
    └ scss/
       ├ assets/
       │  └ bootstrap/
       │    │    └ bootstrap/
       │    │         └ 略
       │    └ bootstrap.scss
       │
       ├ foundation/
       │    ├ _index.scss
       │    ├ _mixin.scss
       │    └ _variables.scss
       │
       ├ global/
       │    └ _index.scss      # 追加
       │
       ├ layout/
       │    ├ _l-footer.scss
       │    ├ _l-header.scss
       │    └ _l-main.scss
       │
       ├ object/
       │    ├ component/
       │    │    └ 略
       │    ├ project/
       │    │    └ 略
       │    └ utility/
       │         └ 略
       │
       └ index.scss

src/scss/foundation/_scss_variable.scss

先程まであった上書き用のコードは削除。

src/scss/foundation/_index.scss

@forward "variables";
@forward "mixin";

Bootstrap 4 を読み込む @forward を削除。

src/scss/global/_index.scss

@forward "../assets/bootstrap/bootstrap"; //bootstrap

Bootstrap 4 を読み込む部分を切り出したのを、 src/scss/global/_index.scss とします。

src/scss/layout/_l-header.scss

@use "../foundation" as f;
@use "../global" as g with (
    $theme-colors: (
        /* 上書き */
        primary: f.$own-color,
        /* デフォルトにないカラーの追加 */
        main: f.$own-main-color,
    ),
);

.l-header {
    .navbar-brand {
        &,
        &:link,
        &:visited {
            color: f.$own-main-color;
        }
        &:hover,
        &:active,
        &:focus {
            color: f.$own-main-color_l;
        }
    }
}

// 略

実際に使う部分。変数は foundation, Bootstrap 4 は global で読み込み、 foundation を先に読み込むことで、 with の中で使用できるようにしました。

src/scss/index.scss

@use "layout/l-header";
@use "layout/l-main";
@use "layout/l-footer";

index.css になる部分は読み込みだけ。

この形にすることでようやく当初意図していた形にすることができました。

備考1

今回の方法では Bootstrap 4 の中身は一切触れない方向で実装しました。そのため、 Bootstrap 4 の中は以前として @import で読み込まれており、変数はグローバルスコープに定義されるようです。

そのため、今回は src/scss/layout/_l-header.scss でしか with を使用していませんが……

デフォルト状態ではこのような状態になります(プライマリーカラーがデフォルト、右側はデフォルト状態では存在しない btn-main クラスが付与されているため背景色なし)。

src/scss/layout/_l-header.scss に with を適用しただけで、メイン部分のボタンも影響を受けます。今回の場合は「全体で色を変更したい」のでこれで良いのですが、 @use や @forward の位置付けからすると役割を発揮できていない状態なので微妙なところ。

今後、 Bootstrap が @use, @forward に変更した場合にこの辺りの挙動は変わると思われます。

※ちなみに、v5.0.0-alpha3 でもまだ @import でした。

備考2

備考1と関連しますが、グローバルスコープに定義されるということは……

src/scss/layout/_l-header.scss

@use "../foundation" as f;
@use "../global" as g;

.l-header {
    .navbar-brand {
        &,
        &:link,
        &:visited {
            color: f.$own-main-color;
        }
        &:hover,
        &:active,
        &:focus {
            color: f.$own-main-color_l;
        }
    }
}

// 略

src/scss/layout/_l-header.scss は普通に src/scss/global/_index.scss を読み込み……

src/scss/layout/_l-main.scss

@use "../foundation" as f;
@use "../global" as g with (
    $theme-colors: (
        /* 上書き */
        primary: f.$own-color,
        /* デフォルトにないカラーの追加 */
        main: f.$own-main-color,
    ),
);

.l-main {
    background-color: f.$own-bg-color;
    color: f.$own-color;
    .btn-main {
        color: f.$own-color;
    }
}

// 略

src/scss/layout/_l-header.scss の後に読み込まれる src/scss/layout/_l-main.scss で with を使用した場合、以下のエラーが発生します。一度読み込んだモジュールが with 使用で再度読み込まれている、という旨のエラーですね。

Error: This module was already loaded, so it can't be configured using "with".
  ┌──> src/scss/layout/_l-main.scss
4 │ ┌ @use "../global" as g with (
5 │ │     $theme-colors: (
6 │ │         /* 上書き */
7 │ │         primary: f.$own-color,
8 │ │         /* デフォルトにないカラーの追加 */
9 │ │         main: f.$own-main-color,
10│ │     ),
11│ │ );
  │ └─^ new load
  ╵
  ┌──> src/scss/layout/_l-header.scss
4 │   @use "../global" as g;
  │   ━━━━━━━━━━━━━━━━━━━━━ original load
  ╵
  src/scss/layout/_l-main.scss 4:1  @use
  src/scss/index.scss 9:1           root stylesheet

Error: src/scss/layout/_l-main.scss
Error: This module was already loaded, so it can't be configured using "with".
  ┌──> src/scss/layout/_l-main.scss
4 │ ┌ @use "../global" as g with (
5 │ │     $theme-colors: (
6 │ │         /* 上書き */
7 │ │         primary: f.$own-color,
8 │ │         /* デフォルトにないカラーの追加 */
9 │ │         main: f.$own-main-color,
10│ │     ),
11│ │ );
  │ └─^ new load
  ╵
  ┌──> src/scss/layout/_l-header.scss
4 │   @use "../global" as g;
  │   ━━━━━━━━━━━━━━━━━━━━━ original load
  ╵
  src/scss/layout/_l-main.scss 4:1  @use
  src/scss/index.scss 9:1           root stylesheet

そのため、 with を使用するならば全体を通して src/scss/global/_index.scss が最初に @use で読み込まれる部分に既述する必要があります。

以上、知らないと全体的に嵌まり所が多い感じだったのでメモしておきます。