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?

score 1 · Answer 1 · edited Oct 08 '18 at 23:51

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.

Looking at [this question](http://stackoverflow.com/questions/16283537/what-is-the-proper-use-of-iitemtransform-for-correcting-paths-in-css-bundling-wi) 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. — benembery, Jun 02 '15 at 21:02
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? — cadi2108, Jun 03 '15 at 09:52
I moved variable to modify to main file and now the content is replaced. But like question you related here, my modifications are ignored. — cadi2108, Jun 03 '15 at 13:42
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? — benembery, Jun 03 '15 at 21:51

score 1 · Answer 2 · edited May 23 '17 at 12:10

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

SASS with custom value of variable in ASP.NET MVC

2 Answers2