Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- github io
- react
- styled components
- typescript react
- Git
- react typescript
- API token
- git lab
- CSS
- npm styled-reset
- next.js css
- SCSS
- fetch
- bootstrap
- nextjs
- nextjs .env
- react env
- nextjs 설치
- getModifierState
- API 토큰
- icon
- ngrok설치
- There isn’t anything to compare
- 컨디셔널 렌더링
- ngrok실행
- input type=file
- rewrites
- github
- createGlobalStyle
- dart 변수
Archives
- Today
- Total
꾸준히 성장하는 개발자
SCSS 변수 활용 본문
$변수: 값 ;
SCSS에서 변수 선언은 const나 let이 아닌 $로 선언이 된다
그리고 그 값을 쓸곳에 $변수라고 작성해주면 된다.
예시)
주의할점!!
선언된 범위에서 유효범위를 가진다.
위 예시처럼 맨위에 영역밖에서 작성이 되면 전역변수이지만
아래처럼 작성하게 되면 .container에서만 사용가능한 유효범위가 생긴다.
상황에 따라 잘 선택해서 사용하자
또 이렇게 .item에 size값 다른값으로 바꾸게 되면 이걸 재할당의 개념이 된다
그렇기 때문에 아래에서는 200px이 되고
.item의 밖 , 그리고 아래에 left에 작성한 size값은 재할당된 200px이 되게 된다.
'CSS > SCSS' 카테고리의 다른 글
SCSS 반복문 (0) | 2022.03.29 |
---|---|
SCSS - 재활용(Mixins) (0) | 2022.03.25 |
SCSS 산술 연산 (0) | 2022.03.25 |
SCSS 문법 (0) | 2022.01.09 |
scss (0) | 2022.01.09 |