Less Mixin in SCSS übersetzen

Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Jan-Frederik Stieler

Monsterator
Moderator
Hi,
ich bin grad dabei ein älteres Projekt von LESS auf SCSS umzustellen.
Nun habe ich aber ein Problem beim übersetzen eines Mixin.
Less:
Less:
.margin(@mt: 0; @mr: 0; @mb: 0; @ml: 0;) {
  @mtv: @mt / @font-size-base;
  @mrv: @mr / @font-size-base;
  @mbv: @mb / @font-size-base;
  @mlv: @ml / @font-size-base;
  margin: ~"@{mt}px" ~"@{mr}px" ~"@{mb}px" ~"@{ml}px";
  margin: ~"@{mtv}rem" ~"@{mrv}rem" ~"@{mbv}rem" ~"@{mlv}rem";
}
Probleme habe ich mit dem margin: ~"@{mt}px" ~"@{mr}px" ~"@{mb}px" ~"@{ml}px";.
Ich weiß jetzt nicht wofür die Tilde in Less steht um dies zu übersetzen und wie muss ich im SCSS dann die die einzelnen px/rem Deklarationen von einander abgrenzen? kombiniert werden die Wertangaben ja mit einem Plus aber dann?

Hoffe mir kann jemand helfen?

Viele Grüße
 
Ja den Converter hab ich schon verwendet.
Nur das Mixin bekommt der auch nicht hin. Der Converter macht schon bei den Argumenten fehler.
Argumente werden mit Komma von einander getrennt und nicht per Semikolon.
 
Also ich hab das jetzt einfach mal ganz einfach geschrieben und es scheint zu funktionieren:
SCSS:
@mixin margin($mt: 0, $mr: 0, $mb: 0, $ml: 0){
  $mtv: $mt / $font-size-base;
  $mrv: $mr / $font-size-base;
  $mbv: $mb / $font-size-base;
  $mlv: $ml / $font-size-base;
  margin: $mt+px $mr+px $mb+px $ml+px;
  margin: $mtv+rem $mrv+rem $mbv+rem $mlv+rem;
}
 
Hi,

die Tilde wird in less zum Escapen genutzt (LESS/escaping). Dh. ein String ~"@{var}rem" bleibt bis auf seine Interpolation/Variablenersetzung unverändert. Deshalb sieht deine Konvertierung nach SCSS richtig aus.

Ciao,
Quaese
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Neue Beiträge

Zurück