scss 시작

심민기·2022년 5월 24일

기초공부

목록 보기

24/25

강의
47:34

css의 전처리기 .

복잡한 css를 간단히 작성해서 내보내는 도구이자 문법.

vscode를 통해서 scss를 시작. --- 라이브 서버 구축에 조금 문제. vscode에 있는 작업 폴더를 모두 치우니까 해결됐다.

$primary-color: #272727;

$문양을 통해 일반적인 선언 가능.

@function weight($weight-name) {
    @return map-get($font-weights , $weight-name )
}

이런 형태로 함수 가능

@mixin와 @include 그룹단위의 스타일을 변수처럼 적용할 수 있다. 즉 여러개의 스타일을 설정해두었다가 한번에 적용하는 것이 가능

	@mixin box-default {
  	padding: 20px 30px;
  	margin-bottom: 20px;
	}

mixin으로 반응형 웹도 가능

@mixin mobile {
    @media (max-width: $mobile) {
        @content;
    }    
}

extend를 활용하면 같은 속성을 확장하는 것도 가능하다!

  #{&}__paragraph1 {
      font-weight:weight(regular);

    &:hover {
      color: pink;
    }   
  }

  #{&}__paragraph2 {
    @extend .main__paragraph1;
    &:hover {
      color: $accent-color;
    }   
  }

루프 구현

@for $i from 1 through 4 {
.menu-nav__item:nth-child(#{$i}) {
  transition-delay: ($i * 0.1s) + 0.15s;
}
}

 반복 grid-template-columns: repeat(2, 1fr); //1fr 1fr 2 time repeat

심민기

왕초보

이전 포스트

생활 코딩 -AJAX

다음 포스트

scss 시작

기초공부

생활 코딩 -AJAX

scss-2

0개의 댓글