Bir dosyayı değişkenleri ve sınıfları tanımladım. Bunu ana SCSS dosyama aktarmak istiyorum, ancak ne zaman değişkenleri ana dosyamda kullanmak istesem hata alıyorum. Hatada bana SCSS önişlemcisi değişkenin tanımlı olmadığını söylüyor.
[CODE lang="scss" title="_variables.scss"]$black: #000000;
$chinese-black: #141414;
$eerie-black: #1b1b1b;
$white: #ffffff;
$anti-flash-white: #f3f3f3;
$chinese-white: #e1e1e1;
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}[/CODE]
[CODE lang="scss" title="main.scss"]@use "_variables";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
[class*="col-"] {
width: 100%;
}
@media only screen and (max-width: 768px){
header {
height: 3rem;
background-color: $chinese-white;
}
}[/CODE]
[CODE lang="html" title="index.html"]<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anasayfa</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header class="col-9">content</header>
<nav></nav>
</body>
</html>[/CODE]
[CODE lang="scss" title="_variables.scss"]$black: #000000;
$chinese-black: #141414;
$eerie-black: #1b1b1b;
$white: #ffffff;
$anti-flash-white: #f3f3f3;
$chinese-white: #e1e1e1;
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}[/CODE]
[CODE lang="scss" title="main.scss"]@use "_variables";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
[class*="col-"] {
width: 100%;
}
@media only screen and (max-width: 768px){
header {
height: 3rem;
background-color: $chinese-white;
}
}[/CODE]
[CODE lang="html" title="index.html"]<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anasayfa</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header class="col-9">content</header>
<nav></nav>
</body>
</html>[/CODE]