2017-12-14 19 views
2

私はSquarespaceのテンプレート設計リソースを調べて、既存のテンプレートをよりよく理解することができました。これは私にLessを見せてくれました。私はそれがどこに合っているか確信していませんドキュメントにNode.jsが記述され、Lessをコンパイルすると、基本的にCSSのようなJavaScriptのようです。SquarespaceテンプレートとLess CSS

LessはJavaScriptの何らかの形式では実現できないし、JavaScriptと同じように思えるので、わかりません。私がLessのポイントを見逃しているのか、それとも私が見ていないJavaScriptでできないものがあるのか​​どうかは分かりません。

+0

少ないことは間違いありません。立ち止まるな。 Lessの背後にある全体的なポイントは、スタイルシートをもっとコンパクトにして読みやすくするだけでなく、変数定義(色やサイズなど)などの便利な機能を導入することで、CSSを少なくすることです。 – Paul

答えて

2

すべてのことJavascriptで行うことはできませんが、すべてのインスタンスでスタイルシートを操作することは実際的ではありません。

以内に

、このような何か:

@link-color: #428bca; 

a { 
    color: @link-color; 
} 

はプレーンJSで次のようになります。

const linkColor = '#428bca'; 
document.getElementsByTagName('a').forEach(link => { 
    link.style.color = linkColor; 
}); 

あなたがブラウザに提供するよりも仕事はJavascriptを解釈し、スタイルを設定し、はるかを与えていますLess出力を生成したCSSファイルです。

これはまた別の問題です。通常、レイアウト用のHTML、スタイリング用のCSS、インタラクション用のJavascript、CSSが不十分な部分のピックアップを使用します。

最高のパフォーマンスを得るには、必要に応じてその順序で使用してください。

まずブラウザをCSSに変換する必要があり、ブラウザはそれを解釈してJavaScriptを動作させる必要はありません。 Squarespace上のテンプレートにLessファイルを含めることは自動的に変換されるはずであることを見て、各ユーザーにページ上のスタイルを描画する際の追加のオーバーヘッドを与えず、サイトを高速化します。

関連する問題