Use escape-svg() function

[MartijnCuppens]

Use escape-svg() to escape <, > & # characters. This makes the _variables.scss more readable & maintainable. Also includes a tiny property optimalization for the select background (see https://www.diffchecker.com/7IBMI8dF).

Fixes #29065

[voltaek]

I think it would be cleaner if escape-svg() was used when defining the variable containing the SVG markup rather than upon each use of each of those variables throughout the code.

Doing so would also mean those using the variables containing the SVG markup elsewhere don't have to know to wrap the use of the variable in escape-svg(), saving them some headache.

[mdo]

Hmm, perhaps there's another function or mixin we could use to handle that? Or is this over-engineering? I like the idea of keeping the variables super clean and the source Sass.

@mixin svg-bg($variable) {
  background-image: escape-svg($variable);
}

.element {
  @include svg-bg($variable-name);
}

[voltaek]

@mdo You'd need multiple mixins or an additional parameter to your suggested the mixin to accommodate the SVG variables being used with background, background-image, and content (currently in the BS source), so I think that would be over-engineering.

[MartijnCuppens]

Using a mixin would make the code less readable imo and we lose the ability to use our property order linting. Edit: and we 'll need more mixins, like @voltaek mentioned.

I've moved the functions to our codebase instead of the _variables.scss file for the following reasons:

• It just looks cleaner in the variables file
• We automate the escaping, even if a developer forgets to do this.
• We might make the _variables.scss file work independent from _functions.scss in the future, this would be a first step

[mdo]

Gotcha, makes sense! I’d like to push a couple changes to the docs page before merging to clearly explain and illustrate the function.