kod index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style/css/main.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
</head>
<body>
<table class="tabelka">
<tr><th><h1>Nagłówek kolumny <span>1</span></h1></th><th><h1>Nagłówek kolumny <span>2</span></h1></th></tr>
<tr><td>Kolumna 1, wiersz 1</td><td>Kolumna 2, wiersz 1</td></tr>
<tr><td>Kolumna 1, wiersz 2</td><td>Kolumna 2, wiersz 2</td></tr>
</table>
<button class="x">sad</button><br>
<button class="ds">kdsf</button>
<button class="dd">kekw</button>
</body>
</html>
package.json
{
"name": "sass",
"version": "1.0.0",
"description": "prosta strona do nauki sassa",
"main": "index.js",
"scripts": {
"compile:sass": "sass --watch style/scss:style/css"
},
"keywords": [
"sass"
],
"author": "superuserek",
"license": "ISC",
"dependencies": {
"autoprefixer": "^10.4.14",
"bootstrap": "^5.2.3",
"fontawesome": "^5.6.3",
"sass": "^1.62.1"
}
}
kod main.scss
@import "joua";
@import "doimportu";
// zmienne
$bgcolor: rgb(208, 208, 208);
$h1color: green;
body
{
background-color: $bgcolor;
}
// zagnieżdżanie
.tabelka, th, td
{
border: 1px white solid;
h1
{
color: green;
span
{
font-weight: normal;
}
}
}
//mixiny
@mixin dsads
{
color: palevioletred;
}
.x
{
@include dsads;
}
//import include etc
// w pliku doimportu.scss i joua.scss
//ify i else
.dd
{
@if body background-color == cornflowerblue
{
border: 3px dotted brown;
}
@else
{
border: 3px dotted yellow;
}
}
kod doimportu.scss
$hejcia: rgb(35, 180, 120);
@mixin lo
{
background-color: red;
}
kod joua.scss
@import "doimportu";
.ds
{
color: $hejcia;
@include lo;
}