Bu yüzden, bu gibi bir şey görünüyor app/assets/stylesheets/ dizin yapısı var:

   |-dialogs
   |-mixins
   |---buttons
   |---gradients
   |---vendor_support
   |---widgets
   |-pages
   |-structure
   |-ui_elements

Her bir dizin, birden çok sass kısımlar (genellikle *.css.scss, ama bir ya da iki *.css.scss.erb).

Çok varsayarsak olabilirim ama raylar otomatik olarak uygulama *= require_tree . çünkü bu dizinlerdeki tüm dosyaları derleme.css, değil mi?

Son zamanlarda tüm renk değişkenleri kaldırma ve kök dizininde bir dosya app/assets/stylesheets klasör (_colors.yerleştirerek bu dosyaları yeniden denedim css.scss). O zaman ben app/assets/stylesheets kök klasör Efendi adlı bir dosya oluşturulur.css.bu gibi görünüyor scss:

// Color Palette 
@import "colors";

// Mixins
@import "mixins/buttons/standard_button";
@import "mixins/gradients/table_header_fade";
@import "mixins/vendor_support/rounded_corners";
@import "mixins/vendor_support/rounded_corners_top";
@import "mixins/vendor_support/box_shadow";
@import "mixins/vendor_support/opacity";

Gerçekten raylar varlık derleme sırasını yönetir, ama belli ki benden yana değil nasıl anlamıyorum. Bu dosyaların hiçbiri herhangi bir değişken veya mixins alınan fark, ve hataları atar ve derleme yapamam gibi görünüyor.

Undefined variable: "$dialog_divider_color".
  (in /home/blah/app/assets/stylesheets/dialogs/dialog.css.scss.erb)

Undefined mixin 'rounded_corners'.
  (in /home/blah/app/assets/stylesheets/widgets.css.scss)

Değişken $dialog_divider_color açıkça _colors tanımlanır.css.scss ve _master.css.scss renkler ve tüm mixins alma. Ama görünüşe göre raylar bunu fark edemedi.

Bir şekilde bu hataları tamir edebilirim, ya da her bir dosya olarak kendisine dahil ederse, ithalatı içine geri tüm değişken benim tanımlar koyarak başvurmaya gerek var mı?

Ne yazık ki, this guy mümkün gibi gözükmüyor, ama yanıldığını umuyorum. Herhangi bir düşünce büyük mutluluk.

CSS ile sorun, otomatik olarak tüm dosyaları eklemek istemiyorum. Hangi sayfaları ve tarayıcı tarafından yüklenen işleme sırası önemlidir. Her zaman açıkça tüm css alma sona erecek.

Örnek olarak, izin verir normalize.css bir sayfanız var, bir varsayılan korkunç farklı tarayıcı uygulamaları yerine bakmak demek. Bu tarayıcı yükler ilk dosya olmalıdır. Eğer sadece rastgele bu sayfalarda bir yerlerde css ithalat dahil, sonra sadece tarayıcı varsayılan stilleri, ama aynı zamanda daha önce yüklenen stiller tüm css dosyalarında tanımlanan geçersiz kılar. Bu değişkenler ve mixins için de aynı şey geçerli.

Euruko2012 Roy Tomeij tarafından bir sunum gördükten sonra eğer yönetmek için CSS bir sürü varsa, aşağıdaki yaklaşım için karar verdim.

Ben genellikle bu yöntemi kullanın:

1. Mevcut tüm yeniden adlandırın .css dosyaları .scss
2. Uygulama tüm içeriğini çıkarın.scss

@İmport direktifleri 15 ** eklemeye başlayın.

Eğer Twitter'ın bootstrap ve kendi birkaç css bir sayfa kullanıyorsanız, reset stilleri için bir sayfası vardır çünkü bootstrap ilk ithal etmek zorunda. Senin için @import "bootstrap/bootstrap.scss"; application.scss ekleyin.

Bootstrap.scss dosyası gibi görünüyor:

// CSS Reset
@import "reset.scss";

// Core
@import "variables.scss";
@import "mixins.scss";

// Grid system and page structure
@import "scaffolding.scss";

// Styled patterns and elements
@import "type.scss";
@import "forms.scss";
@import "tables.scss";
@import "patterns.scss";

Ve application.scss dosya gibi görünüyor:

@import "bootstrap/bootstrap.scss";

İthalat emri yüzünden, şimdi değişkenleri kullanmak, .scss herhangi bir diğer dosya sonra ithal @import "variables.scss"; ile dolu. my_model.css.scss bootstrap klasörü de type.scss kullanılabilir.

Bu bir klasör partials modules adlı oluşturduktan sonra. Bu diğer dosyaların çoğu yeri olacaktır. Sadece nasıl görüneceğini çok application.scss dosya alma ekleyebilirsiniz:

@import "bootstrap/bootstrap.scss";
@import "partials/*";

Şimdi ise stil için css biraz ana sayfasında bir makale. Sadece partials/_article.scss application.css derlenmiş eklenecektir. Alma sırası nedeniyle de kendi scss dosyalarını herhangi bir bootstrap mixins ve değişkenleri kullanabilirsiniz.

Buldum bu yöntemin tek dezavantajı şimdiye kadar, bazen/*kısmi bir yeniden zorlamak için var.alışkanlık raylar çünkü scss dosyaları her zaman sizin için bunu yapmak.