1

In answer for this topic is shown how to pass variable to LESS file with BundleTransformer for LESS and LessTranslator. Unfortunelly in SASS kind of BundleTransformer isn't available property GlobalVariables. Is possible to compile SASS file with custom variable (value of color) depends on login user?

2 Answers 2

1

Solution of a similar problem (only for LESS) described in the “BundleTransformer.Less inject variables depending on context/request” discussion. I.e. you also have to write your own implementation of caching system and use InjectContentItemTransform class (to declare variables need to use Sass-syntax). But unlike LESS, you do not have the ability to modify variables (available only ability to declare variables).

Sign up to request clarification or add additional context in comments.

Comments

1

I've not used the SASS extension so I can't say for certain, but you could always create a custom bundle transform to replace what is essentially a 'template' file.

So you could have a SASS file with variables declared like so

$variable: {{variable-placeholder}};

Then use something similar to the following to replace the values.

public class ReplacePlaceholdersBundleTransform : IBundleTransform
{
    private readonly IDictionary<string, string> _replacements;

    public ReplacePlaceholdersBundleTransform()
    {
        _replacements = new Dictionary<string, string>();
    }

    public ReplacePlaceholdersBundleTransform(IDictionary<string,string> replacements)
    {
        _replacements = replacements ?? new Dictionary<string,string>();
    }

    public void Process(BundleContext context, BundleResponse response)
    {
        if (_replacements.IsNullOrEmpty())
            return;

        foreach (var replacement in _replacements)
        {
            response.Content = response.Content.Replace(replacement.Key, replacement.Value);
        }
    }
}

To use it add the transform to the bundle.

yourBundle.Transforms.Add(
            new ReplacePlaceholdersBundleTransform(new Dictionary<string, Func<BundleContext, string>>
            {
                {"{{variable-placeholder}}", "red"},
            }));

We've used something similar for a Script Transform to inject bundle urls into script files at runtime to get the full URL generated by the Optimization framework. This admittedly might not work for you if the transforms are executed after the SASS translation happens but, I've not had the time to spin up a SASS project to test this.

I hope this helps.

4 Comments

Looking at this question you could probably adapt this to use an IItemTransform to limit the replacement scope to a single file, again I haven't tried this but it would be worth investigating if the above doesn't work.
Hello, thank you for your response. In my case problem is that I have not single .scss file but file with many imports and the variable I want to replace is in import file. Do you know how to merge all files in one before replace it?
I moved variable to modify to main file and now the content is replaced. But like question you related here, my modifications are ignored.
If you step through the code has the content passed to the bundle transform already been translated from Sass to Css at the point the transform is run?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.