Skip to content

WV-H8 - CSS-esiprosessorit

Tässä harjoituksessa opetellaan tyylien kirjoittamista SASSilla, ja CSS-esiprosessointia.

Opiskele SASS:in perusteet täältä: https://www.w3schools.com/sass/. Alla myös hyvä video aiheesta:

SASSin kääntämiseen voi käyttää esim. Koalaa. Nohevammat automatisoi käännön npm-ympäristössä käyttäen gulppia!

Tee sen jälkeen itsellesi joko kopio alhaalta löytyvästä HTML-tiedostosta. Voit myös ottaa esim. vanhat web-tekniikat-kurssin portfoliosivusi ja lähteä tyylittelemään niitä uusiksi SASSilla. Tyylittele sivu SASSilla käyttäen vähintään seuraavia SASSin ominaisuuksia:

  • Modulaarinen rakenne, @import
    • Tarkoittaen, että main.sass tiedosto johon importataan erikseen esim. typo.sass ja vaikka colors.sass jossa on niille omat määreensä (ja muuttujansa!)
  • Nestaus
    • SASS mahdollistaa käytettävämmän nestauksen, verrattuna CSS3
  • Mixinejä, @mixin
    • Esim. typografiat
    • Esim. blockquote lohko
  • Muuttujia, $variable
    • Esim. värit, fonttikoot
  • Extend, @extend

Huomioi, että SASSia voi käyttää kahdella eri syntaksilla, .SCSS ja .SASS. Ohjeissa usein näkee käytettävän .SCSS syntaksia koska se on hieman tutumman näköistä, mutta esim allekirjoittanut pitää enemmän .SASS syntaksista.

Tallenna esimerkkiharjoitus itsellesi ja hostaa se joko student-palvelimelle, tai gitlab pagesin päälle, omaan kansioonsa. Palauta Optiman palautuslaatikkoon tekstitiedosto (.txt) jossa on linkki sekä itse hostattuun sivuun, että suoraan että lähdekoodiin. SASSin kanssa opettajalle lähdekoodin näkeminen on erityisen tärkeätä! Katso että kansiosta löytyy kääntämättömät SASS-tiedostot.

Alla esimerkkipohja harjoitukseesi. Sisällöllisesti tämä on minimi. Täytähän siihen itse lisää sisältöä ja muuta mielellään rakennettakin hiukan omanlaiseksi.

<!DOCTYPE html>
<html>
<head>
<title>SASS exercise</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Here I have included Roboto(400, 900) and Open Sans(300, 400) fonts you can use -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&family=Roboto:wght@400;900&display=swap" rel="stylesheet">
<!-- Use them in CSS with:    font-family: 'Open Sans', sans-serif;
                              font-family: 'Roboto', sans-serif; -->

</head>
<body>

<header>
  <!-- add some styling -->
  <h1>This is a Heading</h1>
  <nav>
    <ul>
      <li><a href="#">Link1</a></li>
      <li><a href="#">Link2</a></li>
      <li><a href="#">Link3</a></li>
    </ul>
  </nav>
</header>

  <main>

    <!-- add content and styling here -->
    <!-- lorem ipsum is ok -->
    <article>
      <h2>Article</h2>
      <p>This is a paragraph.</p>
    </article>

    <article>
      <h2>Article</h2>
      <p>This is a paragraph.</p>
    </article>

    <article>
      <h2>Article</h2>
      <p>This is a paragraph.</p>
    </article>

  </main>

  <footer>
    <!-- add some content -->
    <span>Some bottom links here</span>

    <ul>
      <li><a href="#">Footer1</a></li>
      <li><a href="#">Footer2</a></li>
      <li><a href="#">Footer3</a></li>
    </ul>

  </footer>

</body>
</html>