728x90 반응형 CSS/SASS17 [SCSS] 작성법 13 - 연산하는 값 사용하기 [CSS/SASS] - [SCSS]작성법 12 - 중첩안에 선언하지만 중첩밖에서 사용해야하는경우 @at-root (중첩에서 벗어나기) 보통 css에서 연산하는 값을 사용하기 위해서는 calc()함수를 사용해야합니다. SCSS에서는 연산하는 값을 사용가능합니다. div{ $wid : 100px; width: $wid; height: $wid * 2; font-size: $wid/4 + 3; } 아래와 같이작성후 컴파일 한다면 아래와 같다. div{ width: 100px; height: 200px; font-size: 28px; } [CSS/SASS] - [SASS/SCSS]작성법 1 - 변수 사용하기 [CSS/SASS] - [SCSS]작성법 2 - 선택자 중첩하여 작성하기 [CSS/SASS] - [SCS.. 2019. 6. 17. [SCSS]작성법 12 - 중첩안에 선언하지만 중첩밖에서 사용해야하는경우 @at-root (중첩에서 벗어나기) [CSS/SASS] - [SCSS]작성법 11 - 상위선택자 & $w 변수는 .list 안에선언되었기 때문에 {}안에서만 사용가능합니다. 하지만 .list {}안에 중첩되는 선택자들은 하위선택자입니다. 이때 @at-root 를 사용해 중첩밖으로 빼내도록 컴파일 가능합니다. .list{ $w : 100px; li{ width: $w; } @at-root .box{ width: $w; } 컴파일하면 아래와 같습니다. .list li{ width: 100px; } .box{ width: 100px; } .list 안에 중첩되어 선언되었지만, @at-root 를통해 컴파일시 중첩밖으로 벗어납니다. [CSS/SASS] - [SCSS] 작성법 13 - 연산하는 값 사용하기 2019. 6. 17. [SCSS]작성법 11 - 상위선택자 & [CSS/SASS] - [SCSS]작성법 10 - 주석 중첩 안에서 상위(부모)선택자를 참조할 때 & 기호를 사용합니다. .button{ color:#000; &:hover{ color:red; } } 위와 같이 작성하며 컴파일 결과는 아래와 같습니다. .button{ color:#000; } .button:hover{ color:red; } 또한 응용하여 아래와 같이 작성가능합니다. .font{ &-12{font-size:12px;} &-15{font-size:15px;} &-18{font-size:18px;} &-20{font-size:20px;} } .font-12{font-size:12px;} .font-15{font-size:15px;} .font-18{font-size:18px;} .font-.. 2019. 6. 17. [SCSS]작성법 10 - 주석 [CSS/SASS] - [SCSS]작성법 9 - 다른 선택자에 적용한 속성 그대로가져와 적용하기 (@ extend) 주석의 방법은 두가지로 //컴파일 되지 않는 한줄 주석 과 /* 컴파일이 되는 여러줄의 주석이 있습니다. */ [CSS/SASS] - [SCSS]작성법 11 - 상위선택자 & 2019. 6. 17. 이전 1 2 3 4 5 다음 728x90 반응형