220426
Sass Mixin
Sass Extend
Sass 조건문, 반복문, 함수
Sass Mixin
Mixin은 코드를 재사용하기 위해 만들어진 기능으로, 중복되는 코드는 mixin으로 만들어 놓고 원하는 선택자 블럭에 mixin을 include하여 코드의 반복을 줄인다.
@mixin 이름(매개변수) //생성
@include 이름(인수) //사용
- 중괄호
{ }안에 중복되는 코드를 넣어준다. @include를 사용하여 스타일 하고자 하는 요소에 포함 시킨다.- 서로 연관 있는 스타일 속성끼리 묶어서 만들어야 좀 더 사용성이 높다.
// Scss
// box의 사이즈를 정해주는 mixin
@mixin size($width, $height, $padding){
width : $width;
height : $height;
padding : $padding;
}
article{
@include size(100%, 65px, 10px 20px);
}/*CSS*/
article {
width: 100%;
height: 65px;
padding: 10px 20px;
}Arguments (인수)
mixin 이름 뒤에 인수를 넣어서 사용할 수 있으며, 일반 언어와 마찬가지로 매개변수와 인수의 개수가 같아야 한다.
mixin에 매개변수를 사용하면, 능동적으로 스타일을 적용할 수 있다.Content
원하는 부분에 스타일을 추가하여 전달할 수 있다.Sass Extend
Extend는 연관 있는 요소들끼리 스타일 코드가 중복된 경우에 사용하며, 이미 스타일이 작성된 선택자의 클래스를 extend하거나 , `%`를 사용해서 따로 스타일을 정의한 후 extend하여 원하는 선택자에게 스타일을 적용해 줄 수 있다.- mixin는 (관계 없는) 선택자에서 조금 다른 스타일을 적용할 때 사용
- extend는 관계 있는 선택자들의 동일한 소스코드 적용시 사용
class이름 가져오기
기존에 작성한 클래스 내에 코드를 가져올 수 있다. @extend 에 클래스 명을 함께 적으면, 클래스에 있는 코드 전체가 extend 된다.// Scss
.profile-user {
background-image: url("../assets/user.jpg");
background-size: cover;
background-position : 50% 50%;
border-radius: 50%;
width : 50px;
height : 50px;
}
.comment-user {
@extend .profile-user;
}placeholder
`%` 로 선택자를 만들고, `@extend`를 사용해서 앞서 `%placeholder` 스타일 블럭을 불러오면 다. 그리고 %선택자는 CSS로 컴파일되지 않습니다.// Scss
%base-button {
width: 133px;
height: 44px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
border-radius: 10px;
}
.follow-button {
@extend %base-button;
background-color: #ffffff;
color: #ff375f;
border: 3px solid #ff375f;
}
.message-button {
@extend %base-button;
background-color: #ff375f;
color: white;
}모달
웹페이지 안에서 생성되는 여러가지 모달에 대한 코드이고,
`%`를 사용하여 스타일 블럭을 만들고, 각각의 모달에 스타일을 적용해준다.// Scss
%modal {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 6px;
}
.login-modal {
@extend %modal;
width: 272px;
height: 405px;
padding: 10px 20px;
}
.event-modal {
@extend %modal;
width: 340px;
height: 160px;
padding: 18px;
}/*CSS*/
.login-modal,
.event-modal {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 6px;
}
.login-modal {
width: 272px;
height: 405px;
padding: 10px 20px;
}
.event-modal {
width: 340px;
height: 160px;
padding: 18px;
}조건문
조건에 따라 스타일을 주고자 할 때, if와 else문을 사용하며,
if문 하나만 사용하는 경우도 있으며, 뒤에 나오는 else문, else if문과도 함께 사용한다.@if
**@if**에 괄호 없이 true나 false를 반환할 수 있는 조건문을 작성하면 된다..
조건에는 논리연산자 and, or, not을 사용하고, if문의 조건이 true일 때만 `{ }` 괄호 안에 있는 코드가 실행됨.@if (조건) {
// 조건이 참일 때 실행될 구문
}// if문 예시 작성
// Sass 공식문서
// circle이 false면 사각형을, true이면 원형으로 스타일함
@mixin avatar($size, $circle: false) {
width: $size;
height: $size;
@if $circle {
border-radius: $size / 2;
}
}
.square-av {
@include avatar(100px, $circle: false);
}
.circle-av {
@include avatar(100px, $circle: true);
}@else
**@else**문은 if 문처럼 조건문이 필요하지는 않으며, if문에서 걸었던 조건이 false가 나오면 else문의 코드가 실행된다. @if (조건) {
// 조건이 참일 때 실행될 구문
} @else {
// if문의 조건이 거짓일 때 실행될 구문
}// Scss - else문
// Sass 공식문서
// ture이면 밝은 색을, false면 어두운 색을 스타일함
$light-background: #f2ece4;
$light-text: #036;
$dark-background: #6b717f;
$dark-text: #d2e1dd;
@mixin theme-colors($light-theme: true) {
@if $light-theme {
background-color: $light-background;
color: $light-text;
} @else {
background-color: $dark-background;
color: $dark-text;
}
}
.banner {
@include theme-colors($light-theme: true);
body.dark & {
@include theme-colors($light-theme: false);
}
}@else if
**@else if**문은 여러 개의 조건문을 사용해야 할 때 사용한다.
@else if문에도 true나 false를 반환하는 조건문을 작성한다.
if문의 조건에서 false가 나왔을 때, `else if`문으로 넘어가서 조건에 대해 true인지 false인지 판단한다.
true인 경우 `else if`문 내의 코드를 실행하고, false 라면 그 다음 조건문( `else` or `else if` )로 넘어가게 된다.if (조건){
// 조건이 참일 때 실행될 구문
} @else if(조건){
// else if 조건이 참일 때 실행될 구문
} @else{
// 위에 모든 조건이 거짓일 때 실행될 구문
}// Scss - if, else if, else문
// Sass 공식문서
// 조건에 해당하는 방향에 맞춰서 border-bottom 컬러를 스타일함
@mixin triangle($size, $color, $direction) {
height: 0;
width: 0;
//여기 부분만 수정했습니다.
border-color: black;
border-style: solid;
border-width: ($size/2);
@if $direction == up {
border-bottom-color: $color;
} @else if $direction == right {
border-left-color: $color;
} @else if $direction == down {
border-top-color: $color;
} @else if $direction == left {
border-right-color: $color;
} @else {
@error "Unknown direction #{$direction}.";
}
}
.next {
@include triangle(5px, black, right);
}반복문
@for
for ($변수) from (시작) through(끝){
// 반복할 내용
}@for은 정의한 횟수만큼 코드 실행을 반복한다.
@for문에 from(시작 : 이상) - through(끝 : 이하)를 사용하여 어디서 시작해서 어디서 끝날 지를 알려준다.
`nth-` 선택자를 사용하는 경우 유용하게 사용할 수 있다.// Scss - for문
// for문을 이용해 nth-선택자에게 각각의 image를 배경에 넣어준다.
@for $hojun from 1 through 7 {
.photo-box:nth-child(#{$hojun}) {
background-image: url("../assets/phoster#{$hojun}.png");
}
}
// 범위 1이상 5이하
// for문에서 1부터 5까지 반복하라는 의미입니다. 총 5번 반복되면서 코드가 실행된다.
// 만약 from 3 throught 8 이라면 3에서 8까지 6번 실행된다.@for $hojun from 1 through 10 {
.content-#{$hojun} {
font-size: #{$hojun * 10}px;
width: 100px;
height: 100px;
background-color: red;
}
}@each
each문은 lists나 맵의 각각의 요소마다 코드를 실행해서 스타일을 적용할 수 있다.@each ($변수) in (리스트나 맵){
// 반복할 내용
}// Sass - each문
// color-palette 리스트에 들어있는 색상을 each문을 사용하여 background에 색상값을 넣어준다.
$color-palette: #dad5d2 #3a3532 #375945 #5b8767 #a6c198 #dbdfc8;
@each $color in $color-palette {
$i: index($color-palette, $color); //index는 list의 내장함수
.color-circle:nth-child(#{$i}) {
background: $color;
width: 20px;
height: 20px;
border-radius: 50%;
}
}@while
@while 조건 {
// 반복할 내용
}특정 조건에 충족될 때까지 코드를 무한 반복하며, 조건을 만날 때 while문을 빠져나온다.
참고로, while문은 빠져나오는 조건을 만드는 경우가 거의 없어서 잘 사용하지 않는다.for문에서 사용했었던 예제와 비슷하게 예제를 문들어 보았습니다.
$hojun: 5;
@while $hojun > 1 {
$hojun: $hojun - 1;
.content-#{$hojun} {
width: 100px;
height: 100px;
background-color: red;
}
}- 공식문서 사용 예
// Scss - while문
// Sass 공식문서
// value값이 base보다 작을 때까지 일정한 값으로 계속 나눠준다.
@function scale-below($value, $base, $ratio: 1.618) {
@while $value > $base {
$value: ($value/$ratio);
}
@return $value;
}
$normal-font-size: 16px;
.sup {
font-size: scale-below(20px, 16px);
}function
`@function` 키워드를 사용하여 함수를 생성하고 **함수이름( )** 형태로 함수를 호출하고 실행한다. 함수 안에서는 `@return` 이용해 값을 반환한다.
함수는 Mixin과 비슷하지만 mixin은 스타일 코드를 반환하고 function은 `@return` 키워드를 사용해서 값 자체를 반환한다는 차이가 있다.@function 함수이름($매개변수) {
// 실행 코드
@return 값
}@function pow($value) {
$value: $value * $value + px;
@return $value
}
.box {
width: pow(10);
}// Scss - function
// Sass 공식문서
// 거듭제곱을 구하는 함수
@function pow($base, $exponent) {
$result: 1;
@for $_ from 1 through $exponent {
$result: $result * $base;
}
@return $result;
}
.sidebar {
float: left;
margin-left: pow(4, 3) * 1px;
}내장함수
Sass에는 기본적으로 내장되어 있는 함수가 있다.
1) 색상 함수
lighten(color, amount): 기존 색상의 밝기를 높인다( 0%-100% 사이의 값 )darken(color, amount): 기존 색상의 밝기를 낮춘다.( 0%-100% 사이의 값 )mix(color1, color2, weight): 2개의 색상을 섞어서 새로운 색상을 만든다.
2) 숫자 함수
max(number, ..): 괄호에 넣은 값 중에 가장 큰 수를 반환.min(number, ..): 괄호에 넣은 값 중에 가장 작은 수를 반환.parcentage(number): 퍼센트로 숫자를 바꿔줌.comparable(num1,num2): 숫자1과 숫자2가 비교 가능한지 확인 후 true,false 값을 반환.
3) 문자 함수
srt-insert(string,insert,index): 문자열에 원하는 위치(index)에 문자를 넣은 후(insert), 새로운 문자열을 반환.str-index(string,substring): 문자열에서 해당 문자의 index 값을 반환.to-upper-case(string): 문자열 전부를 대문자로 바꿔줌.to-lower-case(string): 문자열 전부를 소문자로 바꿔줌.
4) 확인 함수
unit(number): 숫자의 단위를 반환.unitless(number): 단위를 가지고 있는지 판단하여 true,false 값을 반환.variable-exists(name): 변수가 현재 범위에 존재하는지 판단하여 true,false 값을 반환. 이 함수의 인수는$없이 사용한다.
뜨내기 FE 개발자