Sass if else nie działa

0

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;
}
1

Tutaj masz przykład jakie warunki można tworzyć w SCSS.

https://sass-lang.com/documentation/at-rules/control/if

To nam nie zadziała

.dd
{
  @if body background-color == cornflowerblue
  {
    border: 3px dotted brown;
  }
  @else
  {
    border: 3px dotted yellow;
  }
}

ponieważ style nie mają dostępu do elementów na stronie i nie mogą odczytać wartosci z body, ani żadnego innego znacznika.

1 użytkowników online, w tym zalogowanych: 0, gości: 1