강의

N
챌린지

멘토링

N
클립

커뮤니티

Cộng đồng Hỏi & Đáp của Inflearn

Hình ảnh hồ sơ của ellameyrosek
ellameyrosek

câu hỏi đã được viết

Sách giáo khoa và ví dụ ứng dụng về lý thuyết cốt lõi của SCSS(SASS) FLEX GRID (PDF)

[Download] Giáo trình lý thuyết cốt lõi SCSS (SASS) (PDF)

scss 변수$ 속성 변환하는법 알려주세요

Viết

·

478

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이 되어야할텐데 컬러가 바뀌질 않습니다ㅠㅠ
어떻게 해아할까요?
 
scssflexHTML/CSSsass

Câu trả lời 2

0

codingworks님의 프로필 이미지
codingworks
Người chia sẻ kiến thức

.dark {
  $black: #eee;
  $white: #333;
}
 
이 부분이 잘못된거 같아요.
변수를 선택자 내에서 선언할 수 있지만 가장 상단에 전역변수로 아래로 선언되어 있으니까
 
$black: #333;
$white: #eee;
 
선택자 내에서는 아래처럼 해주면 될 것 같아요. 
 
.dark {
   color: $black;
}
ellameyrosek님의 프로필 이미지
ellameyrosek
Người đặt câu hỏi

 
.dark {
   color: $black;
} 
 
위에처럼 써봐도 달라지질 않네요 ㅠ
 
 
.dark {
  color: $white;
  background-color: $black;
}
이렇게도 써봤지만 안되네요 ㅎㅎ ㅠ
 

선생님

background가 $white면 body가 .dark되었을때 $black이 되어야 하고 

그 반대로 color가 $black이면 .dark되었을때  $white로 되어야하는데 어떻게 써야할까요?

common.scss 에는 

$black: #333;
$white: #eee;
 
위에 처럼 써놓은 상태고

common.scss 를 style.scss 상단에 import 시켜놨습니다.

 

codingworks님의 프로필 이미지
codingworks
Người chia sẻ kiến thức

html, scss, css , js 풀코드를 답글로 올려주세요. 풀코드 보고 확인해볼게요~

ellameyrosek님의 프로필 이미지
ellameyrosek
Người đặt câu hỏi

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");
  });
});
 
 
ellameyrosek님의 프로필 이미지
ellameyrosek
Người đặt câu hỏi

많이 부족한 실력이지만 선생님이 알려주신것 공부하면서 scss적용시켜보는데 쉽지가 않네요 ㅠㅠ!

 

그리고 선생님 밑에처럼 쓰면 잘되는데 

  menuToggle.click(function () {
 menuToggle.toggleClass("active");
menu.toggleClass("active");
});
 
 
 
  menuToggle.click(function () {
 menuToggle,menu.toggleClass("active");
 
});
 
위에 써놓은것처럼 그룹으로 선택자를 묶으면 적용이 안됩니다 ㅠㅠㅠ
단축해서 쓰는 방법은 없을까요?

0

codingworks님의 프로필 이미지
codingworks
Người chia sẻ kiến thức

일단 제이쿼리 구문이 아래와 같을 수는 없습니다..

body.toggleClass("dark");

아래처럼 되어야 하는데요.

$("body").toggleClass("dark");

이 부분 먼저 체크해보셔야 할 것 같아요.

ellameyrosek님의 프로필 이미지
ellameyrosek
Người đặt câu hỏi

아 제가 변수를 써서요. 

let body = $("body") 로 해놨습니다 .

Hình ảnh hồ sơ của ellameyrosek
ellameyrosek

câu hỏi đã được viết

Đặt câu hỏi