inflearn logo
강의

Course
Instructor

SCSS(SASS) FLEX GRID Core Theory (PDF) Textbook and Usage Examples

[Download] SCSS (SASS) Core Theory Textbook (PDF)

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

490

ellameyrosek

19 asked

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

scss flex HTML/CSS sass

Answer 2

0

codingworks

.dark {
  $black: #eee;
  $white: #333;
}
 
이 부분이 잘못된거 같아요.
변수를 선택자 내에서 선언할 수 있지만 가장 상단에 전역변수로 아래로 선언되어 있으니까
 
$black: #333;
$white: #eee;
 
선택자 내에서는 아래처럼 해주면 될 것 같아요. 
 
.dark {
   color: $black;
}

0

ellameyrosek

 
.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 시켜놨습니다.

 

0

codingworks

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

0

ellameyrosek

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");
  });
});
 
 

0

ellameyrosek

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

 

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

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

0

codingworks

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

body.toggleClass("dark");

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

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

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

0

ellameyrosek

아 제가 변수를 써서요. 

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

6-6

0

4

0

Json 플러그인 사용시 variable collection 없음

0

12

1

배리어블 목록 없음

0

22

3

Token 등록 방법 문의

0

19

1

6-6 실습 문의

0

23

2

섹션5 노션링크 는 따로 없나요?

0

30

2

Part 4에서 강의 연관 노션 정보들이 워드파일에 없습니다.

0

33

2

첨부자료 Part 4 코드 확인 부탁드리겠습니다.

0

29

2

선생님 각 강좌마다 예시로 보여주시는 웹페이지들은 어디서

0

24

1

퍼플렉시티 최소 결제단위 50달러로 바뀐 것 같습니다.

0

54

2

claude plugin 방법 자세히 부탁드려요

0

40

2

강의에 적용한 스크립트를 받아 볼수 있을까요?

0

40

2

최근 코테, 과제 테스트 트렌드

0

67

2

노션 25 인터렉션 구현 파트 안 보입니다!

0

39

2

파트3 13F부분도 짤린거같은데 확인해주세요

0

39

2

Gemini로 진행가능 여부 궁금합니다.

0

59

2

뉴스페이퍼 싱글템플릿 디자인 관련 상담 요청

0

26

2

선생님 왜 설정에서 요런게 뜨는지 모르겠습니다ㅏ

1

365

2

vc프로그램 이미지가 표시 안되는 것에 대한 질문

1

364

2

선생님 scss설치한 후로 자꾸 패널이 scss 수정하고 컴파일될때마다 딸려올라오네요 ㅠㅠㅠㅠ

1

260

1

선생님 저장경로에 관해서도 질문있습니다.

1

311

1

선생님 조건문관련 패딩에 관해 질문드립니다.

1

268

1

선생님 저 #은 무엇을 의미하는 건가요?

1

250

1

선생님 강의 너무 알찹니다 이번에도 구매! 파일에도 정성이 느껴져요 ㅎㅎ

1

296

1