SASS/SCSS: Nesting 중첩, 변수

중첩

1. 규칙 중첩

 

2. 속성 중첩

 

 

 

특수선택자

 

부모 참조 선택자 &

 

@at-root 중첩 벗어나기

 

---

변수

$변수명:데이터

식별자 (변수명) 규칙:

영문,한글 모두 가능

* kebab-case (mostly use)

* snake_case

 

 

데이터의 종류

데이터	설명(특이사항)	예시
Numbers	숫자: 숫자에 단위가 있거나 생략가능	1,20px, 2em, .5
Strings	문자 : 따옴표가 있거나 생략	bold, relateive, “dotum”,
Colors	색상표현	red, #ff0000, rgba(255,0,50,0.5)
Booleans	논리	true,false
Nulls	아무것도 없음 null이 사용되면 컴파일하지 않음	null
Lists	공백이나 , 로 구분되는 목록: (), 생략가능	(apple, orange), apple orange
Maps	List와 유사하나 값이 Key:Value 형태 : ()를 꼭 붙여야함	(apple:a, orange:o, banana:b)

 

전역변수, 지역변수

//전역변수
$메인컬러:#ccc;
$너비:500px;

header{
    $높이:200px; //지역변수

    background:$메인컬러;
    width:$너비;
    height:$높이;
    
    h1{
        height:$높이;
    }
}
section{
    background:$메인컬러;
    // height:$높이; ->적용안됨
}

 

!global

 

변수 재할당

$red:#ff0000;
$white:#ffffff;

$배경색:$red;
$글자색:$white;

 

변수 재정의, !default

 

#{}문자보간