2

私は次のことをしたいと思っていますが、かなりの量のいじりなしではどうすればよいかわからないようです。

テーマに2つのアイコンセットが必要です。1つの黒。1つの白。私のテーマには、2つの異なる配色から選択できます。グレーとブルー。灰色のテーマでは黒のアイコンが必要で、青のテーマでは白が必要です。

元の黒いアイコンセットをうまく作成し、それらをフォルダーに含めましたicon/*.png

ここで使用したいのは、アイコンが次のフォルダーにあるネストされたフォルダーのセットアップですicon/black/*.png。icon/white/*.png

これの問題は、私のアイコンがそのように名前が付けられることblack-addですwhite-add。私が本当に欲しいのはicon-add、テーマの行を変更する必要がなく@import icon-sprite(add)、正しいsprites/_blackまたはsprites/_whiteトップレベルのテーマsassファイルに含めるだけです。

これを可能にするために欠落している構成はありますか？または私はこれについて間違った方法で行っていますか？

この問題を回避するには、すべてのアイコンを含む汎用icon / *。pngフォルダーを作成し、生成された_icon.sassファイルをコピーして、白黒アイコン用に編集します。次に、灰色のテーマに「スプライト/黒」を含め、青色のテーマに「スプライト/白」を含めます。これは機能しますが、新しいアイコンを追加する場合は少しPITAです。

ここでの助けは大歓迎です！

明確化のための更新

現在のフォルダ構造。

themes/
    images/
        default/
            icon/
                black/
                white/
        blue/

config.rb

# $ext_path: This should be the path of the Ext JS SDK relative to this file
$ext_path = "../"

# sass_path: the directory your Sass files are in. THIS file should also be in the Sass folder
# Generally this will be in a resources/sass folder
# <root>/resources/sass
sass_path = File.dirname(__FILE__)

# css_path: the directory you want your CSS files to be.
# Generally this is a folder in the parent directory of your Sass files
# <root>/resources/css
css_path = File.join(sass_path, "..", "css")

images_path = File.join(sass_path, "..", "themes", "images", "default")
generated_images_dir = File.join(sass_path, "..", "themes", "images", "default")
generated_images_path = File.join(sass_path, "..", "themes", "images", "default")
http_generated_images_path = File.join("..", "themes", "images", "default")
sprite_load_path = File.join(sass_path, "..", "themes", "images", "default")

# output_style: The output style for your compiled CSS
# nested, expanded, compact, compressed
# More information can be found here http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style
output_style = :compressed

# We need to load in the Ext4 themes folder, which includes all it's default styling, images, variables and mixins
load File.join(File.dirname(__FILE__), $ext_path, 'themes')

設定ファイルを読み直すと、sprite_load_pathに複数のエントリを含めるか、「デフォルト」の結合を削除したいようなものです。

4

2 に答える 2

1

スプライトの基本クラスを変更することはできますが、それは個人の助けにはなりません@include。

プロジェクト全体が現在どのように構成されているかは完全にはわかりませんが、画像フォルダーの階層をアイコンの色よりもテーマに近づけることをお勧めします。

/images
|
--/themes
  |
  --/grey
    |
    --/icon
      |
      -- add.png
  --/blue
    |
    --/icon
      |
      -- add.png

コンパスはマップ名のパスの最後のディレクトリを使用するため、@import "themes/grey/icon/*.png"これを使用できるようになります@include icon-sprite(add)

ファイル構造を「青いテーマの追加アイコン」として「読み取る」こともできます

于 2012-07-31T17:53:13.640 に答える
1

私が遭遇したソリューションは、@ maxbeattyソリューションとセレクターの魔法の生成を組み合わせて、コンパスのセクシーさを維持します。基本的に、スプライトの名前がまったく同じであるスタイルごとに1つのsassテンプレートがあり、色ごとに異なるクラスの下にセレクターをネストします。前述のファイル構造を想定します。

/images
|
--/themes
  |
  --/grey
    |
    --/icon
      |
      -- add.png
  --/blue
    |
    --/icon
      |
      -- add.png

そのファイル構造を念頭に置いて、スタイルシートにスプライトと呼ばれるフォルダーを作成し、その中に、スタイルごとに1つのsassテンプレートを作成できます。例えば。あなたが持っているでしょう：

--/stylesheets/sprites
          |
          -- grey.sass
          -- blue.sass
          -- all.css (explained below)

[color]とマークされた対応する変更可能な部分を除いて、ファイルは同じです。

@import themes/[color]/icon/*.png

.[color]
    @include all-icon-sprites

次に、両方のファイルをコンパイルしてからインポートする必要があります。コンパイル前にそれらをマージすると、sassが一部のセレクターに参加し、分離がなくなる可能性があるため、注意が必要です。Railsで行ったことは、sass importディレクティブを使用してそれらをマージするのではなく、コンパイルされたバージョンをインポートする.cssマニフェストを作成することでした。

/stylesheets/sprites/all.css：

/*
*= require_tree .
* Import the compiled versions of the sprites. 
* Prevents SASS from mixing them and applying the same sprite to all selectors
*/

これは最終的にあなたに次のようなものを与えます：

.blue .icon-home
.gray .icon-home

もちろん、これには、色を設定する親の下にアイコンをネストする必要があるという欠点があります。煩わしいですが、魔法のスプライトが生成されることを考えるとひどいことではありません。

注：Stack Overflowは私にとって非常に役に立ち、今は貢献しようとしています。これが役に立った場合は、投票を検討してください。

于 2012-08-15T01:57:23.973 に答える