SASS #총 요약

Seung min, Yoo·2021년 3월 24일
Sass
1
post-thumbnail

1. SCSS개요

CSS는 작업이 고도화 될 경우 불편함이 커진다.(원시적인 문법이기 때문)
그 예로 불필요한 선택자의 과용과 연산 기능의 한계, 구문의 부재 등 프로젝트의 크기가 커질수록 아쉬움도 같이 커진다.
하지만 웹에서는 표준 CSS만 동작할 수 있기 때문에 다른 선택권이 없다.
여기서 SCSS와 LESS에 대해서 들어 봤을 법 한데, 이 것들을 CSS perprocessor라고 부른다.
CSS가 동작하기 전에 사용하는 기능으로, 웹에서는 분명 CSS가 동작하지만 우리는 CSS의 불편함을 이런 확장 기능으로 상쇄할 수 있다.
앞으로 우리는 SASS를 배워보자.

2. SASS와 SCSS의 차이점은?

SASS(syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS구문과 완전히 호환되도록 새로운 구문을 도입해서 만든 SASS의 모든 기능을 지원하는 CSS의 상위집합이다.
즉, SCSS는 CSS와 거의 같은 문법으로 SASS 기능을 지원한다는 것이다.
쉽게보면 중괄호와 세미콜론이 있느냐 없느냐가 차이라고 봐도 될 것 같다.

3. 컴파일

웹에서는 CSS만 작동하기 때문에 SASS를 변환해야하며, 이를 컴파일이라고 부른다.

4. 문법 -주석-

  1. '//'로 주석처리를 한다면 컴파일이 되지 않는다.
  2. /**/로 주석처리하는 것은 컴파일이 된다.(원래 CSS에서 주석으로 사용하던것)
    💡SASS와 SCSS의 주석처리에는 차이점이 있다.
  3. SASS에서 주석처리는 '/*/'을 한 후에 줄을 맞춰서 각 줄에 가 붙어야 한다.
    하지만 SCSS에서는 각 줄에 *가 붙지 않아도 상관없다.

ex)

/*컴파일 되는
 *여러줄
 *주석
*/

//err
/*컴파일 되지 않는
*여러줄
   *주석*/
/*
컴파일되는
여러 줄 
주석
*/

첫번째가 SASS에 대한 예시이고 두번째가 SCSS주석이다.

5. 데이터의 종류

데이터설명예시
Number숫자1, .82, 20px, 2em 등등
String문자bold, relative, "/images/a.png","dotum"
Colors색상 표현red, blue, #FFFF00, rgba(255,0,0,.5)
Booleans논리true, false
Nulls아무것도 없음null
Lists공백이나 ','로 구분된 값의 목록(apple, orange, banana), apple orange
MapsLists와 유사하나 값이 Key:Value형태(apple: a, orange: o , banana: b)

💡특이사항
Sass에서 사용하는 데이터 종류들의 몇 가지 특이사항.

  • Numbers:숫자에 단위가 있거나 없다.
  • Strings:문자에 따옴표가 있거나 없다.
  • Nulls:속성값으로 null이 사용되면 컴파일하지 않는다.
  • Lists:()를 붙이거나 붙이지 않는다.
  • Maps:()를 꼭 붙여야 한다.

6. 문법 - 중첩-

.section{
	width:100%;
    .list{
    padding:20px
    	li{
 			float:left;   
    	}
    }
}

compile:

.section{
width:100%;
}
.section .ilst{
padding:20px;
} 
.section .list li{
float:left;
}

7. 문법 -중첩- 1. 상위선택자 참조

Ampersand(상위 선택자 참조)
중첩 안에서&(ampersand)키워드는 상위(부모) 선택자를 참조하여 치환한다.

ex)

.btn{
	position: absolute;
	&.active{
		color:red;
			}
}
.list{
	li{
	&.last-child{
		margin-right:0;
				}
	}
}

compile:

.btn{
	position:absolute;
}
.btn.active{		/*일치선택자*/
	color:red;		
}
.list li:last-child{
	margin-right:0;
}

즉, ampersand는 부모요소의 선택자를 참조하여 치환한다는 것이다.

8. 문법-중첩- 2. 중심벗어나기

@(at)-root(중첩벗어나기)
중첩에서 벗어나고 싶을 때 @at-root키워드를 사용한다.
중첩 안에서 생성하되 중첩 밖에서 사용해야 하는 경우에 유용하다.

.list{
	$w:100px;
    $h:50px;
    li{
    width:%w;
    height:$h;
    }
    @at-root{
    width:$w;
    height:$h;
    }
}

Compile

.ilst li{
width:100px;
height:50px;
}
.box{
width:100px;
height:50px;
}

아래 예제처럼 .list 안에 있는 특정 변수를 범위 밖에서 사용할 수 없기 때문에, 위 예제 처럼@at-root키워드를 사용해야 한다.

한마디로, 내가 $w나 $h로 정의한 것을 사용하고 싶다면 .list안에서 정의했기에 .list안에 들어가 있어야 하기 때문에 밖에 쓰면 compile되지 않고 밖에서 사용할 수 없다.

9. 문법-중첩- 3.중첩된 속성 정의

중첩된 속성

font-, margin- 등과 같이 동일한 네임 스페이스를 가지는 속성들을 다음과 같이 사용할 수 있다.

