SCSS - Erste Schritte

w00tw000t

Lt. Junior Grade
Dabei seit
Feb. 2011
Beiträge
333
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

Fleet Admiral
Dabei seit
Juli 2010
Beiträge
10.387
Schreib's doch erst mal in CSS und schau ob's geht. Danach kannst du die paar Zeilen immer noch in SCSS umwandeln.
 

Guni3

Newbie
Dabei seit
Mai 2013
Beiträge
6
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

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Feb. 2011
Beiträge
333
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.

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


Bekommst du in der Konsole vom Browser Fehler angezeigt oder was genau passiert (nicht)?
Das nicht, das Ergebnis passt nur nicht zu dem Anfangsprodukt:
1596294685557.png

So sieht es derzeit aus.
 

benneq

Fleet Admiral
Dabei seit
Juli 2010
Beiträge
10.387
So ziemlich jeder Texteditor sollte da deutlich hilfreicher sein. :D
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

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Feb. 2011
Beiträge
333
Haha ja, das stimmt :D
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?
 

w00tw000t

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Feb. 2011
Beiträge
333
Hier der kompilierte Code:
Zeile 50-54 und 79-90. Dieser Code sollte die Zacken darstellen.

Code:
 @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

Lieutenant
Dabei seit
Apr. 2005
Beiträge
769
Top