인프런 커뮤니티 질문&답변
작성한 질문수
scss 변수$ 속성 변환하는법 알려주세요
작성
·
386
1
$black: #333;
$white: #eee;
common.scss에 있는 식이에요.
그리고 style.scss에 이렇게
@import "common.scss";
연결시킨후에
제이쿼리로 이렇게 작성했습니다.
body.toggleClass("dark");
body가 .dark되면
.dark {
$black: #eee;
$white: #333;
}
.logo {
@include font-small;
color: $black;
font-weight: 700;
}
.logo의 color가 $black은 #eee이 되어야할텐데 컬러가 바뀌질 않습니다ㅠㅠ
어떻게 해아할까요?
답변 2
0
코딩웍스(Coding Works)
지식공유자
.dark {
$black: #eee;
$white: #333;
}
이 부분이 잘못된거 같아요.
변수를 선택자 내에서 선언할 수 있지만 가장 상단에 전역변수로 아래로 선언되어 있으니까
변수를 선택자 내에서 선언할 수 있지만 가장 상단에 전역변수로 아래로 선언되어 있으니까
$black: #333;
$white: #eee;
선택자 내에서는 아래처럼 해주면 될 것 같아요.
.dark {
color: $black;
}
oo !
질문자
html
<body class="preload">
<header>
<a href="#none" class="logo">logo</a>
<div class="rightSide">
<div class="btn changeBtn">
<ion-icon name="moon-outline"></ion-icon>
<ion-icon name="sunny-outline"></ion-icon>
</div>
<div class="btn menuToggle">
<ion-icon name="menu-outline"></ion-icon>
<ion-icon name="close-outline"></ion-icon>
</div>
</div>
</header>
<section class="main">
<video
src="img/video.mp4"
loop
autoplay
muted
poster="img/video.png"
></video>
<img src="img/mask.jpg" alt="" class="mask" />
<h2>변화의 시작, 엘라로즈</h2>
<p>Copyright @ Ellarose K.2021.All right reserved.</p>
<div class="sns">
<a href="#none"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#none"><ion-icon name="logo-instagram"></ion-icon></a>
<a href="#none"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="#none"><ion-icon name="logo-youtube"></ion-icon></a>
</div>
</section>
<ul class="nav">
<li><a href="#none">Home</a></li>
<li><a href="#none">Aboot us</a></li>
<li><a href="#none">Project</a></li>
<li><a href="#none">Contact</a></li>
</ul>
</body>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
common.scss
// 문자설정
$black: #333;
$white: #eee;
$font-base: 1.6rem;
$font-kr: "Noto Sans KR", sans-serif;
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
style.scss
@import "common.scss";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&family=Noto+Sans+KR:wght@100;400;700&display=swap");
.dark {
color: $white;
background-color: $black;
}
.dark .mask {
filter: invert(1);
mix-blend-mode: multiply;
}
header {
position: fixed;
z-index: 888;
display: flex;
justify-content: space-between;
width: 100%;
padding: 40px;
& .logo {
@include font-small;
color: $black;
font-weight: 700;
}
}
.rightSide {
display: flex;
& .btn {
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
& ion-icon {
@include font-small;
color: $black;
&:nth-child(2) {
display: none;
}
}
&.active ion-icon:nth-child(2) {
display: block;
}
&.active ion-icon:nth-child(1) {
display: none;
}
}
}
section.main {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
& video {
@include object-f;
object-fit: cover;
}
& .mask {
@include object-f;
user-select: none;
mix-blend-mode: screen;
z-index: 555;
}
& h2 {
position: absolute;
z-index: 777;
@include font-large;
color: $white;
width: 80%;
text-align: center;
user-select: none;
}
& p {
position: absolute;
z-index: 555;
left: 3em;
bottom: 20px;
@include font-basic;
}
& .sns {
position: absolute;
z-index: 555;
right: 3em;
bottom: 20px;
font-size: 2rem;
& a {
color: $black;
&:hover {
color: crimson;
}
}
}
}
ul.nav {
@include object-f;
left: -100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 777;
background-color: $white;
transition: 0.5s;
&.active {
left: 0;
}
& li a {
color: $black;
@include font-small;
display: block;
padding: 0.5em 3em;
border-radius: 50px;
&:hover {
background-color: $black;
color: $white;
}
}
}
----------------------------------------------------------------------------
style.css
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&family=Noto+Sans+KR:wght@100;400;700&display=swap");
.dark {
color: #eee;
background-color: #333;
}
.dark .mask {
-webkit-filter: invert(1);
filter: invert(1);
mix-blend-mode: multiply;
}
header {
position: fixed;
z-index: 888;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
padding: 40px;
}
header .logo {
font-family: "Montserrat", sans-serif;
font-size: 3.2rem;
color: #333;
font-weight: 700;
}
.rightSide {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.rightSide .btn {
width: 40px;
height: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
}
.rightSide .btn ion-icon {
font-family: "Montserrat", sans-serif;
font-size: 3.2rem;
color: #333;
}
.rightSide .btn ion-icon:nth-child(2) {
display: none;
}
.rightSide .btn.active ion-icon:nth-child(2) {
display: block;
}
.rightSide .btn.active ion-icon:nth-child(1) {
display: none;
}
section.main {
position: relative;
width: 100%;
min-height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
section.main video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
section.main .mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
mix-blend-mode: screen;
z-index: 555;
}
section.main h2 {
position: absolute;
z-index: 777;
font-family: "Montserrat", sans-serif;
font-size: 9.6rem;
color: #eee;
width: 80%;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
section.main p {
position: absolute;
z-index: 555;
left: 3em;
bottom: 20px;
font-family: "Montserrat", sans-serif;
font-size: 1.6rem;
}
section.main .sns {
position: absolute;
z-index: 555;
right: 3em;
bottom: 20px;
font-size: 2rem;
}
section.main .sns a {
color: #333;
}
section.main .sns a:hover {
color: crimson;
}
ul.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
left: -100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 777;
background-color: #eee;
-webkit-transition: 0.5s;
transition: 0.5s;
}
ul.nav.active {
left: 0;
}
ul.nav li a {
color: #333;
font-family: "Montserrat", sans-serif;
font-size: 3.2rem;
display: block;
padding: 0.5em 3em;
border-radius: 50px;
}
ul.nav li a:hover {
background-color: #333;
color: #eee;
}
--------------------------------------------------------------------
js
$(document).ready(function () {
const jq = $.noConflict();
let changeBtn = jq(".changeBtn");
let menuToggle = jq(".menuToggle");
let body = jq("body");
let menu = jq(".nav");
changeBtn.click(function () {
body.toggleClass("dark");
changeBtn.toggleClass("active");
});
menuToggle.click(function () {
menuToggle.toggleClass("active");
menu.toggleClass("active");
});
});
oo !
질문자
많이 부족한 실력이지만 선생님이 알려주신것 공부하면서 scss적용시켜보는데 쉽지가 않네요 ㅠㅠ!
그리고 선생님 밑에처럼 쓰면 잘되는데
menuToggle.click(function () {
menuToggle.toggleClass("active");
menu.toggleClass("active");
});
menuToggle.click(function () {
menuToggle,menu.toggleClass("active");
});
위에 써놓은것처럼 그룹으로 선택자를 묶으면 적용이 안됩니다 ㅠㅠㅠ
단축해서 쓰는 방법은 없을까요?
0
코딩웍스(Coding Works)
지식공유자
일단 제이쿼리 구문이 아래와 같을 수는 없습니다..
body.toggleClass("dark");
아래처럼 되어야 하는데요.
$("body").toggleClass("dark");
이 부분 먼저 체크해보셔야 할 것 같아요.
선생님
background가 $white면 body가 .dark되었을때 $black이 되어야 하고
그 반대로 color가 $black이면 .dark되었을때 $white로 되어야하는데 어떻게 써야할까요?
common.scss 에는
common.scss 를 style.scss 상단에 import 시켜놨습니다.