.box{
	font:{
    weight:bold;
    size:10px;
    family:sans-serif;
    };
    margin:{
    top:10px;
    left:20px;
    };
    padding{
    bottom:40px;
    right:30px;
    };
}

compile

.box{
	fontweight:bold;
    font-size:10px;
    font-family:sans-serif;
    margin-top:10px;
    margin-left:20px;
    padding-bottom:40px;
    padding-right:30px;
}

10. 변수

반복적으로 사용되는 값을 변수로 지정할 수 있다.
변수 이름 앞에는 항상 $가 붙인다.

💡사용법
$변수이름:속성값;

$color-primary:#e96900;
#url-images:"~~~"
$w:200px;

.box{
	width:$w;
    margin-left:$w;
    background:$color-primary url($url-images + "bg.jpg");
}

compile to:

.box{
	width:200px;
	margin-left:200px;
	background:#e96900 url("~~~");
}

11.변수 -유효범위, 재할당-

1. 변수유효범위

변수는 사용 가능한 유효범위가 있다.
선언된 브록({})내에서만 유효범위를 가진다.

.box1{
	$color:#111;
    background:$color;
}
//Err
.box2{
	background:$color;
}

위에서 $color는 .box1의 블록 안에서 설정되었기 때문에, 블록 밖의 .box2에서는 사용할 수 없다.

2.변수 재 할당

다음과 같이 변수에 변수를 할당할 수 있다.

$red:#FF0000;
$blue:#0000FF;

$color-primary:$blue;
$color-danger:$red;

.box{
	color:$color-primary;
    background:$color-danger;
}

compile

.box{
color:#0000FF;
background:#FF0000;
}

위에서 살펴보면 red와 blue에 할당을 한 다음에 color-primary, color-danger에 각각 다시 할당한 것이다.

12.변수 -전역설정-

!global(전역설정)

!global플래그를 사용하면 변수의 유효범위를 전역(Global)으로 설정할 수 있다.

.box1{
	$color:#111 !global;
    background:$color;
}
.box2{
	background: $color;
}

compile

.box1{
	background:#111;
}
.box2{
	background:#111;
}

!global;이라는 플래그가 유효범위를 전역으로 설정하기 때문에 {}로 구분되지 않고 전역속성으로 쓸 수 있는 것이다.

💡추가적으로

$color:#000;
.box1{
$color: #111 !global;
background:$color;
}
.box2{
background:$color;
}
.box3{
$color: #222;
background: $color;
}

compile

.box1{
	background:#111;
}
.box2{
	background:#111;
}
.box3{
	background:#222;
}
  1. scss(첫 번째)에서 보면 color:#000;이지만 !global속성으로 #111로 설정했기 때문에 전체에서 설정한 $color:#000;에 덮어쓰기가 된 것이다.
  2. .box3에서 보자면 {}에서 color:#222로 재정의 했기 때문에 color:#222가 된다.
    가까운 곳에서 설정한 것으로 설정된다.

13. 변수-초깃값 설정, 문자 보간-

1.!default(초깃값 설정)

!default 플래그는 할당되지 않은 변수의 초깃값을 설정한다.
즉, 할당되어있는 변수가 있다면 변수가 기존 할당값을 사용한다.

$color-primary:red;
.box{
	$color-primary:blue !default;
    background: $color-primary;
}

compile

.box{
	background:red;
}

2.#{}문자보간
#{}를 이용해서 코드의 어디든지 변수 값을 넣을 수 있다.

$family:unquoto("Droid+Sans");
@import url("~~~={$family}")

compile

@import url("~~~=Droid+Sans")

Sass에서 unquoto() 는 문자에서 따옴표를 제거한다.

14. 문법 -가져오기-

1.가져오기

@import로 외부에서 가져온 Sass파일은 모두 단일 CSS출력 파일로 병합된다.
또한, 가져온 파일에 정의된 모든 변수 또는 Mixins등을 주 파일에서 사용할 수 있다.

Sass @import는 기본적으로 Sass파일을 가져오는데, CSS@import규칙으로 컴파일되는 몇 가지 상황이 있다.

  • 파일 확장자가 .css일때
  • 파일 이름이 https://로 시작하는 경우
  • url()이 붙었을 경우
  • 미디어쿼리가 있는 경우
    위와 같은 경우 CSS @import규칙대로 컴파일 된다.

15. 문법 -가져오기- 여러파일 가져오기,파일 분할

1. 여러파일 가져오기

하나의 @import로 여러 파일을 가져올 수 있다.
파일 이름은 ,로 구분한다.

💡사용법

@import"header","footer";

2. 파일분할

프로젝트의 규모가 커지면 파일을 쪼개는 개념이 많아진다.
나중에 유지보수를 위해서 쪼개는 경우가 많기 때문이다.
다 나눠져서 생성되기 때문에 sass에서는 partial기능이 지원되고 _를 붙여 (_header.scss와 같이)@import로 가져오면 컴파일 시 ~.css파일로 컴파일 하지 않는다.

16. 문법-연산-

Sass는 기본적인 연산 기능을 지원한다.
레이아웃 작업 시 상황에 맞게 크기를 계산을 하거나 정해진 값을 나눠서 작성할 경우 유용하다.
다음은 Sass에서 사용 가능한 연산자의 종류이다.

1. 산술연산자

