FASTCAMPUS ST-TE 3기
PART6. SCSS
SASS(SCSS)
CSS를 간편하게 작성하기 위한 문법체계.
.container{
h1{
color:blue;
font-size: 14px;
}
}중첩기능이 사용되기에 같은 요소를 선택자로 사용할 때
코드의 가독성과 편리함을 높일 수 있다.
SASS에서 CSS와 호환상의 문제를 해결한 것이 SCSS이다.
기능은 거의 동일하나 문법에서 약간의 차이가 있어 SCSS를 주로 사용한다.
scss -컴파일-> html,css
때문에 css의 전처리기 라고도 부른다.
01. 주석의 두가지 방식
SCSS에서는 두가지 형식으로 주석처리를 한다.
/**/ CSS로 변환해도 코드 그대로 남어았다.
// CSS로 변환하면 아예 남지않는다.
.container{
h1{
/*color:blue;*/
//font-size: 14px;
}
}02. > (선택자 중첩 기능)
.container{
> ul{
li{
.age{
color: blue;
}
.name{
color: red;
}
}
}
}선택자의 앞부분에 >를 지정하면 해당 부분의 직계자식임을 명시해준다.
위의 코드는 .container>ul을 선택자로 잡은 것이 된다.
03. & (부모 선택자를 참조하기)
.btn{
position: absolute;
&.active{
color: red;
}
}& 자신이 포함되어져있는 영역의 바로 위인 부모 자체로 자신을 지칭한다.
css로 번역시, .btn.active를 선택자를 잡은 것이 된다.
.fs{
&-small{font-size:12p;}
&-medium{font-size:14px;}
&-large{font-size:16px;}
}👇css변환 결과
.fs-small{font-size:12p;}
.fs-medium{font-size:14px;}
.fs-large{font-size:16px;}04. 네임스페이스 (중첩된 속성)
이름을 통해 구분 가능한 범위를 만들어 내는 것.
일종의 유효범위를 지정하는 방법이다.
.box{
font: {
weight:bold;
size:10px;
family:sans-serif;
};
margin: {
top: 10px;
left: 20px;
};
padding: {
top:10px;
bottom: 40px;
};
}여기서 속성들을 묶은 font: , margin: , padding:은
각 속성에 공통되는 범위로 구분시킨다.
👇css변환 결과
.box{
font-weight: bold;
font-size: 10px;
font-family: sans-serif;
margin-top: 10px;
margin-left: 20px;
padding-top: 10px;
padding-bottom: 40px;
}05. $ (변수)
반복적으로 쓰이는 값을 변수화해서 사용할 수 있다.
$size라는 변수에 반복 사용되는 값을 담아 지정.
$size: 200px;
.container{
position: fixed;
top: $size;
.item{
width: $size;
height: $size;
transform: translate($size);
}
}👇css변환 결과
.container{
position: fixed;
top: 200px;
}
.container .item{
width: 200px;
height: 200px;
transform: translateX(200px);
}전역변수, 지역변수의 개념으로도 나누어 사용할 수 있다.
위의 예시처럼 전체에 지정하면 모든 영역에서 사용할 수 있는 전역변수가 되지만,
선택자{}를 지정한 뒤 그 안의 범위내에서 지정해줄 경우
해당 범위안에서만 유효한 지역변수의 개념이 된다.
여기서 주의할 점은!
값의 재할당이 가능하기에, 범위와 변수명을 잘 구분해서 사용해야한다.
06. 산술연산
산술연산자(+, -, *, /, %)를 사용해 속성 값의 연산이 가능하다.
단위가 다른 값의 경우에는 calc()를 사용해야한다.
div{
width: 20px + 20px;
height: 40px - 10px;
font-size: 10px * 2;
margin: 30px / 2;
padding: 20px % 7;
}👇css변환 결과
div{
width: 40px;
height: 30px;
font-size: 20px;
margin: 30px/2; //나누기 연산(/)은 제대로 변환되지않았다!
padding: 6px;
}여기서 우리가 주목할 점은, 나누기 연산자(/)가 제대로 산술되지않았다는 점이다.
왜그럴까?
css에는 속성값을 단축해서 사용하는 속성들이 존재한다.
이때 /로 구분하는데 이게 나눗셈 연산자와 혼동을 주어
우리가 원하는 산술의 개념으로 작동하지않은 것이다.그렇다면?
보통 세가지의 방식으로 표현해 나누기 산술을 행한다.
- () 괄호 안에서 나눗셈 연산을 실행
margin: ( 30px / 2 );
- $로 값을 변수화 하여 사용.
div{ $size: 30px; margin: $size / 2; padding: 6px; }
다른 산술 연산자를 활용
div{ margin: ( 10px + 20px ) / 2; padding: 6px; }이미 앞에 다른 산술 연산자가 쓰여 해당표현이 scss의 방식임을 인지시켰기에 가능하다.
07. Mixins (SCSS의 재활용)
변수와 비슷하지만, 좀 더 확장된 개념으로
다양한 스타일을 한번에 지정해준다.
선언할 때에는 @mixin으로,
값으로서 가져올 때에는 @include로 사용한다.
@mixin center{
display: flex;
justify-content: center;
align-items: center;
}
.container{
@include center;
.item{
@include center;
}
}
.box{
@include center;
}👇css변환 결과
.container{
width: 100px;
height: 100px;
background-color: tomato;
}
.container .item{
width: 100px;
height: 100px;
background-color: tomato;
}
.box{
width: 100px;
height: 100px;
background-color: tomato;
}💡 mixins 활용01. 매개변수-인수
@mixin box($size){ width: $size; height: $size; background-color: tomato; } .container{ @include box(200px); .item{ @include box(100px); } } .box{ @include box(100px); }이때 새로 투입하는 값을 받아들이는
$size를 매개변수,
새로 투입하는 값을 인수라고 한다.
💡 mixins 활용02. 매개변수에 기본값 설정하기
@mixin box($size: 80px){ width: $size; height: $size; background-color: tomato; } .container{ @include box; .item{ @include box; } } .box{ @include box; }만약 매개변수가 인수로 갖는 값이 없을 때,
($매개변수명: 기본값)의 형식으로 기본값을 지정한다.
기본값을 지정하면, 인수를 갖지않아도 오류 없이 기본값을 넣어 출력해준다.
💡 mixins 활용03. 다수의 매개변수 + 기본값 설정하기
@mixin box($size: 80px, $color:tomato){ width: $size; height: $size; background-color: $color; } .container{ @include box(200px, red); .item{ @include box; } } .box{ @include box; }이럴 경우,
.container만 color: red;를 갖고
다른 요소들은 기본값인 tomato를 color로 갖는다.
👇css변환 결과.container{ width: 200px; height: 200px; background-color: red; } .container .item{ width: 80px; height: 80px; height: tomato; } .box{ width: 80px; height: 80px; background-color: tomato; }
💡 mixins 활용04. 키워드인수
@mixin box($size: 80px, $color:tomato){ width: $size; height: $size; background-color: $color; } .container{ @include box(200px, red); .item{ @include box($color:green); //키워드인수 } } .box{ @include box; }매개변수가 다수 존재할 때 인수를 지정해주는 위치가 중요하다.
만약 위의 코드에서.item에$color에 대한 인수만을 추가하고 싶다고해서
그냥 바로 인수 값을 전달하면 순서에 맞지않아$size에 해당 값이 들어가고만다.
이를 방지하기 위해 인자에 매개변수명을 같이 기재해주는 것을
키워드 인수라고 한다.
👇css변환 결과.container{ width: 200px; height: 200px; background-color: red; } .container .item{ width: 80px; /* 만약 키워드 인수의 형식을 따르지않았다면 */ height: 80px; /* width, height의 값으로 green을 가졌을 것이다. */ height: green; } .box{ width: 80px; height: 80px; background-color: tomato; }
💡 mixins 활용05. @content
@mixin으로 스타일 블록을 지정해주었는데,
따로 또 추가하고싶은 내용이 있을 때 별도의 스타일 블록을 만들어 주는 것을 의미한다.@mixin left-top{ 스타일 속성들; @content } .box{ @include left-top{ left-top의 스타일 덩어리를 받으면서도 또 별도의 스타일 블록을 추가하는 용도이다. 여기에 작성한 스타일 블록은 @content으로 삽입된다. } }
08. @for 반복문
@for $i from [시작점] through [언제까지] {
실행 스타일;
}scss는 js와 달리 zero-numbering방식이 아니기에,
시작점은 1부터 사용된다.
@for $i form 1 through 10 {
.box:nth-child( #{$i} ){
width: 100px * $i;
}
}$i 에 1~10까지의 순번을 담아 반복시키기.
#{ 변수 } 보간법, 문자를 코드에 삽입할 때 사용된다.
09. 함수
@function 함수명(파라미터1, 파라미터2){
실행문;
}js의 함수와 동일한 기능을 수행한다.
뭉치로 계속 값을 참조할 수 있다는 점에서 mixin과 비슷한듯 보이나, 차이점이 있다.
@mixin은 하나의 코드 뭉치로서 재활용을 가능케하는 용도라면,
@function은 받아온 값으로 연산을 한다는 점에서 차이가 생긴다.
@mixin center{
display: flex;
justify-content: center;
align-items: center;
}
@function ratio($size, $ratio){
@return $size * $ratio ;
}
.box{
$width: 100px;
width: $width;
height: ratio($width, 1/2);
@include center;
}👇css변환 결과
.box{
width: 100px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}10. 색상 내장 함수
scss에서는 따로 색상 관련 메서드를 지원한다.
mix(무슨색과,무슨색을)
두가지의 색상을 ()안에 인자로 받아 서로 섞어준다.
ligthen(무슨색을, 얼마나) / #### darken(무슨색을, 얼마나)
ligthen는 첫번째 인수의 색상을 두번째 인수의 값만큼 밝게,
darken은 더 어둡게 만들어주는 내장함수이다.
saturate(무슨색을,얼마나) / desaturate(무슨색을,얼마나)
saturate 첫번째 인수의 색상을 두번째 인수의 값만큼 채도를 높여주고,
desaturate 채도를 낮여주는 내장함수이다.
grayscale(얼마나)
선택한 요소를 회색으로 만들어주는 내장함수.
rgba(무슨색을, 얼마나투명하게)
불투명도를 지정해주는 내장함수.
css에서 불투명도를 지정해주는 속성과 비슷하지만
인자의 개수가 다른 것에 유의하자!
11. @import 가져오기
@import "가져오려는 파일의 경로1", "가져오려는 파일의 경로2"확장자를 생략하는 것과, 한번에 여러개의 파일을 가져오는 것도 가능하다.
12. 리팩토링
'결과의 변경 없이 코드의 구조를 재조정함'
css로 만들어진 코드를 scss로 변경하거나
그 이외의 다른 상황에도 적용될 수 있는 단어.
예시)
1~32개의 반복되는 구조, 이미지의 경로도 마지막 순번만 제목이 다른경우.
@for $i from 1 through 32{
&"nth-child(#{$i}) .image{
$url:"공통된 부분까지의 경로"
background-image: url(" #{$url}/hero#{$i}.png ")
}
}13. 데이터의 종류
scss에도 js와 비슷한 데이터 종류를 갖는다.
$number 숫자데이터
$string 문자데이터
$color 색상값데이터
$boolean 논리데이터
$null null
$list 배열
$map 객체
14. @each
$list 배열, $map 객체에서 사용되는 반복문.
14.1 $list(배열)에서의 @each
@each $[변수명] in $list {}예시)
$list: orange, royalblue, yellow;
@each $c in $list{
.box{
color: $c;
}
}👇css변환 결과
.box{
color: orange;
}
.box{
color: royalblue;
}
.box{
color: yellow;
}$c라는 변수에 배열 형태로 $list의 속성값들을 받아 반복적으로 뿌려준다.
하지만, .box에 계속 list의 배열index값만 지속적으로 뿌려주고있다.
객체를 이용해 변수를 두개로 나누어 각각에 맞는 스타일을 지정해보자.
14.2 $map(객체)에서의 @each
@each $key, $value in $map {}예시)
$map: (
o : orange,
r : royalblue,
y : yellow
);
@each $c in $list{
.box-#{$key}{
color: $value;
}
}👇css변환 결과
.box-o{
color: orange;
}
.box-r{
color: royalblue;
}
.box-y{
color: yellow;
}객체라는 특성에 걸맞게 scss에서도 key, value값을 연결해 지정해줄 수 있다.
0개의 댓글
관련 채용 정보
