Merhabalar. Şu an SCSS (SASS) öğreniyorum ve pratik sırasındayken şöyle bir sorun ile karşılaştım. Olay şu; Switch butonuna tıklandığında arka planı rengini siyah metin rengini beyaza çevirecek bir toggle fonksiyonu yazdım fakat olmuyor. Anladığım kadarıyla Bootstrap kullanmam SCSS'i engelliyor. Bootstrap CDN kodlarını kaldırdığımda SCSS çalışıyor fakat geri eklediğimde kodlar çalışmıyor.
NOT: JQuery de eklediğim fonksiyon çalışıyor ve class ismi body etiketine ekleniyor fakat tema değişmiyor. Yani temanın değişmesi lazım fakat nedense Bootstrap yüzünden olmuyor...
### KODLAR:
HTML:
`<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="CSS/main.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body id="body" class="">
<div class="main">
<p class="main__paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam error voluptates cum assumenda tenetur officia temporibus consectetur dolorem eum libero harum vero eaque magnam perspiciatis, dolorum saepe ratione perferendis corrupti, minus quos? Libero iusto, quas maxime necessitatibus atque quia eum quibusdam reprehenderit unde. At fugit earum, in beatae quasi facere!</p>
<p class="main__paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam error voluptates cum assumenda tenetur officia temporibus consectetur dolorem eum libero harum vero eaque magnam perspiciatis, dolorum saepe ratione perferendis corrupti, minus quos? Libero iusto, quas maxime necessitatibus atque quia eum quibusdam reprehenderit unde. At fugit earum, in beatae quasi facere!</p>
</div>
<div class="form-check form-switch">
<input class="form-check-input" onclick="deneme()" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script>
function deneme() {
$('body').toggleClass('light')
}
</script>
</body>
</html>`
SCSS:
`@import './resets';
@import './variables';
@function weight($weight-name) {
@return map-get($font-weights, $weight-name)
}
@mixin flexCenter($direction) {
display: flex;
justify-content: center;
align-items: center;
flex-direction: $direction;
}
@mixin theme($light-theme: true) {
@if $light-theme {
background: lighten($primary-color, 100%);
color: darken($text-color, 100%);
}
}
body {
background: $primary-color;
color: $text-color;
transition: 500ms;
}
.main {
@include flexCenter(row);
width: 80%;
margin: 0 auto;
#{&}__paragraph {
font-weight: weight(bold);
cursor: pointer;
&:hover {
color: orange;
}
}
}
.light {
@include theme($light-theme: true);
}`
Birazdan Kafayı yiyeceğim...
Yardımcı olursanız sevinirim...