종류설명주의사항
+더하기
-빼기
*곱하기하나 이상의 값이 반드시 숫자(Number)
/나누기오른쪽 값이 반드시 숫자(Number)
%나머지
  1. *곱하기의 경우 10px*10px=Err가 된다.
  2. /또한 10px/10px=Err가 된다. 10px/2같이 되어야 한다.

2. 비교연산자

종류설명
==동등
!=부등
<대소/보다작은
>대소/보다 큰
<=대소 및 동등/보다 작거나 같은
>=대소 및 동등/보다 크거나 같은

3. 논리(불린,boolean)연산자

종류설명
and그리고
or또는
not부정

17. 문법-연산- 1.숫자

1. 상대적 단위 연산자

일반적으론 절댓값을 나타내는 px단위로 연산을 하지만, 상대적 단위(%``em``vm)의 연산일 경우 CSS calc()로 연산해야 한다.

width: 50%-20%; //err 단위 모순
width: calc(50%-20%); //연산 가능

2. 나누기 연산의 주의사항

CSS는 속성 값의 숫자를 분리하는 방법으로 /를 허용하기 때문에 /가 나누기 연산으로 사용되지 않을 수 있다.
아래의 예제를 보면 나누기 연산자만 연산되지 않고 그대로 컴파일 된다.

div{
	width:20px + 20px // 더하기  
    height:40px - 10px // 빼기
    font-size:10px * 2 // 곱하기
    margin:30px / 2 // 나누기
}

compile

div{
	width:40px; /*ok*/
    height:30px; /*ok*/
    font-size:20px; /*ok*/
    margin:30px / 2 /*??*/
}

따라서 /를 나누기 연산 기능으로 사용하려면 다음과 같은 조건을 충족해야 한다.

  • 값 또는 그 일부가 변수에 저장되거나 함수에 의해 반환되는 경우
  • 값이 ()로 묶여있는 경우
  • 값이 다른 산술 표현식의 일부로 사용되는 경우(밑에 더하기 연산과 같이 사용과 같이 다른 연산자와 같이 사용하는 경우다.)

ex)

div{
	$x:100px;
    width: $x / 2; 	// 변수에 저장된 값을 나누기
    height:(100px / 2); //괄호로 묶어서 나누기
    font-size: 10px + 10px / 3; //더하기 연산과 같이 사용
}

18. 문법 -연산- 2.문자

문자 연산에는 +가 사용된다.
문자 연산의 결과는 첫 번째 피연산자를 기준으로 함.
첫 번째 피연산자에 따옴표가 붙어 있으면 연산결과를 따옴표로 묶는다.
반대로 첫 번째 피연산자에 따옴표가 붙어 있지 않다면 연산 결과도 따옴표를 처리하지 않는다.

div::after{
content:"hello" + world
flex-flow:row: + "-reverse" + " " + wrap
}

compile

div::after{
	content:"Hellow World";
    flex-flow:row-reverse wrap;
}

19. 문법 -연산- 3. 색상

색상도 연산할 수 있다.

div{
	color:#123456 + #345678;
    // R:12 + 34 = 46
	// G:34 + 56 = 8a
    // B:56 + 78 = ce
	baackground: rgba(50, 100, 150, .5) + rgba(10, 20, 30, .5);
    //R:50 + 10 = 60
    //G:100 + 20 = 120
    //B:150 + 30 = 180
    //A:Alpha channels must be equal
}

compile

div{
	color:#468ace;
	background:rgba(60, 120, 180, 0.5);
}
  1. 기본적으로 #은 16진수로 이루어져있다.
    1~9, a~f까지 해서 총 16가지를 가지고 있다.
    위에 '34+56'의 경우 '3+5=8'이고 '4+6=10'이다. 여기서 16진수에서 10은 a라고 보면 된다.
  2. rgba를 연산할 때는 알파부분의 값이 동일해야 한다. 그래서 위의 예제를 보면 '.5'로 맞춰져 있는 것이다.

💡그렇다면 만약 알파값을 연산하고 싶다면?
1. opacify(), transparentize()라는 sass함수를 이용한다.

$color: rgba(10, 20, 30, .5);
div{
	color:opacify($color, .3); // 30% 더 불투명하게 / 0.5 + 0.3
    background-color: tansparentize($color, .2); // 20%	더 투명하게 0.5-0.2
}

compile

div{
	color:rgba(10, 20, 30, 0.8);
    background-color: rgba(10, 20, 30, 0.3);
}

20. 문법 -연산- 4.논리

Sass의 @if조건문에서 사용되는 논리(boolean)연산에는 '그리고','또는','부정'이 있다.
자바스크립트 문법에 익숙하다면 &&,||,!와 같은 기능으로 생각하면 된다.

and그리고
or또는
not부정(반대)

간단하게 예제를 보고 후에 더 자세히 조건문을 보자.

예시1)

$width:90px;
div{
	@if($width > 100px){
    height:300px;
    }
}

결과

div{
	
}

위와 같이 빈상태로 있게 된다. 조건에 의해서.

예시2)

$width:120px;
div{
	@if($width > 50px and $width > 100px){
    	width:400px;
    }
}

결과

div{
	width:400px;
}

예시3)

$width:120px;
div{@if($width > 50px or $width > 120px){
    	width:400px;
    }
}

결과

div{
	width:400px;
}

