問題タブ [css-variables]

コードへのリンクは次のとおりです。長すぎず、54 行 + HTML です。

https://codepen.io/Yonkai/pen/YrdNqE?editors=0100

私が抱えている問題は、22行目で、この行がどのように機能するかを具体的に理解していないことです:

--i (index) カスタム CSS 変数がどのように処理されているのか、またはこれらのインデックスにアクセスしているのか、アニメーションの各呼び出しで各インデックスがどのように選択されているのかわかりません。(SASS からコンパイル):

これは calc() や var() の機能やカスタム変数とは無関係の何かと関係があると思いますが、正直唖然としています。

これは他の誰かのコードに基づいており、YouTube ビデオがありますが、あまり役に立ちません。

CSS変数の算術演算がコードを壊す理由を見つけるのを手伝ってください。

1 つのルールを含む単純な CSS ファイルから始めました。

ブラウザーでは、文字どおりに動作します。フォント サイズは 16px、行の高さは 32px、フォント自体は Arial です。

次に、変数を追加しました。

それも機能します。フォントサイズと同じにしたので、行の高さは16pxだと思いました。

しかし、2 番目の値を乗算すると、フォント宣言が機能しなくなりました。

すべてのプロパティfont-size、line-height、およびfont-familyはブラウザのデフォルトに設定されています。

font省略形のプロパティを 3 つの異なるロングハンド プロパティに分割すると、コードは再び正常に動作します。

前のコード サンプルの何が問題なのですか?また、手書きのプロパティに分割せずに動作させる方法はありますか?

画像カルーセルをカプセル化する Angular コンポーネントがあります。:host セレクターを使用してそれ自体をフレックスボックスにし、ngFor を使用して @Input プロパティを介して渡された画像の配列内の各画像に対して img タグを繰り返します。

関連する問題が 2 つあります。

1) 写真のスタイルを固定の高さまたは幅に設定できるようにしたい。2) 写真の間隔を空けるために、imgs に margin-right と margin-bottom を設定したいと考えています。

注意が必要なのは、これらの設定をカルーセル テンプレートではなくホスト テンプレートで決定して、特定のページのニーズに基づいて変更できるようにすることです。

次のようなカスタム css プロパティを使用して動作させました。

画像リスト css:

テンプレートCSSの呼び出し:

次の警告が表示されます。

カスタム プロパティは無視されました: スコープが最上位の :root 要素 (image-list { ... --pictureMaxHeight: ... }) に限定されていません

全文：

./src/app/pages/image-list-test/image-list-test.component.css の WARNING (Error のインスタンスの代わりに発行された値) postcss-custom-properties: /home/username/wwwroot/src/ app/pages/image-list-test/image-list-test.component.css:2:5: カスタム プロパティは無視されました: 最上位の :root 要素 (image-list { ... --pictureMaxHeight: ... }) NonErrorEmittedError: (エラーのインスタンスの代わりに発行された値) postcss-custom-properties: /home/username/wwwroot/src/app/pages/image-list-test/image-list-test.component. css:2:5: カスタム プロパティは無視されました: Object.emitWarning (/home/username/wwwroot/node_modules) の最上位の :root 要素 (image-list { ... --pictureMaxHeight: ... }) にスコープされていません/webpack/lib/NormalModule.js:117:16) result.warnings で。forEach (/home/username/wwwroot/node_modules/postcss-loader/lib/index.js:149:49) at Array.forEach (native) at postcss.process.then (/home/username/wwwroot/node_modules/postcss- loader/lib/index.js:149:27) @ ./src/app/pages/image-list-test/image-list-test.component.ts 48:21-62 @ ./src/app/app. module.ts @ ./src/main.ts @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

app.component.css ファイルで変数を宣言しようとしましたが、受け取ったエラーに違いはありませんでした。

さらに、プロジェクト内のすべてのコンポーネントに対してカスタム プロパティを宣言すると、カプセル化が完全に壊れてしまいます。

興味深いのは、警告があっても機能することです。

カスタム html 属性を宣言できることはわかっていますが、これはコンポーネントの構造とは関係なく、純粋に視覚的なスタイリングであるため、私には臭いように思えます。

ここで何かを見逃したのでしょうか、それともこの要件に対処するためのより良い方法はありますか?