scss

선택자를 만드는 관점에서 볼 때 불필요한 부모 요소 선택자를 매번 적어야하는 점. 규모가 커지는 프로젝트의 경우에도 일원화된 자동화가 어렵고 수동으로 모든것들을 수정변경해야함선택자의 중첩(Nesting)을 통해 반복되는 부모 요소 사용을 현저하게 줄일 수 있다.변수를

가장 기본적이면서 필수적인 기능으로, 상위 선택자의 반복을 최소화 시키면서 복잡한 css구조를 단순화 한다.body 안에는 선언하지 않고 독립적으로 선언한다.자식요소 선택자의 경우 부모요소 선택자의 중괄호 안에 선택자를 선언하고 다시 중괄호로 묶는다.social 이라는

대부분 버튼 디자인인 경우 공통으로 만든다.위의 경우에는 .frame이라는 div안의 button에만 적용되지만 공통으로 만들기 위해서는 이렇게 쓴다(css와 같더라두,,)

hover, nth-child같은 가상클래스는 &와 연결해서 사용한다.gap : 10px; flex를 주고 그 요소들끼리의 gap을 정한다.flex: 1; 그 요소들끼리 공평하게 나눔display: flex; justify-content: center; align-it

scss 속성들이 font-뭐시기로 통일되고 있다. 이런경우 접두어를 사용하여 css속성을 자동생성 시킬 수 있다.많이 사용되지는 않음..

header, section, footer에 모두 h1 태그가 있고 같은 속성을 주고싶을 때에 원래 쓰던 방식은 연결 선택자를 이용해서 나열했다.그러나 가상클래스:is를 이용해서 훨씬 간단하게 표현이 가능하다.페이지에나오는 form 요소 안에들어가는 input 요소들에

특수문자(-,\_ 제외) , 숫자로 변수명 시작불가이렇게 각각의 버튼들에 색깔을 지정하고 프로젝트가 커지면서 버튼들이 증가하고 저렇게 primary 색들을 다 주게되고난 후, primary 색을 변경하려고 할때에 일일이 다 변경해주어야하는 단점이 있다.변수를 선언해서

이런 파일이 있다고 가정하자.구글폰트나, css를 불러올때는 css처럼 @import url(...) 형식으로 외부파일을 불러온다.그러나 scss를 불러올때는 이런 형식으로 url을 제거하고 불러온다.

해당 변수를 선언한다.font-size를 선언한 변수에 3배를 하여 출력하고 싶다면 산술연산자 \*를 사용하여 출력한다.\+, - ,\*는 그냥 저 위처럼 사용하면되지만 /(나누기)는 다르다(50px / 10px) 이렇게 써버리면 css로 컴파일 될때 padding :

위 사진처럼 제목을 디자인하는데 h1태그에 요소만 꾸미는게 다가아니라 h1안의 span 태그도 디자인 해줘야하고 밑에 가상요소를 더하여 디자인해야한다. 위와같은일을 동일한 디자인의 제목이 200개라면 200개 다 똑같이 반복하여 scss를 작성하는 것보다는 공통으로 만

선택자 속성을 가져올 수 있다.버튼에 대한 공통적인 속성을 적용했을 때 다른 버튼에도 이 속성을 적용하고 싶다면 @extend를 사용한다.클래스니까 .를 꼭 포함해줘야한다.css에서는 이렇게 했었음 class="btn order"

이렇게 한 변수안에 배열처럼 여러 값을 넣을 수 있다.사용은 map-get으로 변수를 사용한다.어울리는 색상코드 사이트 flat color

중첩 @mixin 👊 예제 >- 나는 제목부분과 본문부분의 글씨체를 다르게 하고싶다. 나는 제목태그들은 공통적인 속성을 주고싶다. 나는 전체 body에 공통적인 속성을 주고싶다. 기본 디폴트 폰트 사이즈와 font-family를 변수로 정의해준다. 전체 body