CSS zu Sass/Less/Scss Konverter?

Es gibt ja zahllose Tools, die Sass/Less/Scss zu CSS konvertieren. Aber gibt es das auch andersrum? Tools, die CSS in Sass/Less/Scss konvertieren? Kennt jemand da was?

Answer 1

[hfasijfhjisdhf]

https://www.cssportal.com/css-to-scss/

CSS Input :

#test {
	color: red;

}
#test a {
		color: blue;
	}

############
SCSS Output: 
$color_1: red;
$color_2: blue;

#test {
	color: $color_1;
	a {
		color: $color_2;
	}
}

Klappt bei mir, nesting und eigenständig sogar variablen angelegt.
Ansonsten Chat GPT fragen aber der kommt bei viel Text Schnell durcheinander.

Comments

[elmex7]

Danke, zwar nicht ganz perfekt das Tool, aber vieles macht es schon echt gut, Rest kann ich per Hand nacharbeiten, spart auf alle Fälle einiges an Zeit, prinzipiell genau so etwas habe ich gesucht habe.

Bist der Beste! :)

[hfasijfhjisdhf]

@elmex7

Ja musst wahrscheinlich viel selber machen denn sonst hast du sehr sehr viel platz verschwendet weil es von CSS kommt.

Hab einen guten tipp für dich ich mache immer gerne so eine _mixin.scss und einen mixin zentrieren den ich in meine dateien importiere

der nimmt 3 parameter (xAchse : center, yAchse: center, flex-direction : columb)

Mit default values @inlcude zentrieren() würde einfach alles zentrieren.

wenn du es als row haben willst mit abstand sagst du

@include zentrieren(space-evenly,center,row);

keine ahnung ob das gerade stimmt vertausche align une justify.

Kann man auch mit display grid und rows, gap machen. Dann nennst du es zentrieren-grid()

Das summiert sich wenn du bei allem 3-4 Code Zeilen mehr schreibst. Und tut nicht mehr in den Fingern weh.

vielleicht nennst du es auch center() falls du mal Ausländer in foren nach hilfe fragst damit die es auch verstehen.

Answer 2

[ultrarunner]

So etwas gibt es nicht, weil es nicht nötig ist.

SASS/LESS/SCSS sind keine eigenen Sprachen, sondern sie basieren auf CSS und bieten lediglich Zusatzfeatures an. Der zugehörige Präprozessor ersetzt dann die benutzten Zusatzfeatures durch herkömmlichen CSS-Code.

Jede CSS-Datei ist gleichzeitig eine gültige SASS-/LESS-/SCSS-Datei (die eben zufälligerweise keines der Zusatzfeatures benutzt). Eine Umwandlung von CSS in SASS/LESS/SCSS ist also nicht nötig.

Comments

[elmex7]

Ja, da hast du schon recht, ist nicht nötig aber wäre ein "nice to have" für mich :D Weil es schon komfortabler wäre, die 100derte CSS Zeilen übersichtlicher, besser wartbar machen würde etc...

[elmex7]

Um es noch besser zu erklären, habe z.B. ein Projekt übernommen, wo noch die css.map auf diverse SCSS verweist, die aber nicht (mehr) da sind. Wäre schon genial wenn ein Tool daraus wieder die SCSS Dateien generieren könnte

[ultrarunner]

@elmex7

So ein Tool hätte das Problem, dass es nicht "wissen" kann, aus welchen SCSS-Anweisungen (wenn überhaupt) eine CSS-Anweisung entstanden ist. Das müsste schon ziemlich hellseherische Fähigkeiten haben …

[elmex7]

@ultrarunner

Genau das suche ich :D

Spass bei Seite, steht das nicht eigentlich in den Map Files? Zugegeben, habe mich damit noch nicht intensiv beschäftigt...