or의 경우 두 가지의 조건 중 하나라도 만족하면 된다.

예시4)

$width:120px;
div{@if not($width < 50px ){
    	width:400px;
    }
}

결과

div{
	width:400px;
}

쉽게 생각해서 not이 붙으면 그 반대라고 생각해도 될 것 같다.

21. 문법-재활용- mixin, include 1

1. 재활용(Mixins)

Sass Mixins는 스타일 시트 전체에서 재사용 할 CSS선언 그룹을 정의하는 아주 좋은 기능이다.
약간의 Mixin(믹스인)으로 다양한 스타일읆 만들어낼 수 있다.

우선,Mixin은 두 가지만 기억하면 된다.
선언하기 @mixin와 포함하기@include이다.
만들어서, 사용하는 개념이다.

@mixin

기본적인 mixin선언은 아주 간단하다.
@mixin지시어를 이용하여 스타일을 정의한다.

💡사용법
@mixin 믹스인이름 (){
스타일;
}

예시1)

@mixin size($w, $h){
	width:$w;
    height:$h;
}
.box1{
	@include size(100px, 100px);
}
.box2{
	@include size(100px, 100px);
}
.box3{
	@include size(100px, 100px);
}

compile

.box1{
	width:100px;
    height:100px;
}
.box2{
	width:100px;
    height:100px;
}
.box3{
	width:100px;
    height:100px;
}

밖에서 들어오는 값이 있으면 들어오는 값만큼 산출값이 나온다.

예시2)

@mixin size($w: 100px, $h:100px){
	width:$w;
    height:$h;
}
.box1{
	@include size;
}
.box2{
	@include size;
}
.box3{
	@include size;
}

compile

.box1{
	width:100px;
    height:100px;
}
.box2{
	width:100px;
    height:100px;
}
.box3{
	width:100px;
    height:100px;
}

만약 바깥에서 들어오는 값이 없을경우 위와 같이 $w와 $h의 기본값을 설정해주면 기본값이 적용되는 것을 볼 수 있다.

💡추가
1. 만약에 box2에 width값을 200 height300 으로 하고 싶다면,
@include size(200px, 300px);로 설정하면 된다. 200들어간 자리가 설정한 것 처럼 width의 값이고, 두번째 자리가 height값이 되는 것이다.
2. 그렇다면 첫번째에는 기본값인 100px이 들어가고 두번째 값이 height값만 바꾸고 싶다면,
@inclue size($h:300px); 로 설정하면 height값만 300이 들어간다.

22. 문법 -재활용- mixin,include 2

기본적인 Mixin선언은 아주 간단하다.
@mixin지시어를 이용하여 스타일을 정의한다.

// scss
@mixin 믹스인이름{
	스타일;
}
// sass
=믹스인이름
 스타일

예시)

//scss
@mixin large-text{
	font-size: 22px;
    font-weight:bold;
    font-family: sans-serif;
    color:orange;
}

//sass
=large-text
	font-size: 22px
    font-weight:bold
    font-family:sans-serif
    color:orange

mixin은 선택자를 포함 가능하고 사위(부모)요소 참조(&같은)도 할 수 있다.

예시)

@mixin large-text{
	font: {
    	size:22px;
        weight:bold;
        family:sans-serif
    }
    color: orange;
    
    &::after{
    	content:"!!";
    }
    span.icon{
    	background: url("/images/icon.png");
    }
}

.box1{
	@include large-text;
}
.box2{
	@include large-text;
}

compile

.box1{
	font-size:22px;
    font-weight:bold;
    font-family:sans-serif;
    color:orange;
}
.box1::after{
	content:"!!";
}
.box1 span.icon{
	background: url("/images/icon.png");
}
.box2{
	font-size:22px;
    font-weight:bold;
    font-family:sans-serif;
    color:orange;
}
.box2::after{
	content:"!!";
}
.box2 span.icon{
	background: url("/images/icon.png");
}

2. include

선언된 Mixin을 사용(포함)하기 위해서는 @include가 필요하다.
위에서 선언한 Mixin을 사용해보자.

//scss
@include 믹스인 이름;

/sass
+믹스인이름
// scss
h1{
	@include large-text;
}
div{
	@include large-text;
}

//sass
h1
	+large-text
div
	+large-text

위와 같이 선언하면 된다.

22. 문법 -재활용- 인수

1. 인수(Argument)

Mixin은 함수처럼 인수를 가질 수 있다.
하나의 Mixin으로 다양한 결과를 만들 수 있다.

예제)

//scss
@mixin 믹스인이름($매개변수){
	스타일;
}


//sass
=믹스인이름($매개변수)
	스타일
    
    
+믹스인이름(인수)

예제)

@mixin dash-line($width, $color){
	border:$width dashed $color;
}
.box1{
	@include dash-line(1px, red);
}
.box2{
	@include dash-line(4px, blue);
}

compile

.box1{
	border: 1px dashed red;
}
.box2{
	border: 4px dashed blue;
}

23. 문법 -인수- 기본값 설정

1. 인수의 기본값 설정

인수는 기본값을 가질 수 있다.
@include포함 단계에서 별도의 인수가 전달되지 않으면 기본값이 사용된다.

💡사용법
@mixin 믹스인이름($매개변수: 기본값){
스타일;
}

예시)

@mixin dash-line($width:1px, $color:black){
	border: $width dashed $color;
}
.box1{ @include dash-line;}
.box2{ @include dash-line(4px);}

