SCSS - Erste Schritte

[w00tw000t]

Hallo zusammen,

ich bin seit einigen Tagen dabei, mich in das Thema SASS/SCSS einzuarbeiten. Bastel jetzt an einer Testseite und komme gerade nicht weiter.
Dabei wollte ich eine Tab Seite erstellen und habe dieses Beispiel gefunden:
https://codepen.io/simeydotme/pen/JmKDi

Hatte eigentlich vor, diese "Spitzen" als Elemente auf meiner Spielwiese zu verwenden, bekomme es aber trotz des bereitgestellen Codes nicht zum laufen.
Habe eine .html Datei mit dem Code + JS Teil und eine SCSS Datei. Die SCSS Datei habe ich mit einem online Compiler kompiliert und dann eingebunden, das ging aber daneben. Was muss ich bezüglich "Compass" beachten?
Wenn ich zuvor kompiliere, benötige ich kein Tool zum converten, korrekt? Habe mich hier orientiert: https://www.quora.com/How-do-I-insert-an-SCSS-file-into-HTML

Vielen Dank vorab!

 

[benneq]

Schreib's doch erst mal in CSS und schau ob's geht. Danach kannst du die paar Zeilen immer noch in SCSS umwandeln.

 

[GroMag]

Welche IDE benutzt du denn?

 

[Guni3]

Moin!

