SCSS/Pusula için dinamik içe aktarma?

Question

Vakfın üstüne Compass üzerinden dayanan bir SCSS projem var. Daha sonra, küstahlık değişkenler kümesi tanımlayan bu değişkenlerin açısından kurallarının bir demet tanımlar: (Benim projem değişken ayarları ve ithalat ifadeleri daha birçok vardır; bu basitleştirilmiştir.)

vars.scss:

$foo = #fafafa 
$bar = 14px; 

// rules using $foo and $bar 
@import '_rules'; 

vars.scss'u derlemek için pusulayı kullanıyorum ve her şey sass değişkenleri için harika. Ancak, ben de benim app farklı tema yeteneği istiyor ve orijinal değişkenler geçersiz değişkenlerin bir dizi yeni tanımlayarak farklı bir tema oluşturmak:

vars.scss:

$foo = #fafafa 
$bar = 14px; 

@import 'otherVars'; 

@import '_rules'; 

I 70+ temaya sahip olduğumda dosyayı manuel olarak düzenleyemiyorum. (Birçok tema olması benim app amaçlar için gereklidir.) Ne istiyorum gerçekten aşağıdaki gibi bir şey yapabilmek için:

vars.scss:

$foo = #fafafa 
$bar = 14px; 

@import '{{otherVars}}'; 

@import '_rules'; 

Sonra gibi bir şey diyebiliriz: Ben her tema için bir kez compass diyebiliriz çünkü

compass --otherVars themes/theme2 

Daha sonra, tüm temalar çekivermek kolay olurdu.

SCSS bunu yapmanıza izin veriyor mu? Ona baktım ve öyle görünmüyor.

_app_prefix.scss:

$foo = #fafafa 
$bar = 14px; 

_app_suffix.scss:

@import '_rules'; 

Bulunduğum geçici çözüm bir önek ve sonek orijinal vars.scss bölmek olduğunu

app.scss:

theme2.scss:

@import '_app_prefix'; 

// only override $foo - let the original value of $bar stand 
$foo = #ebebeb; 

@import '_app_suffix'; 

Bu

@import '_app_prefix'; 
// no overrides by default 
@import '_app_suffix'; 

Ve belirli bir tema için geçersiz kılmak için, size benzeyen bir dosyayı yapmak istiyorum çalışır, ama sorta ağrılı ve ek kazan tanıtıyor.

Bir sonraki sorun da dinamik olarak inşa edilmesi gereken ek @import 'rules_foo' ifadeleri sahip olmak isteyen edilir.

vars: Yani benim genel fantezi gibi görünecektir.SCSS:

$foo = #fafafa 
$bar = 14px; 

@import '{{otherVars}}'; 

@import '_rules'; 
{{ @import 'additional_rules' for additional_rules in rules }} 

Ve diyebiliriz:

compass --otherVars themes/theme2 --rules "rules_1" "rules_2" "rules_3" 

(Açıkçası bu biraz handwavy ama umarım fikir.)

bunu yapmanın bir yolu var mı? Yoksa gidona ya da başka bir şablona başvurmak zorunda mıyım?

Answer 1

Her zaman pusula olarak gönderdiğiniz geçici bir dosya oluşturabilirsiniz. piton kod ile:

Ve/yaratır istediğiniz çıkışı ile tmp.scss üzerine yazar:

import sys 
with open('tmp.scss', 'w') as out: 
    out.write((""" 
$foo = #fafafa 
$bar = 14px; 

@import '%(pre-rules)s'; 

@import '_rules'; 
%(post-rules)s 
    """ % {'pre-rules': sys.argv[1], 'post-rules': '\n'.join(["@import '%s';" % x for x in sys.argv[2:]])}).strip()) 

Sen gibi derim. SUKDÖ'nün

Answer 2

geliştiriciler viability of this request dikkate sorunları var gibi.

1. https://github.com/nex3/sass/issues/658
2. https://github.com/nex3/sass/issues/115
3. Ancak https://github.com/nex3/sass/issues/451

az onu ve çok iyi belgeleri destekliyorsa: Burada

kişi özelliğini talep ediyor insanlar için http://lesscss.org/features/#variables-feature-import-statements

Answer 3

kim kullanıyor yapabilirsiniz /src/css/import.scss içinde

sass: { 
    options: { 
    loadPath: ['../src/css/themes/myTheme/'], 
    style: 'nested', 
    precision: 2 
    }, 

Ve sonra: Grunt onların SCSS/SUKDÖ dosyaları derlemek için, çözüm loadPath "küstahlık" görev yapılandırma aşağıdaki şekilde ekstra bir parametre eklemek oldu onlar geçerli dizinde sanki tema gelenler dosyaları içerir:

@import "config"; 

dosya /src/css/themes/myTheme/config.scss dan dahil edildi.

NOT: tabii sizin Grunt göreve parametre eklemek ve dinamik olduğunu tema adı olabilir!