11월 24일 sass를 시작했다.
더 편리하기도 하고, 더 어렵기도 하고 뭔가 애증의 sass가 될거 같은 기분이다.
sass
* 탄생이유
스타일 시트가 점점 더 커지고, 복잡해지면서 유지보수의 어려움이 많이 생겨났다.
예를 들어 폰트 사이즈가 마음에 안든다고 하면 전체의 폰트사이즈를 찾아서 각각을 바꿔야 한 다. 이러한 문제들을 해결하고, 좀 더 편리하게 이용하고자 나온것이 sass라고 한다.
* 이용방법
보통 sass는 각 프레임 별(_header.scss,_home.scss)css를 분리하여 나중에 메인 파일에 import해서 사용 한다. 언더바가 있는 파일들은 컴파일 하지 않기때문에 메인 파일만 이용하면된다. 이러면 기능별, 레이아웃별 코드들이 분할되어 있기 때문에 코드 관리가 편해지게 된다.
중첩기능(Nesting)
1. nesting. 중첩기능을 사용하면, 시각적으로 어떤 부모를 가지고 있는지, 어느 형제 요소를 가지고 있는지,시각적으로 보기 편하지기 때문에 가독성이 높아 유지 보수 하기 쉽다.
📌 하지만, 오히려 지나친 중복은 코드를 더 보기 어렵게 만들고, 컴파일 된 후에도 불필요한 선택자가 엄청 생겨나니까, 그 부분은 지양하는게 좋다.
2. 속성 Nesting
- sass는 선택자뿐아니라, 속성도 중첩할 수 있다.
- 속성을 중복할때는 :(콜론) 을 사용하여 나타낸다.
.add-icon {
background : {
image: url("./assets/arrow-right-solid.svg");
position: center center;
repeat: no-repeat;
size: 14px 14px;
}
}이런식으로 백그라운드가 가지고 있는 이미지나 포지션등을 한번에 나타낼 수 있다.
3. &는 상위부모
&는 상위 부모를 나타낸다.
사실 처음에는 원래 중첩하면 부모가 바로 보이는거 아닌가? 생각을 했는데 이런 경우가 있다.
.box {
&-yellow {
background: #ff6347;
}
&-red {
background: #ffd700;
}
&-green {
background: #9acd32;
}
}이런 경우에는 .box라는 부모요소를 각각의 클래스들이 가져가기 때문에 좀더 효율적으로 이용할 수 있다.
4. @at-root
위에서 말한것처럼 너무 많은 중첩을 하게 되면, 나중에 컴파일된 css파일에서 불필요한 선택자가 많이 생긴다.
그래서 그런 부분들을 위해 이용하는 것이 @ at-root이다.
여러가지 중첩들에서 한가지만 빼고 싶다면 @ at-root를 따로 달면, 컴파일될때 혼자만 빠진다.
🧐 근데 그러면 굳이 중첩에서 sass 안에 안넣으면 되는거 아닌가? 따로 작성하면 그대로 컴파일 될텐데...라는 의문이 들었는데, 선생님도 그에 대한 비슷한 문제를 얘기 하셨다.
이부분에 대해서는 좀더 찾아봐야겠다. stack overflow에 오류도 많이 올라오는데 꼭 사용해야 하는 케이스가 궁금하다.
변수
위에 말했던 css의 문제 수정사항이 있으면 일일이 고쳐야 한다는 점을 위해, 변수를 만들고, 나중에 고칠때 변수의 값만 고치면 되게 만들어 놓았다.
변수를 사용하는 기준은..
1. 값이 두번이상 반복되는 경우
2.보통 수정이 많이 들어오는 경우(배경색이나 폰트..)
1. 변수 생성하기
- $변수: 값
- $font-size :16px;
- $black : #111;
이런 식으로 폰트나 색깔은 미리 사용할 것들을 정해놓고 변수로 쓴다
그러면 나중에 전체적으로 수정을 해고, 변수만 고치면 되기 때문에 좀 더 수월하다.
2.변수 타입
css에 있더라도, 얘도 하나의 함수기 때문에 변수타입도 함수와 유사하다.
- number
- string(문자)
- color
- boolean: true, false(소문자인거 주의!!)
- null
- lists
- maps
💡리스트에 내장 함수들이 있지만, 보통 nth(list,n) 요 함수를 많이 사용한다고 한다.
nth([line1, line2, line3], -1)💡맵은 map-get을 많이 사용한다.
font-size : map-get($font-sizes, "h2")3. 변수의 scope(효용범위)
- 지역 변수
선언한 자기자신을 감싸고 있는 중괄호안에서만 사용 된다.그 안에 중첩된것들에도 사용할 수 있다. - 전역변수
우선 선언해 놓고 언제든지 사용한다. 가장 위에 선언한다. - !global 을 사용하면 지역변수도 전역변수로 사용할 수 있다
🧐 그럼 왜 굳이 밖으로 빼서 전역변수로 만들지 굳이 안에 넣어서 지역변수로 쓰는지도 의문이다.
오늘 sass를 배우면서 선생님이 어렵다 하셨다...
어렵다 했던 적이 없으셨는데... 어렵다 하셨다...
좀더 열심히 공부해야겠다. 다들 열심히 하는 분위기라 더 공부가 잘되는거 같다.