Ich habe bei mir per NPM Sass installiert (https://sass-lang.com/install) und kompiliere auf Kommandozeile bzw. über die Filewatcher von PhpStorm. Compass habe ich noch nie verwendet.
Bekommst du in der Konsole vom Browser Fehler angezeigt oder was genau passiert (nicht)?

 

[w00tw000t]

Danke für eure Antworten!

Schreib's doch erst mal in CSS und schau ob's geht. Danach kannst du die paar Zeilen immer noch in SCSS umwandeln.

Ich habe es mit dem Code in die andere Richtung probiert. Also den Code per Compiler in CSS umgewandelt, das hatte nicht funktioniert.

Welche IDE benutzt du denn?

Ich bin derzeit nur im Terminal unterwegs. Kannst du was empfehlen? Was Einsteigerfreundliches

Bekommst du in der Konsole vom Browser Fehler angezeigt oder was genau passiert (nicht)?

Das nicht, das Ergebnis passt nur nicht zu dem Anfangsprodukt:

So sieht es derzeit aus.

 

[benneq]

im Terminal

So ziemlich jeder Texteditor sollte da deutlich hilfreicher sein.
Die aktuell einfachste Lösung wäre wohl Visual Studio Code. SCSS sollte von Haus aus unterstützt werden, ansonsten ist ein riesiger Marketplace integriert, wo man sich Extensions für andere Dateiformate installieren kann.
Ich benutz den Editor inzwischen eigentlich für alles was mit Web Frontend zu tun hat. IntelliJ IDEA bzw. WebStorm haben für mich keinen wirklichen Mehrwert mehr, aber kann man sich natürlich auch mal anschauen. Die IntelliJ Tools sind sehr gut, gar keine Frage, und bis vor kurzem gab's auch nichts vergleichbares für HTML, CSS, JavaScript. Aber inzwischen ist VSCode richtig brauchbar geworden und ich vermisse nichts.

 

[w00tw000t]

Haha ja, das stimmt
Okay vielen Dank! Dann werde ich damit mal weiter mein Glück versuchen.
Was ich jedoch noch nicht verstanden habe, wie es sein kann, dass nur ein Teil richtig angezeigt wird und der andere Teil nicht (siehe Screenshot Post 5). Der gesamte SCSS Code wurde kompiliert und soweit sieht es auch gut aus. Wieso fehlen die Zacken?

 

[mastaqz]

Wieso fehlen die Zacken?

Ist dir denn bewusst, aus welcher Klasse die Zacken kommen?

 

[w00tw000t]

Hier der kompilierte Code:
Zeile 50-54 und 79-90. Dieser Code sollte die Zacken darstellen.

 @import "compass/css3";
 @import url(https://fonts.googleapis.com/css?family=Lato:100,300,400);
 .sexytabs > ul {
     text-align: center;
     font-weight: 500;
     margin: 50px 0 0;
     padding: 0;
     position: relative;
     border-bottom: 1px solid rgba(0, 0, 0, 0.2);
     z-index: 1;
}
 .sexytabs > ul > li {
     display: inline-block;
     background: #fafafa;
     padding: 0.6em 0;
     position: relative;
     width: 33%;
     margin: 0 0 0 -4px;
}
 .sexytabs > ul > li:before, .sexytabs > ul > li:after {
     opacity: 0;
     transition: 0.3s ease;
}
 .sexytabs > ul > li.ui-tabs-active:before, .sexytabs > ul > li.ui-tabs-active:after, .sexytabs > ul > li.ui-state-hover:before, .sexytabs > ul > li.ui-state-hover:after, .sexytabs > ul > li.ui-state-focus:before, .sexytabs > ul > li.ui-state-focus:after {
     opacity: 1;
}
 .sexytabs > ul > li:before, .sexytabs > ul > li.ui-state-active.ui-state-hover:before, .sexytabs > ul > li.ui-state-active.ui-state-focus:before {
     content: "";
     position: absolute;
     z-index: -1;
     box-shadow: 0 2px 3px rgba(22, 195, 255, 0.5);
     top: 50%;
     bottom: 0px;
     left: 5px;
     right: 5px;
     border-radius: 100px / 10px;
}
 .sexytabs > ul > li:after, .sexytabs > ul > li.ui-state-active.ui-state-hover:after, .sexytabs > ul > li.ui-state-active.ui-state-focus:after {
     content: "";
     background: #fafafa;
     position: absolute;
     width: 12px;
     height: 12px;
     left: 50%;
     bottom: -6px;
     margin-left: -6px;
     transform: rotate(45deg);
     box-shadow: inset 3px 3px 3px rgba(22, 195, 255, 0.5), inset 1px 1px 1px rgba(0, 0, 0, 0.3);
}
 .sexytabs > ul > li.ui-state-hover:before, .sexytabs > ul > li.ui-state-focus:before {
     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}
 .sexytabs > ul > li.ui-state-hover:after, .sexytabs > ul > li.ui-state-focus:after {
     box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.2), inset 1px 1px 1px rgba(0, 0, 0, 0.3);
}
 .sexytabs > ul > li.ui-state-focus a {
     text-decoration: underline;
}
 .sexytabs > ul > li:focus {
     outline: none;
}
 .sexytabs > ul > li a {
     color: #444;
     text-decoration: none;
}
 .sexytabs > ul > li a:focus {
     outline: none;
}
 .sexytabs > ul > li a span {
     position: relative;
     top: -0.5em;
}
 .sexytabs.dark > ul {
     border-bottom-color: rgba(255, 255, 255, 0.3);
}
 .sexytabs.dark > ul > li {
     background: #333;
}
 .sexytabs.dark > ul > li:before, .sexytabs.dark > ul > li.ui-state-active.ui-state-hover:before, .sexytabs.dark > ul > li.ui-state-active.ui-state-focus:before {
     box-shadow: 0 2px 3px rgba(255, 255, 255, 0.3);
}
 .sexytabs.dark > ul > li:after, .sexytabs.dark > ul > li.ui-state-active.ui-state-hover:after, .sexytabs.dark > ul > li.ui-state-active.ui-state-focus:after {
     background: #333;
     box-shadow: inset 3px 3px 3px rgba(255, 255, 255, 0.3), inset 1px 1px 1px rgba(255, 255, 255, 0.5);
}
 .sexytabs.dark > ul > li.ui-state-hover:before, .sexytabs.dark > ul > li.ui-state-focus:before {
     box-shadow: none;
}
 .sexytabs.dark > ul > li.ui-state-hover:after, .sexytabs.dark > ul > li.ui-state-focus:after {
     box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.4);
}
 .sexytabs.dark > ul > li a {
     color: white;
}
 img {
     width: 60px;
     float: left;
     margin: 0 1em 1em 0;
     border-radius: 3px;
}
 body {
     font-size: 1em;
     background: #fafafa;
     font-family: Lato;
     font-weight: 300;
}
 h1 {
     text-align: center;
     font-size: 20px;
}
 .sexytabs {
     width: 90%;
     min-width: 360px;
     margin: auto;
}
 .contents {
     padding: 20px 50px;
     min-height: 200px;
}
 .darkpage {
     background: #333;
     color: white;
}
 .darkpage, .lightpage {
     padding: 50px 0;
}
 @media screen and (min-width: 1000px) {
     .darkpage, .lightpage {
         width: 50%;
         float: left;
         padding: 0;
    }
}

 

[[n]ARC]

Ich bin derzeit nur im Terminal unterwegs. Kannst du was empfehlen? Was Einsteigerfreundliches

Kostenpflichtig (Referenz): PhpStorm
OpenSource: NetBeans

Alles andere ist nur rum gefrickel, eine IDE spart dir Zeit und wenn du tiefer in die Materie einsteigen möchtest, ist eine IDE ohnehin Pflicht.