Wie füge ich eine SCSS Datei in HTML ein?

Hallo! Ich würde gerne meine Seite mit SCSS formatieren und nicht nur mit einfachem CSS. Leider habe ich Probleme eine SCSS Datei in meinen HTML Code einzufügen. Bei CSS sieht der Code zum einfügen ja so aus:

<link rel="stylesheet" type="text/css" href="[DATEIPFAD].css"/>

Wenn ich es nun aber mit einer SCSS Datei versuche klappt es nicht.

3 Antworten

medmonk

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, IT

18.06.2022, 23:00

Egal welchen Präprozessor du für HTML, CSS und JavaScript verwendest, der "Code" muss mit Ausnahme von LESS immer vorher kompiliert werden. In deinem HTML-Dokument verlinkst du also auf das Kompilat, anstelle auf die SCSS-Datei.

Ich würde die Verzeichnisstruktur deines Projekts ohnehin in zwei Bereiche aufteilen, damit sofort ersichtlich ist, welche Teile bloß zur Entwicklung und welche zur Laufzeit (Production) verwendet werden. Dasselbe gilt auch für TypeScript und ähnliches.

Du musst dein SCSS aber in jedem Fall kompilieren, damit es hinterher von einem Browser interpretiert werden kann. Verwende also einen entsprechenden Compiler, der dir lokal dein SCSS zu interpretierbarem CSS kompiliert.

Woher ich das weiß:Berufserfahrung – UI/UX Designer, Full-Stack Developer

Von Experte Babelfish bestätigt

TheQ86

18.06.2022, 19:36

SCSS Dateien müssen vorher durch einen SCSS Compiler in CSS umgewandelt werden.

Aktuell unterstützen Browser SCSS direkt nicht.

Du musst dein SCSS mit einem Tool zu CSS übersetzen.

https://sass-lang.com/install

Woher ich das weiß:Berufserfahrung – Berufserfahrung

JFhatFragen2

Fragesteller

18.06.2022, 19:41

Danke!

indexhtml

18.06.2022, 21:24

Wird das eigentlich irgendwann kommen ? Das der Browser scss oder TypeScript versteht oder es selber übersetzt in css ? Kann doch nicht soo schwer sein

TheQ86

18.06.2022, 21:27

@indexhtml

eher nicht. webstandard ist halt css. falls sich das w3c konsortium mal auf scss einigt, vielleicht. oder wenn browserhersteller es aif eigene faust implementieren. aber ich glaub nicht dran

medmonk

18.06.2022, 22:49

@indexhtml

Wird das eigentlich irgendwann kommen ?

Es wird mit hoher Wahrscheinlichkeit nicht dazu kommen, da sich ein voriges Kompilieren von Sass/SCSS negativ auf die allgemeine Performance auswirkt.

Erstelle einfach mal ein Projekt mit dutzenden Imports und schau dir an, wie "lange" der Compiler damit zu tun hat. Wenn dann noch andere Dateien wie TypeScript im Spiel sind, ergibt so eine Implementierung noch weniger Sinn.

Falls du CSS zur Laufzeit kompilieren möchtest, solltest auf LESS wechseln. Ob und wie weit das Ganze dann Sinn macht, steht auf einem anderen Blatt. Ich arbeite zwar selber mit SCSS und überwiegend mit der Sass Syntax, würde eine Browser-Implementierung aber trotzdem nicht befürworten.

LG medmonk

NackterGerd

21.06.2022, 23:35

Du brauchst natürlich die css Datei zum einbinden.

Hallo,was ist der Unterschied zwischen :

<link rel="stylesheet" href="css/style.css">

und

<link rel="stylesheet" href="/css/style.css">

Wie binde ich binde ich denn Dateien ein, welche auf der selben Ebene liegen? Beginne ich mit / oder nicht?

...zur Frage

Ich möchte ein HTML-Dokument mit einem CSS-Dokument verbinden, per <link rel="stylesheet" href="stylesheet.css">. Wieso funktioniert das nicht?

Ich möchte ein CSS-Dokument mit einem HTML-Dokument verbinden, undzwar mit dem Code:

<link rel="stylesheet" href="stylesheet.css">

Aber es funktioniert nicht?

...zur Frage

scss code in css einbauen?

kann ich aus dem internet ein scss code kopieren und in die .css datei einfügen?

oder muss ich eine neue .scss file erstellen?

...zur Frage

CSS in JavaEE nutzen?

Nabend,

Ich habe ein JavaEE Project und experimentier mit Servlets und einem Tomcat Server herum. Ich habe auch eine html Datei. Jetzt wollte ich der html Datei mit einem Stylesheet etwas Glanz geben.

Leider musste ich feststellen, dass die HTML-Datei mitnichten meine CSS Datei berücksichtigt. Ich habe auch den Server neugestartet und ein paar mal gecleaned.

Die html Datei sowie die CSS Datei befinden sich im WebContent Ordner. Die Pfadangabe passt meiner Ansicht nach.

<link rel="stylesheet" type="text/css" href="WebContent/test.css">

Hat jemand vielleicht eine Idee woran es noch liegen könnte?

...zur Frage

Localhost spinnt rum?

Ich benutze XAMPP zum Testen meiner Website, hat auch bis jetzt alles immer gut geklappt...

Meine Websites speichere ich jeweils in Unterordnern in htdocs, benutze erstmal nur HTML und CSS, darum geht es jetzt nämlich auch.

Einige Daten:

Betriebssystem: Linux | Ubuntu 20.04
Editor: gedit
Browser: Firefox 98.0.2 (64bit)

Das Problem ist dass immer wenn ich in meinem CSS-Code etwas ändere, es dann abspeichere und schließlich im Browser öffne, werden meine Änderungen nicht angezeigt. Wenn ich allerdings Sachen in der HTML-Datei ändere werden diese angezeigt.

Einige Klarstellungen:

Ich bin mir zu 100% sicher, dass ich die richtige CSS-Datei bearbeite und auch im richtigen Ordner abspeichere.
Die CSS-Datei wurde mit folgendem Code in der HTML-Datei verwiesen:

<link rel="stylesheet" href="style.css">

(Außerdem hat das Problem ja jetzt erst begonnen.)

Ich habe keine Fehler in der CSS-Datei eingebaut, also bspw. zwei Semikolons, unbekannte Befehle etc.

Kann mir da jemand weiterhelfen??

...zur Frage

Wordpress Seite als eine HTML, CSS und JS Datei exportieren?

Hallo,

ich möchte eine Wordpress-Website statisch wie sie zu sehen ist als HTML, CSS und JavaScript Dateien exportieren. Leider funktioniert dies nicht wie ich es möchte, da alle JavaScript Funktionen für z.B. ausklappbare Menüs in einzelnen JS Dateien liegen. Auch das CSS ist teilweise in der entsprechenden Datei, teilweise aber auch im HTML Code, das ist aber nebensächlich.

Gibt es irgendein Tool - egal ob Online mit GUI oder als Shell Anwendung, dass es mir ermöglicht, die Seite wie von mir beschrieben als Einzeldateien herunterzuladen?
Die Seite läuft nicht über meinen eigenen WP Account, ich kann also keine WP Plugins installieren...

LG und vielen Dank

Andy

...zur Frage

DE Sonderzeichen Fehler in HTML?

Hi,

ich sitze momentan an einer Datei, um ein paar Dinge auszuprobieren. Ich habe die Meta-Tags wie gewohnt aus einer anderen (funktionierenden) Datei kopiert.

Nun werden allerdings ausschließlich in meiner Datei die Umlaute wie Ä,Ö,Ü und ß mit

"�"

angezeigt. Auch das rein-kopieren Tags aus anderen Dateien, oder das entfernen des Stylesheets hat nix geändert. Kurzzeitig hatte ich auch den Meta-Tag:

mit reingenommen, allerdings ohne Erfolg oder Veränderungen. Auch das Debugging von W3C hat nix auffälliges gefunden:

Für alle helfenden Hände großes Danke!

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="example, html, head, meta">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="formate.css">
    <title>Das Box-Modell</title>
  </head>


<body>
  <header>
      
    <div class="flex">
     <img src="bilder/logo.svg" alt="logo">
    </div>
    
     <h1>Wilkommen auf der Test-Seite!</h1>
     <nav>
              <a href="#link_1.html">Blog</a>
              <a href="#link_1.html">Unterseite 1</a>
              <a href="#link_1.html">Unterseite 2</a>
              <a href="#link_1.html">Kontakt</a>
     </nav>
          
    </header>
      
      <main>
          
          <h2>ÜÜÜCCS-basierte Layouts <br><br />HTML-Struktur ohne CSS</h2>         
          
      </main>
    
    
    
    <footer>
     <a href="kontakt.html">Kontakt</a>
     <p>&copy; 2024 by GTA1A</p>
    </footer>


</body>
</html>

...zur Frage

HTML/CSS Bluefish?

Hey kennt sich jemand mit dem Programm Bluefish aus? Ich muss eine HTML und CSS Datei erstellen.

Die HTML Datei bekomme ich meiner Meinung nach hin aber wenn ich die passende CSS Datei erstellen will also auf Dialoge und Linkzu Stylesheet dann bei href gibt es den Link zu der HTMLDatei nicht.

...zur Frage

linien entfernen?

zwischen denn button sind so kleine linien. wie kan man die enfernen?

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/brands.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/all.min.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/brands.min.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/fontawesome.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/fontawesome.min.css">

    <title>Document</title>
</head>
<body>
    
    <div class="container">
        <h1>Homepage</h1>
        <a href="https://youtube.com">
            <button class="youtube"><i class="fa-brands fa-youtube"></i> YouTube</button>
        </a>
        <a href="https://discord.com/channels/@me">
            <button class="discord"><i class="fa-brands fa-discord"></i> Discord</button>
        </a>
        <a href="https://github.com">
            
            <button class="github"><i class="fa-brands fa-github"></i> Github</button>
        </a>
    </div>



    
</body>
</html>

style.css

body {
background-image: url(background.jpg);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
background-color: rgb(136, 127, 127);
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
text-align: center;

}

.youtube {
    align-self: center;
    background-color: #f44336;
    font-size: 20px;
    padding: 14px 40px;
    border-radius: 8px;
    color: black;
    border: 2px solid black;
}

.discord {
    background-color: #738adb;
    font-size: 20px;
    padding: 14px 40px;
    border-radius: 8px;
    color: black;
    border: 2px solid black;
}

.github {
    background-color: #495057;
    font-size: 20px;
    padding: 14px 40px;
    border-radius: 8px;
    color: black;
    border: 2px solid black;
}

...zur Frage

HTML schreiben und danach CSS anwenden oder den Code schreiben und sofort mit CSS stylen?

In Bezug auf eine responsive site zum Beispiel.

...zur Frage

Kann man CSS / SCSS Formatierungen Seitenabhängig machen?

Vorneweg: Ich habe 1 CSS / SCSS Datei zum Arbeiten welche für alle Unterseiten bei mir genutzt wird. Daran kann und werde ich nichts ändern und ich bitte auch nicht nachzufragen warum!!!

Kann ich nun eine Formatierung davon abhängig machen auf welcher Seite sie ausgeführt wird? Und wenn ja würde ich mich auch freuen wenn ihr sagt wie.

...zur Frage

HTML gradient in nav bar?

Hallo, ich versuche vergebens eine nav bar zu bauen, welche durch hovern einen gradient freigibt, nicht hinter jedem linkblock soll ein gradient sein, sondern ein 'grosser' hinter allen zsm. Mein ansatz ist bis jetzt dies:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>G&M Barber</title>
  </head>
  <body>
   
        <ul>
            <li><a href="barber.html">Home</a></li>
            <li><a href="barber.html">News</a></li>
            <li><a href="barber.html">Contact</a></li>
            <li><a href="barber.html">About</a></li>
            
        </ul> 
    
</body>
</html>

css:

body {
    background-color: black;
  }
  
  ul {
  background: linear-gradient(90deg, rgba(0, 3, 36, 1) 0%, rgba(121, 9, 118, 1) 47%, rgba(56, 134, 188, 1) 100%);    border-radius: 12px;
    overflow: hidden;
    display: table;
    margin: 0 auto;
    padding: 0;
  }
  
  li {
    display: inline-block;
  }
  
  li a {
    display: block;
    color: rgb(255, 255, 255);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    background: black;
  }
  
  li a:hover {
    background: transparent;
  }

jedoch sind die Abstände zwischen den li 'boxen' auch gefärbt, wie ändere ich das, oder wie gehe ich das schlauer an?

Vielen Dank schon mal

...zur Frage

Class in css und html wird nicht angesprochen, was tun?

Ich habe eine Frage zum Thema html und css. Die class .logo lässt sich nicht ansprechen und wenn ich mit vsc versuche verschiedene "classes" anzusprechen schlägt er mir nur alte gelöschte "classes" vor. Vielleicht kann mir ja jemand bei diesem Problem helfen Danke im vorraus :)

hier ist der Code:

index.html

<!DOCTYPE html>

<html>

<head>

<title>beispiel</title>

</head>

<body>

<nav>

<li><a href="">Element 2.1</a></li>

<li><a href="">Element 3.1</a></li>

<li><a href="">Element 4.1</a></li>

<li><a href="">Element 5.1</a></li>

<li><a href="">Element 6.1</a></li>

<li><a href="">Element 7.1</a></li>

<li><a href="">Element 8.1</a></li>

</ul>

<li><a href="">Element 1</a></li>

<li><a href="">Element 2</a></li>

<li><a href="">Element 3</a></li>

<li><a href="">Element 4</a></li>

<li><a href="">Element 5</a></li>

<li><a href="">Element 6</a></li>

<li><a href="">Element 7</a></li>

<li><a href="">Element 8</a></li>

</ul>

</nav>

</body>

</html>

style.css

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

body {

background-color: rgb(214, 214, 214);

}

nav {

width: 100%;

}

.leftnav {

float: left;

list-style: none;

background-color: cadetblue;

}

.topnav {

width: 100%;

float: right;

list-style: none;

background-color: crimson;

margin-bottom: 0;

}

nav .leftnav li {

margin-left: 25px;

margin-top: 30px;

margin-right: 25px;

margin-bottom: 30px;

}

nav .topnav li {

float: right;

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav .firstlielement {

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav li a {

text-decoration: none;

color: white;

}

nav .leftnav li a {

color: rgb(50, 60, 197);

text-decoration: none;

}

nav .leftnav li a:hover {

color: rgb(173, 174, 196);

text-decoration: none;

}

nav .topnav li a:hover {

color: rgb(81, 253, 1);

text-decoration: none;

}

.logo {

}

...zur Frage

localhost css laden?

Ich kann bei keine css dateien mit dem link tag laden. Ich habe mehrere Möglichkeiten ausprobiert:

<link type="text/css" rel="stylesheet" href="stylesheets/style.css">

<link type="text/css" rel="stylesheet" hrefhttp://localhost/stylesheets/style.cssss">

<link type="text/css" rel="stylesheet" href="./stylesheets/style.css">

nur fürs Verständnis:

htdocs

|- index.php

|- stylesheets

|- style.css

keine dieser möglichkeiten funktioniert.

Weiß jemand wie das geht? Oder hab ich einen Fehler gemacht?

Danke im Voraus :)

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen