如何設計 Svelte 應用程序的樣式
Web 框架來來去去，但最有前途的框架之一是 Svelte。 Svelte 是 React 的一個很好的替代品，儘管它已經擁有一個龐大的社區，但它絕對是一個值得關注的框架。 Svelte 可讓您輕鬆設計應用程序的樣式，並提供多種方法。
設計 Svelte 應用程序
Svelte 提供了多種應用程序樣式設置方法，包括導入 CSS 文件、使用內聯樣式以及利用稱為“槽”的替代語法。每種方法都有獨特的優點和缺點，開發人員在選擇最適合其需求的方法時應仔細考慮。
設置您的 Svelte 項目
要使用 ViteJS 前端構建工具成功安裝 Svelte，系統上必須預裝 Node.js 運行環境和 Node Package Manager (NPM)。後者可以通過終端執行以下命令進行簡單檢查來確認:
node -v
確保 Node 可以運行後，啟動命令行界面會話並連續執行後續命令:
npm create vite
或者:
yarn create vite
要使用具有指定配置的 Vite 創建新的基於 Svelte 的項目，請按照以下步驟操作:1.在終端或集成開發環境（IDE）中使用“vite init”命令生成具有給定規格的新項目。確保項目是在您選擇的文件夾中創建的。2.通過執行“cd”命令，然後輸入包含項目文件的文件夾的路徑，將當前工作目錄更改為新生成的項目文件夾。3。要設置項目所需的依賴項，請執行相應的安裝命令。在這種情況下，它將涉及安裝諸如“@sveltejs/kit”、“@sveltejs/vite”之類的軟件包，以及構建應用程序所需的任何其他所需的庫或框架。
npm install
或者:
yarn
為了開始開發過程，必須首先安裝項目所需的任何必要的依賴項。要啟動開發服務器，只需在終端或命令提示符中執行適當的命令即可。
npm run dev
或者:
yarn dev
定義項目的標記
事實上，要開始手頭的任務，請使用您喜歡的編碼界面訪問項目並刪除“assets”和“lib”文件夾。此外，請確保清除“app.css”文件和“App.svelte”文件中的內容。然後，打開“main.js”文件並插入以下文本:
import App from './App.svelte'
const app = new App({
target: document.getElementById('app'),
})
export default app
事實上，現在讓我們通過瀏覽項目文件夾結構來訪問 Svelte 組件的主腳本部分。一旦我們到達 App.svelte 文件，請找到其中的 元素。然後，隨意使用現代 JavaScript 語法定義一個名為“links”的新 JavaScript 數組變量。該數據元素集合將為我們的應用程序存儲各種超鏈接資源。
<script>
let imageLinks = [
"https://images.pexels.com/photos/1170986/pexels-photo-1170986.jpeg",
"https://images.pexels.com/photos/1754986/pexels-photo-1754986.jpeg",
"https://images.pexels.com/photos/3257811/pexels-photo-3257811.jpeg",
"https://images.pexels.com/photos/3643714/pexels-photo-3643714.jpeg",
"https://images.pexels.com/photos/755834/pexels-photo-755834.jpeg",
"https://images.pexels.com/photos/2928158/pexels-photo-2928158.jpeg",
];
</script>
在 HTML 文檔的上下文中，利用標籤來定義主容器元素，該元素的樣式應作為其父結構中的主要組件。這個集中容器應作為容納各種視覺元素的容器，這些元素源自聚合在“imageLinks”標題下的圖像鏈接數組。在整個過程中，採用迭代技術來構建 HTML 元素的各個實例，並根據需要將它們附加到包含的容器實體中。
<main>
<h1>Cute Cat Gallery</h1>
<h3>See the cutest images of cats from the internet</h3>
<div class="container">
{#each imageLinks as url}
<div class="image-container">
<img src={url} />
</div>
{/each}
</div>
</main>
建立標記的語法後，現在可以繼續前進並應用通過直接 CSS 導入來設計軟件樣式的第一種方法。
通過直接 CSS 導入來設計 Svelte 組件的樣式
合併 Svelte 組件通常涉及編寫外部 CSS 文件並將其直接導入到組件的腳本部分。為此，可以在 script 標籤的最高層次結構中包含以下語句:javascriptimport { css } from ‘./app.css’;
import "./app.css";
請修改app.css文件，將“container”類的顯示屬性設置為“grid”，並將“image-container”類的填充調整為10像素。這將影響“樣式”選項卡中圖像在其容器內的佈局和間距。
.container {
display: grid;
grid-template-columns: 33.3% 33.3% 33.3%;
}
.image-container {
padding:10px;
}
當用戶通過使用 CSS 和 JavaScript 中的調整大小技術和事件處理與顯示的圖像交互時，調整視覺元素的大小以適應不同的屏幕尺寸並應用特定的設計選擇。
img {
max-width: 100%;
height: auto;
border-radius: 10px;
transition: 250ms;
}
img:hover {
scale: 1.03;
transition: 250ms;
}
在 Web 瀏覽器環境中執行代碼時，應觀察到以下視覺顯示:
直接 CSS 導入的優點
通過使用無關的文檔來描述級聯樣式表的重用，可以在各種不同的組件中無縫應用一致的視覺元素，這在努力在不同的設計元素中建立一致性時特別有利。
重新定義網頁的佈局和外觀通常是通過外部 CSS 文檔更改表示層來實現的，而不是調整內容的基本結構。通過隔離這兩個元素，可以更輕鬆地對其中一個元素進行更改而不影響另一個元素，從而在自定義站點的視覺特徵時增強多功能性。
直接 CSS 導入的缺點
雖然利用外部 CSS 文件具有效力，但當外部樣式彼此一致時，也可能會導致不可預見的干擾和取代。此類事件可能會引發延長的調試和糾正過程。為了防止 Svelte 應用程序中出現不必要的風格衝突，將
網站的加載過程會受到獲取主要 HTML 文件之外的其他資源（例如外部 CSS 文件）的必要性的影響。雖然這種延遲乍一看似乎微不足道，但它可能會在多個外部樣式表上累積，最終影響整體性能。
使用 Svelte 樣式標籤進行樣式設置
自定義 Svelte 組件外觀的另一種方法是利用 Svelte 本身提供的樣式屬性，這些屬性遵循特定的實現語法。此語法類似於以下結構:
<script>
<!-- Your logic goes here -->
</script>
<!-- Markup goes here -->
<style>
<!-- styling goes here -->
</style>
這種方法的主要好處在於其基於範圍的性質，其中每個組件的樣式彼此隔離，防止不同組件之間的干擾。應該注意的是，Svelte 中的內聯樣式優先於應用於同一元素的外部 CSS 樣式。可以通過在“App.svelte”文件的末尾添加以下代碼片段來觀察這一點:
<style>
h1 {
background-color: red;
}
</style>
將提供的代碼片段合併到“App.css”文件末尾以用於樣式設計。
h1 {
background-color: yellow;
}
事實上，當代碼在 Web 瀏覽器中執行時，我們應該觀察到“# ”元素的表示屬性已被修改為包含深紅色調，取代了之前在“App.css”中規定的檸檬色調。 ` 文件。
使用 CSS 預處理器設置樣式
設計 Svelte 組件時廣泛採用的技術涉及將 CSS 預處理器合併到“ style ”屬性中。此類預處理器提供了許多好處，例如促進高級函數、mixin 等複雜操作的使用，以及啟用可嵌套樣式（這是最近在標準 CSS 實踐中引入的一項創新）。
在選擇用於設計網站樣式的預處理器時，有一系列可用選項，包括但不限於 LessCSS、Sass 和 Stylus。為了使用首選的預處理器，需要通過命令“npm install [preprocessor] –save-dev”將其安裝為開發依賴項。
npm install -D <css-preprocessor>
或者:
yarn add -D <css-preprocessor>
為了在項目中使用特定的預處理器，請確保在隨後的命令中將其名稱替換為“預處理器”。舉例來說，如果您希望集成 Less 並將其應用到您的項目中，請執行以下步驟:
npm install -D less
或者:
yarn add -D less
完成此任務後，您可以將 lang 屬性應用於 元素，並為其指定一個值“less
<style lang="less">
</style>
事實上，通過在 Svelte 組件中實現 Less CSS，您現在可以利用其全面的功能來設計和格式化 Web 應用程序的視覺元素。
是什麼讓 Svelte 如此神奇?
當然！以下是我嘗試重新表述的內容:為了使文件被視為 Svelte 文件，它必須以“.svelte”後綴結尾。一旦 Svelte 編譯器遇到該文件，就會對其內容進行相應的解析和處理。解析的結果是，編譯器生成相應的 JavaScript 和 CSS，然後將它們發送到瀏覽器。通過利用這些高效的輸出格式，由於與生成的內容相關的加載時間更快，用戶能夠享受更簡化的瀏覽體驗。
當在基於 Svelte 的項目上下文中合併外部 JavaScript 庫被認為是合適的時，可以將其直接包含在您的.svelte 文件中，從而無需通常與 React 等替代方案相關的包含元素。