스프린트 팀 회고

작은 성공들의 성취를 이어가보기
작은단위의 뚜렷한 목표를 만들어가보기
선생님이되어보기
이해를 하고 실습하기
뽀모도로학습을 해보기
오늘 꼭 기억해야할 것 : 결과물 피드백말고 내 과정에 대한 피드백받기!

• 오늘 어디에 도전해보셨고, 무엇을 배우셨나요?
• 학습하시면서 궁금하신 부분이나, 어려웠던 점은 뭘까요?
• 내일은 어떻게 해보고 싶으세요?

Sass

1. Sass(Syntactically Awesome Stylesheets)나 SCSS 쓰는 이유

• 스타일시트가 점점 더 커지고 복잡해지면 유지보수가 어려움.
• Sass안에 있는 변수, 네이스팅, 믹스인, 가져오기, 상속, 내장기능 등 css에는 없는 편의 기능들이 있어 시간을 절약할 수 있다.
• 코드 재사용이 가능하다.

2-1. Sass

Sass는 CSS로 컴파일 되는 스타일 시트 확장 언어이며 CSS 전처리기의 하나이다.
브라우저가 Sass를 직접 로딩하는 것이 아니라 개발은 Sass를 기반으로 한 후, CSS로 익스포트하는 과정을 거친다.

• 브라우저가 Sass파일을 직접 읽지 못하기 때문에 일반 CSS로 컴파일해야 함.
• 웹업계에서 실제 많이 사용하는 전처리기이다.
• Sass와 Scss가 있는데 그 중에서 일반적으로 CSS와 좀 더 유사한 SCSS를 사용함. (왜냐하면 SCSS는 CSS와 동일하게 중괄호를 사용하는 방식이기 때문에)

//Scss

$font-stack: Helvetica, sans-serif;
$primary-color : #333;

body {
font: 100% $font-stack;
color: $primary-color;
}

//Sass
$font-stack: Helvetica, sans-serif
$primary-color : #333

body 
	font: 100% $font-stack
	color: $primary-color

Why. 중첩을 사용하는 이유는?

기존 CSS는 부모에게 상속된 자식 요소에게 스타일을 적용하려고 할 때마다 최상위 선택자를 반복 선언해야 한다. 하지만 중첩을 사용하면 최상위 선택자를 한번만 선언하여도 자식 선택자에게 스타일을 적용할 수 있게 되어 코드 반복을 줄이게 된다.

2. 변수 생성하기

변수를 만들 때는 $ 기호를 사용하여서 스타일을 적용할 값(색상, 폰트 사이즈, 이미지url)을 저장한다.

//$변수 : 값
$bgColor : #FFF

3. 변수 type

numbers, strings, color, booleans, lists, null이 있습니다. 아래와 같은 형태로 입력 가능함

• numbers : 1, .82, 20px, 2em 등
• strings : "./images/a.png", bold, left, uppercase 등
• colors : green, #FFF, rgba(255,0,0,.5) 등
• booleans : true, false
• null

list

// lists
$sizes: 40px, 50px, 80px;
$valid-sides: top, bottom, left, right;

.title{
    font-size: nth($sizes,1);
}

----------------------------------------------------------------------
.title {
  font-size: 40px;
}

map

//maps
$font-sizes: (
  "h1": 45px,
  "h2": 19px,
  "p": 16px,
);

.title2{
    font-size: map-get($font-sizes,h2 );
}

-------------------------------------------------------------------------

.title2 {
  font-size: 19px;
}

mixin

재사용가능한 코드블럭

@mixin 이름(매개변수) //생성
@include 이름(인수)  //사용

Extend

Extend는 연관 있는 요소들끼리 스타일 코드가 중복된 경우에 사용됨.
이미 스타일이 작성된 선택자의 클래스를 extend하거나 , %를 사용해서 따로 스타일을 정의한 후 extend하여 원하는 선택자에게 스타일을 적용해 줄 수 있다.

• mixin는 (관계 없는) 선택자에서 조금 다른 스타일을 적용할 때 사용
• extend는 관계 있는 선택자들의 동일한 소스코드 적용시 사용