2012-02-11 12 views
11

イントロ:URLパラメータをless cssで使用できますか?

私はasp.net mvc環境でLESSを試しています。

私はサーバー側の処理にdotlessを使用しています(クライアント側の処理、特にプロジェクト全体を公開する処理は使用しません)。

私は、さまざまなもの(時間帯など)に応じて異なる配色があるデザインを適用する必要があります。

このケースでは、パラメータ化されたCSSを設計し、すべてのテーマについてファイルの冒頭にある10個の変数のように変更するだけでは、非常に強力ではありませんでした。

問題:

しかし、私は何とか外のパラメータからカラーテーマを変更する必要があります。

アイデアは:?

まず私はstyle.lessテーマ= fuschiaのようなURLパラメータが良いだろうと思ったが、私はこのような何かを解析する方法を発見しました。

私は非常に短い無色、緑色、無色、オレンジ色のものを宣言された色の変数だけで構成し、それらのすべてをメイン変数なしで含むことは確実な解決策であると考えました。

私は2番目の解決策を試す機会がありませんでしたが、これはこれを行う最も堅牢な方法についてアドバイスを求めるのに良い時期だと思いました。

問題は次のとおりです。外部からの私の少ないファイルでいくつかのことを制御したい。

答えて

22

はい、そうすることができます(なぜなら、その理由のためにその機能を実装したからです)。

Dotlessは、外部からのパラメータをquerystringパラメータでサポートします。

<link rel="stylesheet" href="style.less?foo=bar" /> 

では、次のあまりを使用できるようになります:

@foo = bar; 

パラメータインジェクションのコードは非常に簡単です。変数の宣言を普通のlessファイルに付加するだけなので、querystringパラメータになるものは上記の構文に従います。

コードは非常に単純です:https://github.com/dotless/dotless/blob/master/src/dotless.Core/Engine/ParameterDecorator.cs

+1

これは私が望んでいた答えです! :D – SoonDead

+0

@Tigraine:これはどのように保存されますか?攻撃者は悪質なコードをスタイルシートに簡単に挿入する可能性があります。 – jor

+0

これはあまり簡単ではありません。 '@import 'テーマを作成する必要がありました-param-default.less"; 'my line' @import "darkly-variables - @ {theme} .less"; '@theme:dark;コンパイルの問題でした。 –

5

AFAIKの場合、コンパイルにはdotnetlessのパラメータを渡すことはできません。

提案として、より少ないファイルを呼び出すだけではどうですか?これは、Viewbagプロパティを使用することでかなり簡単に実行できます。

色々なものを少なくするには、最初に、それぞれの色のセットを含むファイルを少なくします。次に、ベースのCSSファイルをインポートします。 dotnetlessは、親ファイルのカラー定義をベースファイルの使用法とマージします。私はちょうどこの上とMVC3プロジェクトをテストし、それが動作

@baseGray: #ddd; 
@baseGrayDark: darken(@baseGray, 15%); 
@baseGrayLight: lighten(@baseGray, 10%); 
@import "baseCss.less"; 

- だからあなたのようなものを持っています。

+0

ありがとう、これも私が必要なものです。複数の回答を喜んで受け入れることができるケースがあります。これは一つです。 – SoonDead

関連する問題