イントロ

おい!私はRudy Alula、スタンリーRoboticsのフロントエンド開発者として働いています.
プレゼンテーションが行われた今、あなたが探索すべきogoneから新しい機能を紹介しましょう
.

歴史

以前のバージョンでは、OGoneはSSSS/SASS/スタイラスのようなテキストを変換するためにDeno SassとDenolusのようなモジュールをサポートしています.
これらは維持されませんでした、そして、中でアドバイスの後でOGONEの中で多くの問題を生じました.私はそれらを消去..
SASS/スタイラスユーザであるので、私は裸のOGONEは私が使用されているトリックなしでネイティブCSSをサポートすることができませんでした.
それで、私は私が欲しいすべてのトリックに対処することができた内部のCSSプリプロセッサを作成することに決めました.

明らかに出てきた

明らかに、このプリプロセッサの名前は、私は理由がわからないが、それだけでクールなように聞こえる
それがコンパイルのステップの1つであるので、より深刻に明らかに、より大きな明らかにします.コンポーネントにアクセスし、コンポーネントがどのコンポーネントにインポートされるかを知っています.
過去に、自然にスタイルタグに言語を与えるでしょう<style lang="obvious"> , それはもう必要ありません、明白は現在デフォルトです.

それはクールですが、機能は何ですか？

概要を説明します.

入れ子ルール

による親参照&

インポートコンポーネントのルールとVARS@use 'component-tagname' as Component;

輸出規則@export const myVar = red;

Vars内のルールを保存する@const t = div { /* ... */}

ルールを広げる@const rule = div {...}; div { ...$rule; }

VARS@const t = value;

eval 1変数の値@const* var = true;

CSSの

入れ子ルール

これは明らかだと思う.この機能が必要でした.
たとえば、スタイル要素の中で以下のように書くでしょう.

すべての段落要素は、div要素の子である段落に対して、灰色でテキストを表示する必要があります.

親参照

使用する& 親セレクタへの参照を行う文字.

のようです

div.container { background: blue; }
div.container:hover { background: red; }

変数

jsからのvaraible宣言の取得これはどのようなルール/変数を外部使用するためにご利用いただけますフィルタリングします.
変数を宣言する@const 次のように:

さて、私たちは、コンポーネントの外ではなくルールを通してそれらのVARSを使うことができると言いましょう

コンポーネントからのインポート/エクスポート

これは、以下からの名前空間のようですが、コンポーネントを通してそれをします.
つの規則を書きましょう.つは、もう一つの個人的なものを輸出しました.

使用開始$spanRule 別のコンポーネント内部.

結論

SASSとあまり触発されなかったが、私はいくつかの構文でいくつかの自由を取った.
この記事はOGoneの新しいCSSパーサーだけを公開します.CSSルールのプロパティを解析できるようになりましたので、CSSルールを遮光物定義のために使用する予定です.もし興味があれば、これをチェックしてくださいwebGL1/2 API

リソース

Otone ^0.1.3 VSコード

Ogone 0.22.0

デコ^ 1.3.0

denoで利用可能:here