Portfolio

목차 1. SCSS (Day-32강의)3. SCSS - 변수, 데이터, 연산자 3.1 변수 3.2. 데이터 3.3. 연산자 4. 재활용 4.1. mixin 4.2 mixin 활용 2. SCSS (Day-33 강의)2.1. 확장 —11m 2.1.1 @extend 2.2함수 - 17m 2.3 조건과 반복 - 21m 2.4 가져오기, 모듈 - 30m 2.5 내장모듈 - 25m 2.6 내장모듈 2 - 25m 2.7 디버그 - 3m

1. SCSS (Day-32강의)

2. SCSS (Day32) (SCSS링크) (1.개요, 2. 주석&중첩)

3. SCSS - 변수, 데이터, 연산자

3.1 변수

$size, $src, $color-blue, $color-gray, $w 등에 활용 가능

중괄호 범위안에서만 작동한다는 유효범위 반드시 고려할 것!

유효범위를 바꿔주는 플래그(flag)가 존재

3.1.a 플래그(flag)

!global : 해당하는 변수를 전역으로 만들어 주는 flag

재할당 시 해당 유효범위에만 적용된다는 것 주의!

box-a = 777px 로 재할당되었지만, box-b는 여전히 전역값인 100px

단, !global 키워드로 전역의 변수에 재할당 할 수 있다.

box-a {$w: 777px !global;} 적용 시, box-b의 width도 777px 가짐

!default : 기존의 할당된 값이 있다면, 현재 값말고 기존값을 사용하게 하는 flag

$primary의 기존 할당 값이 있다면 기존값(blue)를 사용하고, 없다면 현재 값(orange)사용하도록 해라!

유용한 사례

부스트트랩내 scss의 변수들에는 전부 !default 적용 되어있다.
사용자가 전역에 선언한 변수를 재할당하지 않기 위해서 (사용자 편의성-커스텀가능)

3.1.b 보간

js에서 탬플릿리터럴과 같이, 변수를 동적으로 문자와 함께 사용하도록 하는 문법

사용방법

“#{변수명}”
$path : “~assets/images”, $name: “github”

background-image: url("#{$path}/#{$name}.png");
=== url(”~assets/images/github.png”)

선택자 이름에도 사용 가능

.box-#{$name} { 스타일 } === .box-github{ 스타일 }

3.2. 데이터

3.2.a 데이터 종류

Numbers : 1 , 0.82, 20px, 2fr

단위가 없거나, 단위가 있어도 숫자데이터 취급

String: bold, absolute, “assets/images/”

“”로 묶여있거나, 묶여있지 않은 키워드

Colors : blue, yellowgreen, rgba(255,0,0,.5), #ffff00;

색상을 표현하는 모든 값

Boolean: true false

Null: null

특정 속성의 값으로 사용되면, 해당 값은 컴파일 되지 않는다!

Lists : (10px, 20px, 30px), 10px,20px,30px, 10px 20px 30px, apple, banana, cherry

소괄호로 묶여있거나, 쉼표로 구분, 띄어쓰기로 구분 된 리스트 존재

Maps: (key: value) (a: apple, b:banana)

반드시 소괄호를 통해 범위를 지정해주어야함

3.3. 연산자

3.3.a 산술연산자

+, -, *, %

20px / 2 (scss) ⇒ 20px/2 (css) 로 나옴.
‘/’ 기호가 나누기가 아닌 별도의 기호로 사용되기 때문에

소괄호로 묶어주기 (20px / 2) ⇒ 10px !!deprecated예정
변수로 묶어주기 $a: 20px; $a /2 ⇒ 10px;
연산자 혼합하여 사용하기 20px / 2+ 1px ⇒ 11px
calc함수 그대로 넘겨주기 calc(20px/2) (scss) ⇒ calc(20px/2) (css) ⇒ 10px

단위가 다른 경우

calc함수로 넘겨주기

calc(100% -50px) scss ⇒ calc(100% - 50px) css ⇒ (250px) browser

3.3.b 비교연산자

==, !=, <, >, <= , >=

조건문에서 주로 사용 (@if)

3.3.c 논리연산자

and, or, not

조건문에서 주로 사용 (@if)

@if($w != 100px or $h > 100px) { 스타일 }
@if( not $b and $h > 100px ) { 스타일 }

b가 false 이고, h가 100px 이상일 때 스타일 적용

4. 재활용

4.1. mixin

4.1.a 기본 사용방법

@mixin 'key' { 스타일 } 형식으로 스타일을 지정하고, @include ‘key’ 를 통해 해당 스타일을 재활용할 수 있다.

함수와 같이 매개변수를 받아 사용하기

@mixin 'key(매개변수: default값)' { 스타일 } ⇒ @include ‘key(매개변수)’

매개변수의 default값 지정하여 사용

@mixin large-text($size: 30px) { 스타일 }

조건문과 함께 사용하기

@if @else 문

삼항연산자 condition ? true : false (js) ⇒ if(condition, true, false) (scss)


@mixin large-text($size: 30px){
	font-size: if($size < 30px, 30px , $size);
}

4.1.b 응용 사용방법

mixin 안에 mixin을 중첩하여 사용가능


@mixin reset-margin {
	margin: 0 auto;
}

@mixin section {
	h1 {
		font-size: 40px;
		@include reset-margin;
	}
}

4.1.c 가변인수 사용

특정 매개변수가 여러개의 인자를 받을 수 있을 때 사용

js의 rest parameter와 같이 사용 가능

마지막 매개변수에 ... 키워드 붙어주어 사용

@mixin bg($w, $h, $rest...){ 스타일 }

활용 (list형을 풀어주어 매개변수로 사용할 때 사용가능

보간 방법과 함께, 모듈화하여 사용가능

첫번째 인자로 속성(margin || padding)을 받고, 남은 매개변수로 각각의 값을 지정

4.2 mixin 활용

4.2.a mixin에서 사용하는 키워드(keyword) 인수

일반적인 mixin에서 매개변수 순서가 반드시 지켜져야하는 점을 개선하기 위해서 사용
( js에서 배열 인수를 객체 인수로 받을 수 있도록 하는 것과 같음)

사용방법

매개변수의 default값을 전부 지정해준 후, 객체와 같이 사용
@mixin pos($p, $t: null, $b:null, $l: null, $r:null){ 스타일 } @include pos(absolute, $t: 100px, $l: 50px)

4.2.b @content 규칙 (한번 더 듣기)

@include 로 mixin 사용시 적용하고 싶은 추가 속성을 전달하는 방법

추가 적용 속성을 { 스타일 } 로 작성하고, 받는 곳에서 @content 키워드를 통해 적용할 곳을 지정해준다.

4.2.c @media 쿼리 효과적으로 사용하기

선택자 별로, 뷰포트 너비에 따른 속성을 반응형으로 지정해주고자 할 때, breakpoint(상수), width, height(변수) 등을 scss에서 효과적으로 사용하는 방법

use"sass:map" ⇒ map.get(obj, key)

@content(매개변수) ⇒ using($변수) { _속성: $변수 }

기존 css 로 구현한 반응형 media


.box {
    width: 400px;
    height: 400px;
    @media all and (max-width: 1400px){
        width: 300px;
        height: 300px;
    }
    @media all and (max-width: 992px){
        width: 200px;
        height: 200px;
    }
    @media all and (max-width: 576px){
        width: 100px;
        height: 100px;
    }
}

.section {
    width: 500px;
    height: 600px;
    
    @media all and (max-width: 992px){
        width: 450px;
    }
}

scss로 모듈화한 반응형 media mixin

@media mixin 만들기

💡

먼저 완성되었을 때 사용부분을 작성하고 세부로직 작성하는 것이 편하다 @include media(sm) using($bp){ 스타일 }

@include 매개변수로 key값 받아 @mixin() 매개변수로 전달

map.get(key)로 $breakpoint 값 불러오기 (1400px)

max-width값으로 $breakpoint 적용, @content로 전달 받은 스타일 위치 지정

@content의 매개변수로 현재 $breakpoint 값전달하기

using ($bp) 로 사용처에서 받아 사용하기


@use "sass:map";

@mixin media($key) {
    $breakpoints: (
        sm: 576px,
        md: 992px,
        lg: 1400px,
    );
    
    @media all and (max-width: map.get($breakpoints, $key)){
        @content(map.get($breakpoints, $key));
    }
}

.box {
    width: 400px;
    height: 400px;
    
    @include media(sm) using($bp){
        width: 100px;
        height: 100px;
        _debug: $bp;
    }
    @include media(md) using($bp) {
        width: 200px;
        height: 200px;
    }
    @include media(lg) using($bp){
        width: 300px; 
        height: 300px;
    }
}

.section {
    width: 500px;
    height: 600px;
    @include media(md) using($bp){
        width: 450px;
    }
}

2. SCSS (Day-33 강의)

2.1. 확장 —11m

2.1.1 @extend

사용방법

mixin 과 다른점

주의사항

선택자폭발

추천사용방법

@extend < @mixin

% placeholder 선택자

주의사항 - 유효범위

@extend을 @mixin으로 바꾸기

용량최적화 방법

2.2함수 - 17m

사용방법 & 예제

grid시스템의 너비

if문으로 예외처리 (@error)

keyword 인수 사용 가능

전개연산자... 사용가능

rest...사용가능
use ‘sass:list’

함수의 중복을 피할수 있는 방법

전역함수를 통한 Customize

2.3 조건과 반복 - 21m

조건문(@if) 사용방법

@else if 구문

화살표 사례

@each 구문

list 반복 @each $key in List
Map 반복 @each $key,$value in Map

@for문

@for $i from 1 through(to) 3 { 스타일 }

@while(조건){ 스타일 }

2.4 가져오기, 모듈 - 30m

sass install

$ sass style(폴더명):css(폴더명)

@import 사용방법

확장자 안써도 됨
_(언더바)를 통한 컴파일 최적화

컴파일이 반드시 되는 상황 (?)

url함수 import
css 파일 import
http/https 프로토콜

@use 와 @import의차이

@import 해당 파일 통째로 들고옴
@use 는 namespace를 가져와 변수명 출동발지, 모듈화하여 가져옴
@use ”./variables” as var ⇒ var.$primary
두가지 키워드로는 파일들간의 모듈이동은 불가하다

@forward 키워드로 export 처리를 명시적으로 함으로 가능

34일차 배운 것 정리

목차