Sass bietet eine Sammlung nützlicher Funktionen zur Manipulation von Strings, aber es gibt keine Funktion, um einen Substring durch einen anderen zu ersetzen. Hier ist eine schnelle str-replace Funktion, falls Sie jemals eine benötigen.
/// Replace `$search` with `$replace` in `$string`
/// @author Kitty Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
Verwendung
.selector {
$string: 'The answer to life the universe and everything is 42.';
content: str-replace($string, 'e', 'xoxo');
}
Ergebnis
.selector {
content: "Thxoxo answxoxor to lifxoxo thxoxo univxoxorsxoxo and xoxovxoxorything is 42.";
}
Super, Mann. Danke. Ich habe es in etwas Code verwendet, um SVG + Gradient-Hintergründe zu generieren.
http://codepen.io/MikeiLL/pen/mEPKYG
Sehr nett!!! Danke fürs Teilen!
Es scheint, als gäbe es einen Tippfehler im Snippet (oder die Sass-Funktionen haben sich seit 2014 geändert ... wahrscheinlich) – es sollten
str_indexundstr_slicemit Unterstrichen anstelle von Bindestrichen sein!Ich weiß nicht, welche Version Codepen verwendet, aber das neueste Sass verwendet jetzt Namespaces für integrierte Module, also:
string.index,map.has-keyusw. plus@use 'sass:string,@use 'sass:mapam Anfang der Datei.Sehr genial! Verwende dies, um Buttons aus mehreren entsprechenden Farb-Maps zu generieren.
Vielen Dank! Verwende es, um Dateinamen in einem Mixin zu ändern, das 2x-Auflösungsbilder auf Retina einfügt.
sollte geändert werden
@if ($index and str-length($search) > 0) {
zu
@if ($index and str-length($search) > 0) {
um einen leeren Suchparameter zu berücksichtigen.
ups
@if ($index) {
zu
@if ($index and str-length($search) > 0) {
Ich habe kürzlich ein Projekt von node-sass auf dart-sass umgestellt, und es sieht so aus, als ob diese Implementierung bei über 120 Ersetzungen einen Stack-Overflow-Fehler verursachte (ich verwende diese Funktion, um SVGs URL-zu-kodieren!). Ich gehe davon aus, dass dies mit der Rekursion zusammenhängt.
Hier ist eine Version ohne Rekursion, die keine Probleme zu verursachen scheint und in meinen Anwendungsfällen zu funktionieren scheint. Bitte lassen Sie mich wissen, wenn es Anwendungsfälle gibt, bei denen diese fehlschlägt, da ich keine erschöpfenden Tests durchgeführt habe.
Für alle, die Bootstrap verwenden, beachten Sie bitte, dass diese Funktion in bs5 in _functions.scss verwendet wird.
Ich bin auf Probleme gestoßen, als ich diesen Code später in meiner App wiederverwendet und etwas geändert habe; ich musste einige Kleinbuchstaben-Strings zurückgeben und hätte meine Version benennen sollen, da ich am Ende ziemlich verdrehte SVGs hatte!
Wie auch immer, nur ein Hinweis für alle, die Bootstrap verwenden.
Danke Kitty, für den Code :-)