【HTMLアプリ作成術】SvelteアプリをTyped.cssでSassからスタイリングを試してみる
※ 当ページには【広告/PR】を含む場合があります。
2022/03/05
※この記事はScratchを修得後にHTMLアプリを作成してみたい中高生向けのアドバンスな内容です。
以前の記事で軽量なJavascriptフレームワーク・
この回の内容は、バリバリのJavascript/Typescriptを使ったアプリの実装を中心に解説してみました。
最近のモダンなHTMLアプリの作成において、他のプログラミング言語とは異なる特徴として、アプリの実装は
Typescript(Javascript)Alt-CSS(Sassなど)良く初学者のかたなどは、「どちらを覚えるべきか」「どちらでHTMLアプリを作成するのか」等の疑問が生じると思いますが、フロントエンドエンジニアを目指すのなら答えは
十分に使いこなせると感じるまでの学習の道のりは険しいかと思いますが、焦らずに一つ一つの基礎を手を動かしながら勉強していきましょう。
HTML＆CSSの基礎の全てをサイトで解説していくのは厳しいですが、巷ではより優秀な学習教材に溢れています。
基礎や基本を学びたいのなら、
今回の記事の目的として、
Types.cssとは
ライセンスフリーのSassスタイルはウェブで探すと結構公開されている有志の方が存在しています。
今回一例として取り上げるのは
百聞は一見に如かずで、typed.scssを仕込んだSvelteアプリを先にお見せすると以下のようになります。
※なお、iphone OSブラウザにはTyped.cssが対応していないとのことですので正常に表示されないブラウザがあることにご注意ください。
このようにSassのミックスインを使うだけで、Javascript部分を一切手を掛けずに複雑な効果をアプリに与えることが可能です。
以降では、このようなScssファイルをSvelteでどのように使うのかポイントを掻い摘んで説明していきましょう。
SvelteアプリでSassミックスインを実装する
前提としてSvelteでSassが使えるようにしないといけません。
Sassミックスインの外部読み込みは@useを使う
別サイト記事で
さて、Svelteプロジェクトの基本となるHello World的なところは
srcstylesglobal.scss_typed.scss簡単なプロジェクト構造は以下の通りです。
$tree
.
├── src
│ ├── App.svelte
│ ├── main.js
│ └── styles
│ ├── _typed.scss
│ └── global.scss
├── package.json
└── rollup.config.js
Typed.cssのプロジェクトはnpmインストールする形では提供されていないため、まずはTyped.cssから
_typed.scss次にメインのスタイルファイルである
global.scss_typed.scss@use //👇ここで_typed.scssの中身をインポート➡以降で@includeで呼び出せる
@use 'typed' as *;
html, body {
position: relative;
width: 100%;
height: 100%;
}
body {
color: #333;
margin: 0;
padding: 8px;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
a {
color: rgb(204, 46, 151);
text-decoration: none;
&:hover { text-decoration: underline; }
&:visited { color: rgb(0,80,160); }
}
div.type-trial-1 {
//👇typedミックスインを利用する
@include typed("String 1");
}
なお
@useこれで既にSvelte側でtyped.cssのSassミックスインが使えるような状態になっています。
以下のように簡単な
App.svelte <main>
<h1>Hello Typed.css!</h1>
<p>Visit the <a href="https://github.com/brandonmcconnell/typed.css">Typed.scss project</a> to learn how to build an apps.</p>
<div class="type-trial-1"></div>
</main>
<style lang="scss">
@import "./styles/global.scss"
</style>
これでSvelteアプリをビルドすると、以下のようなアプリになると思います。
Typed.cssの他にも楽しいScssテーマが公開されているので、今回のテクニックを覚えておくと色々と面白いアプリが簡単に作れるようになると思います。
余談〜VSCodeで出現するエディタからのエラーの対処法
VSCodeを使ってSvelteアプリ開発している人で、Sass用のプラグインをインストールしていた場合、デバッグコンソールやソースコード中に、
Error passing a list to a SASS mixin: "] expected"
とか、セレクター定義の位置に置きたい
%このエラーが出たからといってSassがビルド出来ない訳ではなく、非推奨の文法を使っていることを怒ってきているため、
.vscode/settings.json {
//...中略
//👇を設定に加える
"scss.validate": false
}
これでエディタ中のエラーが無視できるようになります。
まとめ
今回はSvelteアプリに個別に用意したようなSassファイルからミックスインを読み込む方法を紹介してみました。
Sassの魅力はJavascriptで実装するとかなり時間が掛かりそうなページのスタイル効果を簡単に実現できるところにあります。
是非ともjavascriptとCssの学習を進める際には、どちらかに偏らずバランスの良い勉強を行いながらHTMLの技術の理解を深められてください。