compile

.box1{
	border:1px dashed black;
}
.box2{
	border:4px dashed black;
}
  1. $width:1px을 통해서 기본값을 설정해 놓은 것이다.

  2. CSS결과를 보면 .box2가 4px이 되는 이유는 SCSS에서 보면, dash-line(4px);로 했기 때문에 첫번째에 있는 $width값에 들어가게 된 것이다.

24. 문법 -인수- 키워드 인수

💡사용법
@mixin 믹스인이름($매개변수A: 기본값, $매개변수B: 기본값){
스타일;
}

@include 믹스인이름($매개변수B:인수);

예시)

@mixin dash-line($width:1px, $color:black){
	border: $width dashed $color;
}
.box1{ @include dash-line;}
.box2{ @include dash-line(blue);}

compile

.box1{
	border:1px dashed black;
}
.box2{
	border:blue dashed black;
}

위의 결과를 보면, dash-line(blue)라고 된 것 때문에 CSS에 border: blue dashed black이라는 결과로 나온 것을 볼 수 있다. 이처럼 만약 블랙대신에 블루를 넣고 싶은 것이라면 '$매개변수:인수'라고 설정해주면 된다.

25. 문법 -인수- 가변 인수

때때로 입력할 인수의 개수가 불확실한 경우가 있다.
그럴 경우 가변 인수를 사용할 수 있다.
가변인수는 매개변수 뒤에 ...을 붙여준다.

1.mixin안에 가변인수가 있는 경우

💡사용법
@mixin 믹스인이름($매개변수...){
스타일;
}
@include 믹스인이름(인수A, 인수B, 인수C);

예제)

//인수를 순서대로 하나씩 전달 받다가, 3번째 매개변수($bg-values)는 인수의 개수에 상관없이 받음
@mixin bg($width, $height, $bg-values...){
	width: $width;
    height: $height;
    background: $bg-values;
}
div{
	//위의 mixin(bg)설정에 맞게 인수를 순서대로 전달하다가 3번째 이후부터는 개수에 상관없이 전달
    @include bg(
    	100px,
        200px,
        url("/image/a.png") no-repeat 10px 20px,
        url("/image/b.png") no-repeat,
        url("/image/c.png")
    );
}

copile

div{
	width:100px;
    height:200px;
    background: url("/image/a.png") no-repeat 10px 20px,
        url("/image/b.png") no-repeat,
        url("/image/c.png");
}

예시1)

@mixin var ($w, $h, $bg...) {
	width:$w;
    height:$h;
    background:$bg;
}
.box{
	@include var(1, 2, 3, 4, 5, 6, 7);
}
.box{
	width:1;
    height:2;
    background:3, 4, 5, 6, 7;
}

여기서 보면 'bg...'임으로 원래 bg가 받아야 할 '3' 이후에도 '4, 5, 6, 7'을 받아서 가는 것이다.

예시2)

@mixin var ($w, $h, $bg...){
	width: $w;
    height:$h;
    background:$bg;
}
.box{
	@include var(
    	100px,
        200px,
        url("image/a.png") no-repeat 10px 20px,
        url("image/b.png") no-repeat,
        url("image/c.png")
    );
}

compile

.box{
	width:100px;
    height:200px;
    background: url("image/a.png") no-repeat 10px 20px, url("image/b.png") no-repeat, url("image/c.png");
}

2. 가변인수를 전달할 값으로 하는 경우

@mixin font(
	$style: normal;
    $weight:normal;
    $size: 16px;
    $family: sans-serif;
){
	font:{
    	style:$style;
        weight:$weight;
        size:$size;
        family:$family;
    }
}
div{
	//매개변수 순서와 개수에 맞게 전달
    $font-values: italic, bold, 16px, sans-serif;
    @include font($font-values...);
}
span{
	//필요한 값만 키워드 인수로 변수에 담아 전달
    $font-values:(style:italic, size:22px);
    @include font($font-values...);
}
a{
	//필요한 값만 키워드 인수로 전달
    @include font((weight:900, family:monospace)...);
}

compile

div{
	font-style:italic;
    font-weight:bold;
    font-size:16px;
    font-family:sans-serif;
}

span{
	font-style:italic;
    font-weight:normal;
    font-size:22px;
    font-family:sans-serif;
}
a{
	font-style:normal;
    font-weight:900;
    font-size:16px;
    font-family:monospace;
}

26. 문법 -재활용- content

선언된 Mixin에 @content이 포함되어 있다면 해당 부분에 스타일 블록을 전달할 수 있다.
이 방식을 사용하여 기존 Mixin이 가지고 있는 기능에 선택자나 속성 등을 추가할 수 있다.

💡사용법
@mixin 믹스인이름() {
스타일;
@content;
}
@include 믹스인이름() {
//스타일 블록
스타일;
}

예시)

@mixin icon($url){
	&::after{
    	content:$url;
        @content;
    }
}
.box1{
	@include icon("image/icon1.png");
}
.box2{
	@include icon("image/icon2.png"){
    	display:block;
        position:absolute;
        width:100px;
        height:100px;
    };
}

compile

.box1::after{
	content:"image/icon1.png";
}
.box2::after{
	content:"image/icon2.png";
    display:block;
    position:block;
    width:100px;
    height:100px;
}

