アストロジェイエスサラスタイリング
32703 ワード
💄 アスタースタイル
我々は、このポストでAstro JS Sassスタイリングをセットアップする方法を見ます.現代のCSSは現在開発者が過去に提供するためにSASSまたはSCSSを見た多くの機能をサポートしますが、多くの開発者はまだSALSを評価します.Svelte、Vueまたは他の何かと一緒に反応を使用することに関してのアストロのフレームワーク不可知論は、すでによく知られています.すべての人気のフレームワークのこのサポートをレンダリングからスタイリングに拡張することを期待します.アストロはここで失望しない.このポストでは、我々はどのようにだけでなく、グローバルスタイルを追加するには、あなたのアストロとスヴェルトのコンポーネントにスタイルをスコープをスラを使用することができます参照してください.実際、我々はスタイリングのためにSCSSモジュールを使用することによって反応するためにそれを拡張することができます.ポーランドを追加するには、特定のコードスタイルを強制するだけでなく、あなたのSCSSがちょうどどのようにそれを好むかを確認するためにStyleLintの設定を見てください!
🧱 アストロJSスタイルのスタイリング
新しいアプリを構築するよりも、我々はdemo app from our Astro JS Tutorial とSCSSにスタイルを変換します.チュートリアルでは、私たちはバニラCSSを使用して、あなたは、多くの多くの変更を得るために変更されませんが表示されます.この投稿では、ファイルを作成するために必要な主な変更点を見ます.あなたが沿って従ってアプリを構築する代わりに、このスタイルのような場合私に知らせてください.あなたが本当にあなたが一緒に読んで何かを構築したい場合は、することができますclone the Astro JS Tutorial そして、scssにそれを変換する変更を行います.
⚙️ アストロJSスツールスタイリング
ここではSASSパッケージとStyleLintを加えます.
pnpm add -D sass stylelint stylelint-config-recommended-scss stylelint-config-standard
🌍 アストロJSスツールスタイリング
グローバルスタイルファイルを作成します
src/styles/styles.scss . 同様に、より慣用的なsassを作るための構文を変更すると、私たちはまた、いくつかのファイルをインポートします.@charset "UTF-8";
@import './fonts.scss';
@import './variables.scss';
body {
margin: $spacing-0;
background: hsl($colour-dark-hue $colour-dark-saturation $colour-dark-luminance);
font-family: Roboto;
text-align: center;
}
h1 {
font-size: 3.815rem;
margin-bottom: $spacing-12;
}
/* TRUNCATED... */
1 私たちはcharset .変数とフォント
以下はフォントファイルです.
/* roboto-regular - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local(''), url('/fonts/roboto-v29-latin-regular.woff2') format('woff2'),
url('/fonts/roboto-v29-latin-regular.woff') format('woff');
}
/* roboto-700 - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local(''), url('/fonts/roboto-v29-latin-700.woff2') format('woff2'),
url('/fonts/roboto-v29-latin-700.woff') format('woff');
}
/* colours */
/* honey-yellow */
$colour-brand-hue: 39;
$colour-brand-saturation: 92%;
$colour-brand-luminance: 57%;
/* safety orange blaze orange */
$colour-secondary-hue: 21;
$colour-secondary-saturation: 89%;
$colour-secondary-luminance: 52%;
/* moss green */
$colour-alternative-hue: 84;
$colour-alternative-saturation: 29%;
$colour-alternative-luminance: 43%;
/* pine tree */
$colour-dark-text-hue: 100;
$colour-dark-text-saturation: 18%;
$colour-dark-text-luminance: 13%;
/* old lace */
$colour-light-text-hue: 50;
$colour-light-text-saturation: 66%;
$colour-light-text-luminance: 95%;
$colour-dark-hue: 206;
$colour-dark-saturation: 46%;
$colour-dark-luminance: 37%;
/* spacing */
$spacing-px: 1px;
$spacing-0: 0;
$spacing-4: 1rem;
$spacing-6: 1.5rem;
$spacing-8: 2rem;
$spacing-12: 3rem;
$spacing-32: 8rem;
💅🏽 AstroとSvelteコンポーネントにおけるスコープスタイル
次に、アストロファイルでスコーピングスタイリングと一緒にアストロJS SASSスタイルのインポートを参照してくださいにホームページを見てみましょう.
---
import '$styles/styles.scss';
import { Markdown } from 'astro/components';
import ReactVideo from '$components/Video.jsx';
import SvelteVideo from '$components/Video.svelte';
---
<html lang="en-GB">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width" />
<title>RodneyLab Minimal Astro Example</title>
</head>
<body>
<main class="container">
<h1>Astro JS Tutorial Site</h1>
<p>This demo is not endorsed by Ben Awad, just thought the video content was fitting!</p>
<ReactVideo client:load />
<SvelteVideo client:load />
<section class="mdx-container">
<Markdown>
## Astro in 100 Seconds
<div class="video-container">
<iframe
title="Astro in 100 Seconds"
width="560"
height="315"
src="https://www.youtube-nocookie.com/embed/dsTXcSeAZq8"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
</Markdown>
</section>
</main>
</body>
</html>
<style lang="scss">
@import '../styles/variables';
.container {
display: flex;
flex-direction: column;
background: hsl($colour-dark-hue $colour-dark-saturation $colour-dark-luminance);
color: hsl($colour-light-text-hue $colour-light-text-saturation $colour-light-text-luminance);
padding: $spacing-8 $spacing-0 $spacing-32;
}
.container a {
color: hsl($colour-secondary-hue $colour-secondary-saturation $colour-secondary-luminance);
}
.mdx-container {
display: flex;
flex-direction: column;
background: hsl(
$colour-alternative-hue $colour-alternative-saturation $colour-alternative-luminance
);
align-items: center;
width: 100%;
padding: $spacing-8 $spacing-0 $spacing-12;
color: hsl($colour-light-text-hue $colour-light-text-saturation $colour-light-text-luminance);
}
</style>
2 我々はグローバルSASSスタイルシートをインポートします.これはCSSスタイルシートをどのようにインポートするかということとは異なりません.実際、唯一の本当の違いはファイル名の変更です.エイリアスを定義しました$styles ASsrc/styles にtsconfig.js ファイル.これにより、コードで見る速記を使用できます.これについては、より詳細な説明を見ることができますAstro JS tutorial .を使用してスコープスタイルを追加することができます
<style> タグ(バニラCSSと同じように).Aを加えるためにsassを使うとき、しかし、我々は覚えておくべきですlang="scss" 43行目のようにスタイルタグへの属性.なぜなら、src/styles/variables.scss このスタイル要素の中では、そのファイルをインポートできます.我々は、行でそれを行う44 .アストロJSスツールスタイリング
ちょうど私たちが見たアストロファイルのようなsvelteのコンポーネントの作業のスコープスタイル.これは、ページやレイアウトではなく、コンポーネントであるため、Svelteファイルのグローバルスタイルシートをインポートしません.コンポーネントはAstroページに埋め込まれるので、グローバルなスタイルがインポートされるようにページやテンプレートに依存できます.
完全性のために、svelteファイルはここにあります.注意
container クラスは、クラスと衝突しませんcontainer 私たちは宇宙飛行士のために宇宙のコンポーネントで使用しました.<script>
$: altColours = false;
</script>
<section class={`container${altColours ? ' container-alt' : ''}`}>
<h2>Svelte Component</h2>
<div class="video-container">
<iframe
title="Trying Svelte for the Third Time"
width="560"
height="315"
src="https://www.youtube-nocookie.com/embed/xgER1OutVvU"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
/>
</div>
<button
class={`button${altColours ? ' button-alt' : ''}`}
on:click={() => {
altColours = !altColours;
}}><span class="screen-reader-text">Toggle colours</span></button
>
</section>
<style lang="scss">
@import '../styles/variables';
.container {
display: flex;
flex-direction: column;
background: hsl($colour-brand-hue $colour-brand-saturation $colour-brand-luminance);
align-items: center;
width: 100%;
padding: $spacing-8 $spacing-0;
color: hsl($colour-dark-text-hue $colour-dark-text-saturation $colour-dark-text-luminance);
}
.container-alt {
background: hsl($colour-secondary-hue $colour-secondary-saturation $colour-secondary-luminance);
color: hsl($colour-light-text-hue $colour-light-text-saturation $colour-light-text-luminance);
}
.button {
background: hsl($colour-secondary-hue $colour-secondary-saturation $colour-secondary-luminance);
}
.button-alt {
background: hsl($colour-brand-hue $colour-brand-saturation $colour-brand-luminance);
}
</style>
🧩 スタイルコンポーネント
アストロでは、ボックスのスコープの解決策を我々はSvelteとアストロファイルのために見てきたものとして便利なスコープの解決策を持っていません.それを言って、それはまだSCSSモジュールを使用している範囲スタイルにまだかなり簡単です.これはサイドファイル(典型的にそれを使用するコンポーネントのように名前を付けられた)でスタイルを定義して、それらをコンポーネントファイルにインポートします.もっと見ましょう.
私たちは私たちの反応のビデオコンポーネントを定義している
src/components/Video.jsx . それから、我々は2008年にSassでそのスタイルを定めますsrc/components/Video.module.scss :@import '../styles/variables.scss';
.container {
display: flex;
flex-direction: column;
background: hsl($colour-secondary-hue $colour-secondary-saturation $colour-secondary-luminance);
align-items: center;
width: 100%;
padding: $spacing-8 $spacing-0;
color: hsl($colour-light-text-hue $colour-light-text-saturation $colour-light-text-luminance);
}
.container-alt {
background: hsl(
$colour-alternative-hue $colour-alternative-saturation $colour-alternative-luminance
);
}
.button {
background: hsl(
$colour-alternative-hue $colour-alternative-saturation $colour-alternative-luminance
);
}
.button-alt {
background: hsl($colour-secondary-hue $colour-secondary-saturation $colour-secondary-luminance);
}
styles を返します.実際のスコープ名クラスは、インポートするJavaScriptフィールドで定義されます.それらがJavaScriptでエンコードされていることを覚えて、我々は反応でそれらを使用しますclassName 属性import styles from '$components/Video.module.scss';
import { useState } from 'react';
export const ReactExample = function ReactExample() {
const [altColours, setAltColours] = useState(false);
return (
<section className={`${styles.container}${altColours ? ` ${styles['container-alt']}` : ''}`}>
<h2>Example React Component</h2>
<div className="video-container">
<iframe
width="560"
height="315"
src="https://www.youtube-nocookie.com/embed/PJ0QSJpJn2U"
title="Should you Stop Using React"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
/>
</div>
<button
className={`${styles.button}${altColours ? ` ${styles['button-alt']}` : ''}`}
onClick={() => {
setAltColours(!altColours);
}}
>
<span className="screen-reader-text">Toggle colours</span>
</button>
</section>
);
};
export default ReactExample;
1 , モジュールファイルからスタイルをインポートします.スタイルモジュールはコンテナークラスを使用します.イン・ライン8 スコープ付きクラスを<section> 要素.我々はそれを介してアクセスstyles.container . スタイルがkebabケースクラスに接続されているスコープスタイルクラスを追加することもできます.button-alt ). 我々は、我々がスタイルを定義する行動でこれを見ますcontainer-alt クラス・イン・ライン13 of src/components/Video.scss . 我々のコードはJavaScript object accessor bracket notation , 私たちの反応コンポーネントのこのケバブケースクラスのための引用符付表記.だからこの場合はstyles['container-alt'] . 私たちは、ラインのこれの具体的な使用を見ます8 .👼🏽 アストロJSスツールスタイリング
StyleLintはあなたのアプリケーションスタイルの両方のチームで、自分の個人的なプロジェクトでの作業に役立つコードスタイルを実施するための素晴らしいツールです.あなたの継続的な統合プロセスにStyleLintチェックを簡単に構築することができます.
ファーストクリエイト
.stylelintrc.json 設定ファイル:{
"extends": "stylelint-config-recommended-scss",
"rules": {
"color-named": "never",
"font-family-name-quotes": "always-where-required",
"font-weight-notation": "named-where-possible",
"function-url-no-scheme-relative": true,
"function-url-quotes": "always",
"string-quotes": "single",
"value-keyword-case": "lower",
"unit-disallowed-list": [],
"max-empty-lines": 2,
"no-descending-specificity": true,
"no-duplicate-selectors": true,
"font-family-no-missing-generic-family-keyword": null,
"property-no-unknown": [
true,
{
"ignoreProperties": ["/^lost-/"]
}
],
"selector-pseudo-class-no-unknown": [true, { "ignorePseudoClasses": ["global"] }]
},
"ignoreFiles": ["node_modules/*"],
"defaultSeverity": "error",
"customSyntax": "postcss-html"
}
次に、LINTスクリプトをパッケージに追加します.JSON :
{
"name": "astro-js-sass-styling",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview",
"format": "prettier --write --plugin-search-dir=. .",
"lint:scss": "stylelint \"src/**/*.{astro,scss,svelte}\"",
"prettier:check": "prettier --check --plugin-search-dir=. ."
},
11 . ここでは、StyleLintをチェックします.astro , .scss and .svelte ファイル.スクリプトを実行するには、次のように入力します.pnpm run lint:scss
既存のHusky設定に追加できます.あなたがこれをセットアップしたいならば、ポストを見てください7 Tools to Streamline your CI Workflow .
🙌🏽 アストロジェイスズスタイリング
このポストでは、我々はAstro JS Sassスタイリングをセットアップする主要な部分を通り抜けました.特に見たところ、
私はこの記事が有用であることを発見し、どのようにあなた自身のプロジェクトのスターターと同様の改善を聞くことに熱心です.
🙏🏽 アストロJSスツールスタイリング：フィードバック
そのポストは役に立ちましたか.代わりに別のトピックの記事を見たいですか?新しい投稿のアイデアと連絡を取る.また、もしあなたが私のライティングスタイルが気に入ったら、あなたの会社のサイトにいくつかの記事を書くことができます.記事を読む上で、さらに以下のタッチを取得する方法を見つける.あなたがこの1つに類似したポストを支持したいならば、数ドル、ユーロまたはポンドを準備することができますconsider supporting me through Buy me a Coffee .
最後に、あなたのソーシャルメディアアカウントの投稿を共有すること自由に感じているすべてのあなたの信者は、それが役に立つでしょう.だけでなく、以下のコメントを残して、あなたはTwitterやaskRodney on Telegram . また、further ways to get in touch with Rodney Lab . 定期的に投稿Astro だけでなくSvelteKit . Also subscribe to the newsletter to keep up-to-date 我々の最新プロジェクトで.
Reference
この問題について(アストロジェイエスサラスタイリング), 我々は、より多くの情報をここで見つけました https://dev.to/askrodney/astro-js-sass-styling-scss-astro-setup-52l7テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol