Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av Bryal:

Variabler i allmänhet är ju väldigt trevligt. Smidigt när man mobilanpassar sidan att bara behöva ändra på ett par variabler för de vanliga bredderna istället för att behöva modifiera vart och vartannat element.

Hurvida SASS är bättre kan jag inte direkt uttala mig om då jag aldrig använt det, men spontant känns det ju överlägset att inte vara beroende av ett byggsystem / ett kompileringssteg för att styla sin enkla hemsida. Vad tjänar man på att använda det mer komplexa SASS vs. att bara skriva ren CSS? Känns lite som när man drar in onödigt beroende på jQuery för att lösa problem där lika många rader Javascript hade kunna göra samma sak.

SASS gör bland annat att du kan dela upp din styling i flera olika filer, t.ex. en fil för bara variabler, en för bara navbaren och en för footern. No more scrolling. Alla dessa kompileras sedan ihop till en CSS fil.

Du kan även använda mixins som är likt functions i JS.
Du kan använda if-satser och loopar. Med detta kan du göra en dynamisk media query som du bara passar parametrar till då du behöver den.

Du kan nästa din styling oändligt om så önskas. Mycket enklare att läsa och underhålla.

Det finns färdiga funktioner som t.ex. Darken och Lighten som kan ta en färg och göra procentuell mörkare eller ljusare.

Du kan enkelt skapa upp flera klasser med en loop.
Låt oss säga att du har 20 färger och vill skapa klasser för olika buttons, text och bakgrundsfärger. Då kan du bara köra alla i en loop, som deklarerar upp alla klasser med namnen du vill ha, t.ex. text-red, bg-red, btn-red.

SASS kompilerar till en CSS-fil som din webbläsare använder. Detta kan du automatisera vid en build med t.ex. webpack eller gulp. Kompilera all SASS och minifiera den.
Annars kan du köra preprocessors som Koala, det programmet känner av då du ändrar i din SASS och kompilerar allt till din CSS fil varje gång du sparar.

Rekommendera dig att skriva SASS, du kommer aldrig vilja gå tillbaka till CSS.
Det är inte som jQ och JavaScript, då sass kompileras till CSS, bara att det är enklare för dig att jobba i.

Skickades från m.sweclockers.com

Trädvy Permalänk
Medlem
Registrerad
Feb 2006
Skrivet av ssoffipropp:

Tack så mycket!
Radbytningen sker dock inte automatiskt.. Ska det egentligen bara funka att hoppa ner några rader i dokumentet utan att skriva <br>?

Ja precis. Du ska använda dig av <p> på din text som automatiskt skapar radbrytning. Sedan kör du margin, padding eller andra egenskaper för att skapa ditt utseende.

Har ändrat din kod lite utefter semantiska element istället för div. Har även lagt till en egenskap i css. Väldigt oklart om jag lyckades ändra utefter hur din hemsida är tänkt då det var svårt att koppla vilken div du ville stänga osv osv... Har även ändrat alla bildernas namn till cross1.jpg för att själv testa så det fungerade som tänkt, bara att ändra tbx..

<!DOCTYPE html> <html lang="sv"> <head> <meta charset="utf-8"> <title>Sofies sida</title> <link rel="stylesheet" href="styles.css" type="text/css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="wrapper"> <header class="lankar"> <a href="#betyg">Betygsmål</a> <a href="#serier">Serier och filmer</a> <a href="#citat">Favoritcitat</a> <a href="#foto">Fotografier</a> </header> <!-- rubrik --> <h1>Välkommen hit!</h1> <main class="box1"> <!-- underrubrik 1 --> <h2> Vem är jag?</h2> <!-- stycke --> <article class="stycke"> <p> massa text </p><br> </article> <!-- underrubrik 2 --> <h2 id="betyg">Mitt mål med denna kurs?</h2> <p>massa text </p> <p class="betyg"> Mitt betygsmål? <font color="red">text</font></p><br> <!-- favoritserier --> <h2 id="serier">Serier och filmer</h2> <p>lite text </p><br> <section class="serie"> <table> <tr> <th>Serier</th> <th>Filmer</th> </tr> <tr><td>Power</td><td>Dirty Dancing</td></tr> <tr><td>Peaky Blinders</td><td>A walk to remember </td></tr> <tr><td>Arrow</td><td>The holiday</td></tr> <tr><td>Innan vi dör</td><td>Safe heaven</td></tr> <tr><td>Greys anatomy</td><td>Blood and bone</td></tr> <tr><td>Game of thrones</td><td>Columbiana</td></tr> <tr><td>The 100</td><td>En oväntad vänskap</td></tr> <tr><td>Lethal weapon</td><td>Walk the line</td></tr> <tr><td>Hamilton</td><td>Five feet apart</td></tr> <tr><td>Bodyguard</td><td>The hard way</td></tr> </table> </section> <br> <!-- Favoritciat --> <h2 id="citat">Favoritcitat från serier/filmer</h2> <q> You were like coming up for fresh air. It's like I was drowning and you saved me</q><br> - Derek Shepherd, Greys anatomy <br> <br> <q>If two people were meant to be together,eventually they'll find their way back</q> <br> - Chuck Bass, Gossip girl <br> <br> <q>Never let the fear of striking out, keep you from playing the game</q><br> - A cinderella story <br><br> <q>I like getting older, I feel like I'm finally aging into my personality</q><br> - Nick Miller, New girl <!-i- fotografier --> <h2 id="foto">Fotografier</h2> <figure class="flex-img"> <img src="cross1.jpg" alt="crossbild"> <img src="cross1.jpg" alt="crossbild"> <img src="cross1.jpg" alt="bild på gravidmage"> <img src="cross1.jpg" alt="bild på gravidmage"> <img src="cross1.jpg" alt="bild på gravidmage"> <img src="cross1.jpg" alt="bild på gravidmage"> <img src="cross1.jpg" alt="bild på gravidmage"> </figure> </main> <br> <footer class="box2"> <a href="#toppen"> <h3>Tillbaka till toppen</h3> </a> <footer> </div> </body> </html>

och här kommer CSS:en.. Enda ändringen är de två längst ner, flex-img. Den la jag till så du skulle slippa ha width och <br> vid dina bilder. Nu sköts det med CSS istället.

body{ background-color: #A7895D; } /*box till sidan*/ .box1{ width: 700px; height: auto; background-color: #FFFFFF; padding: 10; border: 1px solid #000000; margin: auto; } /*Huvudrubrik*/ h1{ font-size: 70; font-family: janetta silloam; text-align: center; font-style: normal; } /*underrubriker*/ h2{ background-color: #EEDDC4; font-family: georgia; font-size: 20; } /*text*/ .stycke{ text-align: center; font-family: georgia; font-size: 14; } p { font-size: 14px; } /*LÄNKARNA*/ .lankar{ text-align: center; text-decoration: none; font-family: georgia; margin-top: 20px; } a { background-color: #9F9484; text-decoration: none; padding: 3px; } a:link { color: #000000; } a:visited { color: #000000; } a:active { color: saddlebrown} .betyg{ font-size: 20; font-family: cursive } /*Tabell med serier och filmer*/ table, td, th{ border-collapse: collapse; border: 1px solid black; padding: 4px; text-align: center; } table{ margin: auto;} th{ background-color: #A7895D; } /*WRAPPER*/ #wrapper { width: 730px; margin: auto; border: 4px solid #A7895D; padding: 5; background-color: #EEDDC4; } h3 { text-align: center} /* flex-img är klassens namn, och när jag lägger ett img efteråt så kommer det påverka alla element som har typen img i den klassen. */ .flex-img img{ display: flex; max-width: 670px; height: auto; flex-direction: column; margin: 10px; } /* Bara en exempelklass likt ovan, fast med p istället. Skapar du en <p> innuti div class="flex-img" så kommer alla dessa p få storleken 30000px */ .flex-img p{ font-size: 30000px; }

Asus z270 Maximus Extreme | Intel i7 7700K | EVGA GTX 1080 FTW | 1TB WB Blue | 240GB Samsung 650 nvme | Fractal Design R6 | Corsair HX 1000W | Kingston 32GB DDR4 | Asus Swift PG278Q

Trädvy Permalänk
Medlem
Plats
NördCentrum
Registrerad
Jun 2011
Skrivet av zaibuf:

SASS gör bland annat att du kan dela upp din styling i flera olika filer, t.ex. en fil för bara variabler, en för bara navbaren och en för footern. No more scrolling. Alla dessa kompileras sedan ihop till en CSS fil.

Du kan även använda mixins som är likt functions i JS.
Du kan använda if-satser och loopar. Med detta kan du göra en dynamisk media query som du bara passar parametrar till då du behöver den.

Du kan nästa din styling oändligt om så önskas. Mycket enklare att läsa och underhålla.

Det finns färdiga funktioner som t.ex. Darken och Lighten som kan ta en färg och göra procentuell mörkare eller ljusare.

Du kan enkelt skapa upp flera klasser med en loop.
Låt oss säga att du har 20 färger och vill skapa klasser för olika buttons, text och bakgrundsfärger. Då kan du bara köra alla i en loop, som deklarerar upp alla klasser med namnen du vill ha, t.ex. text-red, bg-red, btn-red.

SASS kompilerar till en CSS-fil som din webbläsare använder. Detta kan du automatisera vid en build med t.ex. webpack eller gulp. Kompilera all SASS och minifiera den.
Annars kan du köra preprocessors som Koala, det programmet känner av då du ändrar i din SASS och kompilerar allt till din CSS fil varje gång du sparar.

Rekommendera dig att skriva SASS, du kommer aldrig vilja gå tillbaka till CSS.
Det är inte som jQ och JavaScript, då sass kompileras till CSS, bara att det är enklare för dig att jobba i.

Skickades från m.sweclockers.com

Jag skriver bara minimalistiskt eleganta webbsidor, så webpack, gulp, och allt vad det är ligger inte ens på min radar att någonsin använda. Det var vissa fina features du beskrev där, men inget som låter värt komplexiteten för mina syften. Om jag hade haft behov av att dela upp i flera filer eller generera CSS med loopar ser jag mest det som ett tecken på att min styling har blivit för komplex.

Simpelt men stiligt, med fokus på innehåll. För det räcker ren CSS gott och väl.

Gibb: Win10 - Ryzen 5 3600 - RX 580 - 16G 3000MHz DDR4
Server: Arch - 2 * Xeon X5570 - R9 280X - 32G DDR3 ECC

Trädvy Permalänk
Medlem
Registrerad
Mar 2018

@kwame: Jag har funderat på att gå ett kurs i webbutveckling. Kan du göra min uppgifter åt mig då?

Trädvy Permalänk
Medlem
Registrerad
Feb 2006
Skrivet av ToddTheOdd:

@kwame: Jag har funderat på att gå ett kurs i webbutveckling. Kan du göra min uppgifter åt mig då?

Hahah, SÅ hjälpsam var jag väl ändå inte?! =D
Mest förvånad att en kurs i webbutveckling inte lär ut att använda sig av semantiska taggar
som bland de första de lär ut, och ja, vad som faktiskt hör hemma i <head>. Tyckte enklaste
sättet att lära ut det var att ändra i den faktiska koden =]

Asus z270 Maximus Extreme | Intel i7 7700K | EVGA GTX 1080 FTW | 1TB WB Blue | 240GB Samsung 650 nvme | Fractal Design R6 | Corsair HX 1000W | Kingston 32GB DDR4 | Asus Swift PG278Q