27. 문법 -확장- Extend

특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우가 종종 있다.
이럴 경우 선택자의 확장 기능을 선택할 수 있다.

💡사용법
@extend 선택자;

예시)

.btn{
	padding:10px;
    margin:10px;
    background:blue;
}
.btn-danger{
	@extend .btn{
    	background:red;
    }
}

compile

.btn, .btn-danger{
	padding:10px;
    margin:10px;
    background:blue;
}
.btn-danger{
	background:red;
}

여기서 보면 .btn-danger클래스에 속성이 안들어간 것처럼 보이지만, 자세히 보면 .btn, .btn-danger로 클래스가 바뀌어있는 것을 볼 수 있다.

28. 문법 -확장- 추천하지 않는 이유

위에 27번 extend의 결과에 의해서 ,로 구분되는 다중선택자가 된 것을 알 수 있다.
사실 @extend는 다음과 같은 문제를 고려해야 한다.

  • 내 현재 선택자(위 예제의 경우 .btn-danger)가 어디에 첨부될 것인가?
  • 원치 않는 부작용을 초래할 수 있는가?
  • 이 한 번의 확장으로 얼마나 큰 CSS가 생성되는가?

    즉 위에서 보면, 클래스가 다중클래스선택자로 선택됨으로, 사용하는데에 있어서 우리가 원하지 않는 결과를 가져올 수 있기 때문에 Mixin으로 대체것이 나을 수 있다.
    Sass Guide Extend에서 더 자세히 보실 수 있습니다!

29. 문법 -함수-

자신의 함수를 정의하여 사용할 수 있다.
함수가 Mixins은 거의 유사하지만 반환되는 내용이 다르다.
Mixin은 위에서 살펴본 대로 지정한 스타일(Style)을 반환하는 반면,
함수는 보통 연산돤(computed)특정 값을 @return지시어를 통해서 반환한다.

💡사용법과 mixin과의 차이

//mixin
@mixin 믹스인이름($매개변수) {
	스타일;
}

//Functions
@function 함수이름($매개변수){
	@return 값
}

사용하는 방법에도 차이가 있다.
Mixin은 @include지시어를 사용하는 반면,
함수는 함수이름으로 바로 사용한다.

//Mixin
@include 믹스인이름(인수);

//Function
함수이름(인수)

30. 문법 -함수- 예제

예시)

@function columns($number, $columns, $width) {
	@return $width * ($number/$columns);
}

.container{
	$width:1200px;
	.item:nth-child(1) {
    	width:columns(1, 12, $width);
    }
    .item:nth-child(2) {
    	width:columns(8, 12, $width);
    }
    .iten:nth-child(3) {
    	width: columns(3, 12, $width);
    }
}

compile

.container{
	width:1200px;
}

.container .item:nth-child(1){
	width: 100px;
}

.container .item: nth-child(2){
	width:800px;
}

.container .item: nth-child(3){
	width:300px;
}

31. 문법 -함수- 함수이름 중복

예를 들어서, 색의 빨강 성분을 가져오는 내장함수로 이미 red()가 있다.
같은 이름을 사용하여 함수를 정의하면 이름이 충돌하기 때문에 별도의 접두어를 붙여 extract-red()같은 이름을 만들 수 있다.

💡사용의 예

//내가 정의한 함수
@function extract-red($color) {
	//내장함수
    @return rgb(red($color), 0, 0);
}

div{
	color: extract-red(#D55A93);
}

32. 문법 -함수- IF함수

조건과 반복

1. if(함수)
조건의 값(true, false)에 따라 두 개의 표현식 중 하나만 반환된다.
조건부 삼항 연산자(conditional ternary operator)와 비슷하다.

삼항 연사자란 조건을 걸고 물음표를 찍고 조건문이 맞을 경우와 틀렸을 경우에 따라 앞이나 뒤의 것을 실행시키는 것이다.(조건?조건1:조건2)

💡사용법
조건의 값이 true이면 표현식1을,
조건의 값이 false이면 표현식2를 실행합니다.

if(조건, 표현식1, 표현식2)

예시)

$width: 555px;
div{
	width:if($width > 300px, $width, null);
}

compile

div{
	width:555px;
}

💡null

null이 값으로 들어갈때는 그 속성을 사용하지 않겠다는 것이다.

33. 문법 -조건문- IF

@if(지시어)

@if지시어는 조건에 따른 분기 처리가 가능하며, if문(if statements)과 유사하다.
같이 사용할 수 있는 지시어는 @else, if가 있다.
추가 지시어를 사용하면 좀 더 복잡한 조건문을 작성할 수 있다.

💡사용법
1.

//@if
@if (조건) {
	/*조건이 참일 때 구문*/
}

//@if @else
@if(조건) {
	/*조건이 참일 때 구문*/
} @else{
	/*조건이 거짓일 때 구문*/
}

//@if @else if
@if (조건1) {
	/*조건1이 참일 때 구문*/
} @else if(조건2){
	/*조건2가 참일 때 구문*/
} @else{
	/*모두 거짓일 때 구문*/
}

2.조건에 ()는 생략이 가능하기 때문에.()없이 작성하는 방법이 좀 더 편리할 수 있다.

