[Day 20] 2번째 스프린트 회고 & Sass

2번째 스프린트 회고

 

메이커준님과 2번째 스프린트 회고시간으로 새로운 주를 시작했다.

멋사를 시작한지 이제 4주차..!

돌이켜보니 정말 내 마인드와 실력에서 많은 변화를 체감할 수 있었다.

 

1번째 회고시간에선 피드백의 중요성에 대해서 알아봤다면,

이번 회고시간에서는 지금까지의 액션 플랜에 대해 점검하고

과거에서 효과있었던 학습, 교육 경험과 그렇지 않았던 경험들을 돌이켜 봄으로써

효과적인 학습과 회고 방법에 대해 같이 이야기 나누어 볼 수 있었다. 

 

나의 가장 개선하고 싶은 액션 플랜으로

[느낀 점과 배운 점을 아낌없이 모조리 탈탈 터는 주간회고 적기]로 설정했다.

이유는 멋사 시작부터 지금까지 하루 하루 배운 거 복습과 과제에만 몰두해왔는데,

코딩뿐만 아니라 교육을 듣고 끝까지 수료를 위해서 나의 부족한 점,

더 나아가 수료 후에도 앞으로 나아가야할 방향에 대해서

진지하게 고민해보고 기록해본 적이 없기 때문이다..!

 

다른 분들의 회고글을 볼 때마다 정말 감명깊게 읽은 글도 많았고,

한편으론 글쓰기를 통해 얻을 수 있는 통찰력 또한 있기 때문에 '나도 해야되는데.. 해야되는데..'

하면서도 정작 코딩을 위해 키보드만 두들기고 있는 나만 있었다..ㅜ

 

하지만 모티베이션이 리더분들과의 커피챗+울 회고 팀원들과의 논의+오늘 회고시간을

통해 완성되었고!

 

이번 주 금요일마다 게더를 통해 팀원들과 같이 주간회고를 진행하기로 했는데,

주간 회고 진행 후 최대한 샅샅이 나의 느낀 점과 배운 점을 뽑아낼 계획이다.

 

매 주 회고글을 쓰는 것 뿐만 아니라 팀원 분들께 피드백 요청을 통해서

한 주 한 주 더 나은 회고글이 나왔으면 하는 바람이다:)

 

+)회고 뿐만 아니라 공부 방법이나 코딩에 대해서도 

무조건 결과에 대해서가 아닌 과정에 대한 피드백도 받자!

 

 

 

 

---

Sass(Syntactically Awesome Stylesheets)

Sass는 CSS로 컴파일 되는 CSS 전처리기이다.

브라우저가 Sass를 직접 로딩하는 것이 아니라 개발은 Sass를 기반으로 한 후, CSS로 익스포트하는 과정을 거친다.

 

.sass와 .scss 방식이 있는데

그 중 css와 좀 더 비슷한 .scss 방식에 대해서 배웠다.

 

1) 파일 분리

 

style.scss (아래 나머지 파일 @import)

_variables.scss

_mixin.scss

_home.scss

_header.scss

 

* 언더스코어를 붙이지 않으면 컴파일 된다.

따라서 언더스코어를 붙여 main 파일의 일부임을 알리고

해당 파일은 그냥 내부에서 import하게만 작동하게 하는 것이 좋다.

 

2) 주석

한 줄 주석(//)과 두 줄 주석(/*)이 분리되어 있다.

한 줄 주석만 sass 내에서 볼 수 있다.

 

 

3) 앰퍼샌드(ampersand) &

 

상위에 있는 부모선택자를 가리킨다.

/*CSS*/
.box:focus{} /* 가상선택자 */

/*Scss*/
.box {
	&:focus{} // 가상선택자

/*CSS*/
.box-yellow {
  background: #ff6347;
}
.box-red {
  background: #ffd700;
}
.box-green {
  background: #9acd32;
}

/*Scss*/
.box {
  &-yellow {
    background: #ff6347;
  }
  &-red {
    background: #ffd700;
  }
  &-green {
    background: #9acd32;
  }
}
/*.box라는 이름이 같기 때문에 &를 사용해 중첩구조로 만들 수 있다*/

 

4) 변수 생성

 

$변수: 값

형식으로 변수를 생성한다.

 

변수로 올 수 있는 타입들은 다음과 같다.

• numbers : 1, .82, 20px, 2em 등
• strings : "./images/a.png", bold, left, uppercase 등
• colors : green, #FFF, rgba(255,0,0,.5) 등
• booleans : true, false
• null
• lists (예: $font-size: 10px 12px 16px) 다수 프로그래밍 언어의 배열과 비슷한 형태인 듯 보인다.
• maps (예: $font-weight: ("regular":400, "medium":500)  파이썬의 딕셔너리와 비슷한 형태인 듯 보인다.

*주의할 점은 lists에서 index가 0부터 시작하지 않고 1부터 시작한다는 점!

 

5) @mixin

 

@mixin 이름(매개변수)

(생성)

 

@include 이름(인수)

(사용하고자 하는 요소에 적기)

 

mixin은 파일을 만들어서 import하여 사용하거나
mixin을 사용할 파일 내에서 선언 후 사용할 수 있다.

이때, 여러 개의 mixin을 만들어 사용한다면, _mixins.scss 파일을 만들어서 관리한다.

@mixin image-style($ul, $size, $repeat, $positionX, $positionY) {
  background-image: url($ul);
  background-size: $size;
  background-repeat: $repeat;
  background-position: $positionX $positionY;
} 
/*background관련 스타일 코드가 들어있다.*/
/*mixin의 인수에 따라 조금씩 다른 스타일링이 가능하다.*/

.profile {
  @include image-style("./assets/user.jpg", cover, no-repeat, center, center);
}

.box-one {
  @include image-style(url("/images/poster1.svg"), cover, no-repeat, 40%, 50%);
}

mixin 설정 시 변수에 기본값을 설정해줄 수도 있다.

@mixin pri-button_($width:100px, $height:50px, $radius:10px) {
    width: $width;
    height: $height;
    border-radius: $radius;
    background-color: aqua;
}

/* 값을 비울 때*/
.btn__ {
    @include pri-button_(100px, null, 20px)
}

/* 중앙값을 안주고 싶을 때*/
.btn__ {
    @include pri-button_(100px, $radius:20px)
}

 

6) extend

 

앞의 mixin은 (관계없는) 선택자에서 스타일을 적용시킬 때 사용한다면,

extend는 관계 있는 선택자들의 동일한 소스코드를 적용할 때 주로 사용한다고 한다.

 

사실 이렇게 들어도 mixin과 extend를 각각 어느 때 사용해야 하는지 헷갈린다.

https://mytory.net/2016/12/23/when-to-use-extend-when-to-use-a-mixin.html 

[번역] Sass에서 웬만하면 extend 말고 믹스인을 사용하자

위 블로그에서 csswizardry에 실린 글을 번역해서 이것에 대해 해답을 제시하는데,

결론은 extend보다 mixin을 쓰자 이다.

 

위 글에서 요약만 그대로 가져오자면,

 

DRY하게 유지하려고 하는 규칙들이 본질적으로 연관돼 있을 때, 그리고 한 주제로 묶여 있을 때만
 @extend를 사용하자. 연관성도 없는데 강제로 묶지 말자. 코드가 이상하게 묶이고, 소스 순서가 이상해진다.

믹스인은 반복되는 구조에 동적인 값을 넣는 데 사용할 수 있다. 또한 동일한 선언 묶음을 반복하게 해 줌으로써, 프로젝트에서 유일한 진리의 근원을 유지하게 해 주는, 멋진 복사/붙여넣기처럼 사용할 수 있다.

 

 

[사용하는 경우 예시]

좌: .profile-user 우: comment-user

이 두 클래스의 스타일이 중복되는 것을 확인할 수 있는데,

이 경우 .profile-user코드를 .comment-user에게 extend 할 수 있다.

 

* class명을 extend 하는 경우 다중선택자클래스(+, > 등..) 사용 못한다

 

extend와 %placeholder

 

클래스를 extend 하는경우가 아니라면 %로 선택자를 만들 수 있다. (이 방법을 더 권장!)

/* 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;
}

 

 

7)조건문 @if @else if @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);
  }
}

 

8) 반복문

8-1) @for

/*nth-선택자에게 각각의 image를 배경에 넣어줌*/

@for $img from 1 through 7 {
	.photo-box:nth-child(#{$img}) {
    	background-image: url("./imgs/poster{$img).png");
        
 /*1부터 7까지 반복*/

 

8-2) @each

lists나 map의 각 요소마다 코드를 실행한다.

$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%;
    }
}

 

8-3) @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);
}

 

 

9) @function

mixin과 비슷하지만 mixin은 스타일 코드의 묶음이라 볼 수 있고, funtion은 함수의 리턴 값을 @return을 통해 반환한다.

(위 예시 참고)

 

Sass에 기본으로 내장되어 있는 함수들이 있는데, 

https://www.koderhq.com/tutorial/sass/native-functions/#what-is

Sass/SCSS Built-in Functions Tutorial | KoderHQ

위 사이트와 같이 cheatsheet용 사이트들이 많으니 참고해보면 좋을 것 같다:)