css는 가라~ sass 쓰고 광명찾자! 광명찾자!
sass의 필수 핵심기술만 소개합니다.
기본작성법
scss 를 잘 사용하기 전에 먼저 알아두어야 할 기본 속성 및 작성법에 대해 소개합니다!👏
1. 네스팅구조
기존 css와 달리 자식요소를 가로로 배치하지 않고
부모요소에 속하도록 작성이 가능합니다.
<style>
.wrap {
//...
.main {
//...
.section {
//...
.article {
//...
.title {
//...
}
}
}
}
}
</style>이를 중첩구조(네스팅)라고 하는데 개인적으로 최대 4~5개 까지 사용하기를 지향합니다.
너무 과하면 원래의 장점인 가독성을 잃어버리고 부모찾아 삼만리를 해야하니까요.
또 재사용성을 위해 따로 클래스를 생성하는것을 추천합니다!
2. 부모참조
& 를 사용하면 간단하게 부모 요소를 선택할 수 있습니다.
<style>
button {
color: red;
&:hover {
opacity: 0.5
}
&:disabled {
opacity: 0.3;
cursor: not-allowed;
}
& + button {
margin-top: 10px;
}
};
</style>3. 변수
문자, 숫자, 불린, 컬러값, null 등 다양한 값을 변수로 지정하여 쓸 수 있습니다.
자주쓰거나 직접 적기엔 복잡하여 오타 발생 소지가 다분한 것들을 변수로 지정해주면 간단하겠지요.
<style>
$width: 100px-20px;
$font: "Noto Sans KR";
$color: #f90r3d;
$darkMode: true;
$init: null;
</style>SASS 사용하기
1. sass에 내장된 색관련 함수
버튼에 마우스 올려놨을 때 색상을 원래 기본색상보다 조금 더 어둡게해서 클릭하는 느낌을 줄 때 사용하면 🐶🍯(개꿀)
- darken : 어둡게
- lighten : 밝게
- saturate : 더 선명하게 (높은채도)
- desaturate : 더 흐리게 (낮은채도)
- adjust-hue : 명도 변경
- rgba : alpha값 변경
2. extend 기능
버튼이나 인풋, 테이블 처럼 공통된 스타일로 묶을 수 있는 컴포넌트를 구현해야할 때 사용하면 아주 🐶🍯(개꿀)
어떤 기본틀(공통스타일)에서부터 확장된 스타일인지 한 눈에 보이니까 가독성 밑 유지보수에 아주 유용해보입니다.
extend 적용하기
<style>
.공통스타일을모아놓은클래스{
padding: 10px;
.
.
.
}
.확장클래스{
@extend .공통스타일을모아놓은클래스;
color: red;
}
</style>
3. 임시클래스
기본틀(공통스타일)을 아예 임시클래스로 만들어봅시다.
이는 extend문법을 위해 SASS에서만 임시로 클래스를 만들어주는것이고 css에는 적용안됩니다.
- css 사용할 때 :
class="btn cacle",class="btn submit" - sass 사용할 때 :
class="cacle",class="submit"
편-안 🧘
임시클래스 설정하기
<style>
%임시클래스이름 {
padding: 10px;
.
.
.
}
</style>임시클래스 적용하기
<style>
.클래스{
@extend %임시클래스이름;
background-color: darkblue;
}
</style>3. 믹스인 사용하기
믹스인을 사용하면 extend보다 더 유연한 css 작성이 가능합니다.
믹스인 설정하기
<style>
@mixin 믹스인이름($첫번째 변수명, $두번째 변수명, ...){
padding: 10px;
.
.
.
color: $첫번째 변수명;
background-color: $두번째 변수명;
}
</style>소괄호 속 $변수명 을 '인자'라고합니다.
속성은 동일하게 지정하지만 값만 다르게 주고싶을때는 이 '인자'를 적극 활용해봅시다.
믹스인 적용하기
<style>
@include 믹스인이름(첫번째 값, 두번째 값, ...);
</style>주의 할 점은 첫번째 인자가 첫번째 값에 할당한다는 점인데요.
즉 @include 믹스인이름(red, ... 라고 작성하면 첫번째 변수명을 할당했던 color에 적용이 되는것이지요.
주의할 점은 @include 믹스인이름(); 이렇게 인자가 전달되지 않을경우 오류가 난다는 것입니다.
이때는
<style>
@mixin 믹스인이름($첫번째 변수명 : black, $두번째 변수명 : black, ...){
padding: 10px;
.
.
.
color: $첫번째 변수명;
background-color: $두번째 변수명;
}
</style>이렇게 $첫번째 변수명 : black 작성해주세요.
인자가 전달되지 않았을 땐 black으로 색이 적용됩니다.
"나는 글자색은 내버려두고 배경색만 바꾸고싶어"
이럴때는
<style>
@include 믹스인이름($첫번째 변수명 : red);
</style>이렇게 변수명 : 값 을 지정해주면 됩니다!
4. 연산자(operator)
맨날 css 계산식 쓸 때 calc 랑 clac 헷갈리는거 인정?
sass는 헷갈리지 않게 도와줍니다. 다정한청년.
+, -, *, /
사칙연산 지원합니다.
근데 주의할 점이 있어요.
width:100px-20px/2 이렇게 쓰면 나누기는 잘 적용되지만,
width:100px/2 는 적용안됩니다. /가 css의 다른 기호와 겹치기 때문에 나누기라고 인식을 못합니다.
그렇기 때문에 나누기만 단독으로 사용할 시
width:(100px/2) 이렇게 소괄호로 감싸주세요.
5. @use
다른 파일에서 변수 등을 가져올 때 사용합니다.
가져올 땐 파일 이름을 @use로 선언하고, 사용할 땐 파일이름 하고 .을 붙혀 준 후 그 파일안에 있는 변수 등을 써주면 됩니다!
<style>
@use "_test";
.box {
color : _test.$변수
}
</style>그리고 "_test" 는 파일 이름인데요. _이렇게 언더바를 파일 이름 앞에 붙히면 css 파일이 생성되지 않습니다.
이걸 언제쓰냐고요?
그건 다음에(찡긋)
그밖에 반복문, 가정문(조건문), 변수: 배열, 오브젝트 등이 있습니다.