$bg: true
div{
	@if $bg{
    	background: url("/image/a.jpg")
    }
}
$color: orange;
div{
	@if $color == strawberry {
    	color:#FE2E2E;
    } @else if $color == orange{
    	color:FE9A2E;
    } @else if $color == banana{
    	color:#FFFF00;
    } @else{
    	color: #2A1B0A;
    }
}

compile

div{
	color:#FE9A2E;
}

34. 문법 -조건문- IF 예제

예제1

@function limitSize($size) {
	@if($size >= 0 and $size <= 200px){
    	@return 200px;
    } @else{
    	@returen 800px;
    }
}

div{
	width: limitSize(180px);
	height:limitSize(340px);
}

compile

div{
	width:200px;
    height:800px;
}

예제2

@mixin positionCenter($w, $h, $p:absolute) {
	@if(
    $p == absolute 
    or $p == fixed 
    or not $p == relative 
    or not $p=stactic
    ){
    width:if(unitless($w), #{$w}px, $w);
    height:if(unitless($h),#{$h}px, $h);
    position:$p;
    top:0;   //여기서처럼 top,bottom,left, right, margin을 설정하면 가운데 정렬가능
    left:0;
    right:0;
    bottom:0;
    marig:auto;
    }

}
.box1{
	@include positionCenter(10px, 20px);
}
.box2{
	@include positionCenter(50, 50, fixed); //여기에 단위를 안써서 넣었기 때문에 단위가 	아닌 순수한 '50'이 들어가기 때문에 위에서 보듯이 if(unitless(),#{},$)이렇게 들어간 것이다.
}
.box3{
	@include positionCenter(100, 200, relative);
}

compile

.box1{
	width:10px;
    height:20px;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}
.box2{
	width:50px;
    height:50px;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}
.box3{
	// relative가 있기 때문에 실행되지 않는다.
}

35. 문법 -반복문- For

for

@for는 스타일을 반복적으로 출력한다.
for문과 유사하다.

@for는 through를 사용하는 형식과 to를 사용하는 형식으로 나뉜다.
두 형식은 종료 조건이 해석되는 방식이 다르다.

💡사용법

// through
// 종료만큼 반복
@for $변수 from 시작 through 종료{
	//반복내용
}
// to
// 종료 직전까지 반복
@for $변수 from 시작 to 종료{
	//반복내용
}

위의 두 가지에 대한 차이점을 이해하기 위해서 다음 예제를 살펴보자.
변수는 관례상 $i를 사용한다.

// 1번부터 3번 반복
@for $i form 1 through 3 {
	.through: nth-child(#{$i}) {
    		width:20px * $i
    } 
}
//	1번부터 3 직전까지만 반복(2번 반복)
@for $i form 1 to 3 {
	.to:nth-child(#{$i}) {
    	width:20px * $i
    }
}

compile

/* 1번부터 3번 반복*/
.through:nth-child(1){
	width:20px;
}
.through:nth-child(2){
	width:40px;
}
.through:nth-child(3){
	width:60px;
}

/* 1번부터 3까지 반복*/
.to:nth-child(1){
	width:20px;
}
.to:nth-child(2){
	width:40px;
}

이제 through 와 to 에 따른 차이를 위의 예제문을 통해서 알 수 있다.

36. 문법 -반복문- each

@each

@each는 List와 Map 데이터를 반복할 때 사용한다.
for in 문과 비슷하다.

💡사용법

@each $변수 in 데이터 {
	//반복 내용
}

1)List데이터를 반복해보자.

// List Data
$fruits: (apple, orange, banana, mango);

.fruit{
	@each $fruit in $fruits {
    	li.#{$fruits} {
        	background: url("/images/#{$fruit}.png");
        }
    }
}

compile

.fruit li.apple{
	background: url("/images/apple.png");
}
.fruit li.orange{
	background: url("/images/orange.png");
}
.fruit li.banana{
	background: url("/images/banana.png");
}
.fruit li.mango{
	background: url("/images/mango.png");
}

37. 문법 -반복문- each- list반복

$fruits:apple,orange,banana,mango;

.fruits{
	@each $fruit in $fruits{
    	$index: index($fruits, $fruit);
    	li:nth-child(#{$index}){
        	left: 50px * $index;
        	background: url("/images/#{$fruit}.png")
        }
    }
}

compile

.fruit li:nth-child(1) {
	left:50px;
    background: url("/images/apple.png")
}
.fruit li:nth-child(2) {
	left:100px;
    background: url("/images/orange.png")
}
.fruit li:nth-child(3){
	left:150px;
    background: url("/images/banana.png")
}
.fruit li:nth-child(4) {
	left:200px;
    background: url("/images/mango.png")
}

38. 문법 -반복문- each- map반복

$fruits-data: (
	apple:korea,
    orange:china,
    banana:japan
);

@each $fruit, $country in $fruits-data {
	// map-keys($fruits-data)=> (apple, orange, banana) 
    // map-values($fruits-data)=> (korea, china, japan)
    $fruits-data--ket-list: map-keys($fruits-data);
    $index: index($fruits-data--key-list, $fruit);
    .box-#{$fruit} {
    	width:$index;
        background: url("/images/#{$country},png");
    }
}

compile

.box-apple{
	width:1;
    background: url("/images/korea.png");
}
.box-orange{
	width:2;
    background: url("/images/china.png");
}
.box-banana{
	width:3;
    background: url("/images/japan.png");
}

