SASS with custom value of variable in ASP.NET MVC

Question

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?

Answer 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.

Answer 2

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