Nhập khẩu động cho SCSS/Compass?

Question

Tôi có một dự án SCSS được xây dựng trên nền tảng thông qua Compass. Nó định nghĩa một tập hợp các biến sass, sau đó định nghĩa một loạt các quy tắc về các biến: (dự án của tôi có nhiều hơn nữa các thiết lập và báo cáo nhập khẩu, điều này được đơn giản hóa.)

vars.scss:

$foo = #fafafa 
$bar = 14px; 

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

Sau đó, tôi sử dụng la bàn để biên dịch vars.scss và mọi thứ đều tuyệt vời cho tập hợp biến số sass đó. Tuy nhiên, tôi cũng muốn khả năng chủ đề ứng dụng của tôi khác nhau, và tạo ra một chủ đề khác nhau bằng cách định nghĩa một tập hợp mới của các biến mà có thể ghi đè lên các biến ban đầu:

vars.scss:

$foo = #fafafa 
$bar = 14px; 

@import 'otherVars'; 

@import '_rules'; 

tôi không thể chỉnh sửa tệp theo cách thủ công khi tôi có hơn 70 chủ đề. (Có nhiều chủ đề là cần thiết cho các mục đích của ứng dụng của tôi.) Những gì tôi thực sự muốn là để có thể làm điều gì đó như sau:

vars.scss:

$foo = #fafafa 
$bar = 14px; 

@import '{{otherVars}}'; 

@import '_rules'; 

Và rồi tôi có thể gọi một cái gì đó như:

compass --otherVars themes/theme2 

sau đó nó sẽ được dễ dàng để whip ra tất cả các chủ đề, bởi vì tôi có thể gọi compass một lần cho mỗi chủ đề.

SCSS có cho phép bạn thực hiện việc này không? Tôi nhìn vào nó, và nó không giống như nó.

workaround hiện tại của tôi là để phân chia các gốc vars.scss thành một tiền tố và hậu tố:

_app_prefix.scss:

$foo = #fafafa 
$bar = 14px; 

_app_suffix.scss:

@import '_rules'; 

app.scss:

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

Và để ghi đè lên nó trong một chủ đề cụ thể, bạn muốn tạo ra một tập tin mà trông giống như:

theme2.scss:

@import '_app_prefix'; 

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

@import '_app_suffix'; 

này hoạt động, nhưng rất đau đớn và giới thiệu thêm bản mẫu.

Vấn đề tiếp theo của tôi là muốn có thêm tuyên bố @import 'rules_foo', cũng cần được xây dựng động. Vì vậy, hình ảnh tổng thể của tôi sẽ trông giống như:

vars.SCSS:

$foo = #fafafa 
$bar = 14px; 

@import '{{otherVars}}'; 

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

Và tôi có thể gọi:

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

(Rõ ràng điều này là hơi handwavy nhưng hy vọng bạn sẽ có được ý tưởng.)

Có cách nào để làm điều này? Hay tôi sẽ phải dùng đến tay lái hay một số ngôn ngữ khác?

Answer 1

Bạn luôn có thể tạo tệp tạm thời mà bạn gửi cho la bàn. Với mã python:

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()) 

Bạn muốn gọi nó là thích:

Và nó tạo/ghi đè tmp.scss với sản lượng mà bạn muốn.

Answer 2

Các nhà phát triển của SASS có vẻ gặp vấn đề khi xem xét viability of this request.

Dưới đây là người yêu cầu tính năng:

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

Tuy nhiên, ít hỗ trợ nó và các văn bản đó rất tốt: http://lesscss.org/features/#variables-feature-import-statements

Answer 3

Đối với những người đang sử dụng Grunt để biên dịch SCSS/file Sass của họ, giải pháp là để thêm một tham số phụ loadPath để "Sass" cấu hình nhiệm vụ như sau:

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

Và sau đó trong /src/css/import.scss bạn có thể bao gồm các tệp đó từ chủ đề như thể chúng nằm trong thư mục hiện tại:

@import "config"; 

Tệp này được bao gồm trong /src/css/themes/myTheme/config.scss.

LƯU Ý: Tất nhiên bạn có thể thêm tham số vào tác vụ Grunt của bạn và có tên chủ đề đó là động!