💡map 데이터는 index를 처리할 수 없다. 그러므로 map데이터를 숫자를 뽑아내기 위해서는 list데이터로 변환해야한다. 내장함수는 map-keys(), map-values()함수가 존재한다.

39. 문법 -반복문- while

@while

@while은 조건이 false로 평가될 때까지 내용을 반복한다.
while 문과 유사하게 잘못된 조건으로 인해 컴파일 중 무한 루프에 빠질 수 있다.

💡사용법

@while 조건{
	//반복내용
}

예시)

$i: 6;

@while $i > 0 {
	.item-#{$i} {
    	width:2px*$i;
    }
    $i: $i -2;
}

compile

.item-6{
	width:12px;
}
.item-4{
	width:8px;
}
.item-2{
	width:6px;
}

40. 문법 -내장함수-

Sass에서 기본적으로 제공하는 함수이다.
여기서 모든 것을 정리할 수 없기에 Sass Built-in Functions모든 내장 함수를 확인할 수 있다.

  • []는 선택 가능한 인수(Argument)이다. (즉, 선택적으로 넣어도 되고 안넣어도 된다.)
  • Zero-based numbering을 사용하지 않는다.(zero-based numbering이란 0부터 세지 않는 것을 말한다.)

1. 색상(RGB/HSL/Opacity)함수

  • mix($color1, $color2) : 두 개의 색을 섞는다.
  • lighten($color, $amount) : 더 밝은색을 만든다.
  • darken($color, $amount) : 더 어두운색을 만든다.
  • saturate($color, $amount) : 색상의 채도를 올린다.
  • desaturate($color, $amount) : 색상의 채도를 낮춘다.
  • grayscale($color) : 색상을 회색으로 변환한다.
  • invert($color) : 색상을 반전시킨다.
  • rgba($color, $alpha) : 색상의 투명도를 변경한다.
  • opacify( $color, $amount) / fade-in( $color, $amount) : 색상을 더 불투명하게 만든다.
  • transparentize( $color, $amount) / fade-out( $color, $amount) : 색상을 더 투명하게 만든다.

2.문자(string)함수

  • unquote( $string) : 문자에서 따옴표를 제거한다.

  • quote( $sting) : 문자에 따옴표를 추가한다.

  • str-insert( $string, $insert, $index) : 문자의 index번째에 특정 문자를 삽입한다.

  • str-index( $string, $substring) : 문자에서 특정 문자의 첫 index를 반환한다.

  • str-slice( $sting, $start-at, [ $end-at]) : 문자에서 특정 문자(몇 번째 글자부터 몇 번째 글자까지)를 추출한다.

  • to-upper-case( $sting) : 문자를 대문자로 변환한다.

  • to-lower-case( $string) : 문잘르 소문자로 변환한다.

    예시)

    .div{
	width:str-insert("abcd", "xxx", 4);
   height:str-index("abcd", "c");
   position: str-slice("abcd", 3);
}

    compile

    .div{
	width:"abcxxxd";
   height:3;
   position:"cd";
}

3.숫자(Number)함수

  • percentage( $number) : 숫자(단위무시)를 백분율로 변환한다.
  • round( $number) : 정수로 반올림한다.
  • cell( $number) : 정수로 올림한다.
  • floor($number) : 정수로 내림(버림)한다.
  • abs( $number) : 숫자의 절대 값을 반환한다.
  • min( $number...) : 숫자 중 최소 값을 찾는다.
  • max( $number...) : 숫자 중 최대 값을 찾는다.
  • random() : 0부터 1사이의 난수를 변환한다.

4.List함수

모든 List내장 함수는 기존 List데이터를 갱신하지 않고 새 List 데이터를 반환한다.
모든List 내장 함수는 Map 데이터에서도 사용할 수 있다.

  • length( $list) : list의 개수를 반환한다.
  • nth( $list, $n) : list에서 n번째 값을 반환한다.
  • set-nth( $list, $n, $value) : list에서 n번째 값을 다른 값으로 변경한다.
  • join( $ilst1, $list2, [ $seperator]) : 두개의 list를 하나로 결합한다.
  • zip( $lists...) : 여러 list들을 하나의 다차원 List로 결합한다.
  • index( $list, $value): list에서 특정한 값의 index를 반환한다.

5. Map함수

모든 Map 내장 함수는 기존 Map 데이터를 갱신하지 않고 새 Map데이터를 반환한다.

  • map-get( $map, $key) : Map에서 특정 key의 value를 반환한다.
  • map-merge( $map1, $map2) : 두 개의 Map을 병합하여 새로운 Map을 만든다.
  • map-keys( $map) : Map에서 모든 Key를 List로 변환한다.
  • map-values( $map) : Map에서 모든 value를 List로 반환한다.

6. 관리(introspection)함수

  • variable-exist(name) : 변수가 현재 범위에 존재하는지 여부를 반환한다.(인수는 $없이 변수의 이름만 사용한다.)
  • unit( $number) : 숫자의 단위를 변환한다.
  • unitless( $number) : 숫자에 단위가 있는지 여부를 반환한다.
  • comparable($number1, $number2) : 두 개의 숫자가 연산 가능한지 여부를 반환한다.
profile
Seung min, Yoo
이제 막 개발을 시작한 프로그래밍 입문자
이전 포스트

CSS #16 -grid3-

다음 포스트

git, github

0개의 댓글