SCSS 문법 더 알아보기

YEONGHUN KO·2022년 1월 6일
If_Elsedebugmixin
0

CSS/SCSS - BASICS

목록 보기
4/12
post-thumbnail

MIXIN

MIXIN를 이번에 배워보자. MIXIN는 함수와 모양과 기능이 비슷하다. 그리고 IF/ELSE 와 같은 조건문도 넣을 수 있다. 역시나 html 을 먼저 만들어주자. 홀수번째 google 은 파란색 짝수번째에 있는 google은 빨간색으로 설정해주려 한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="dist/css/reset.css" />
    <link rel="stylesheet" href="dist/css/styles.css" />
    <title>(S)CSS Masterclass</title>
  </head>
  <body>
    <a href="#">Google</a>
    <a href="#">Google</a>
    <a href="#">Google</a>
    <a href="#">Google</a>
    <a href="#">Google</a>
    <!-- google 이라는 링크를 5개 만들고 싶다고 하면 a*5{google} 이라고 하면 됨 -->
  </body>
</html>

그리고 _minxins.scss 란 파일을 만들어주자.(참고로 import하려는 파일은 styles.scss 와 같은 폴더안에 있어야 한다.)
mixin을 정의할때는 @ 기호를 사용하고 함수이름을 설정한다. 보면 알겠지만 인자까지 pass할 수 있다.

@mixin link($color) {
  text-decoration: none;
  display: block;
  color: $color;
}

@mixin awesome($word) {
  text-decoration: none;
  display: block;
  @if $word == "odd" {
    color: blue;
  } @else {
    color: red;
  }
} //엄청나지 않나?? 파이썬 함수 만들때 처럼 인자설정은 물론, if/else 문까지 쓸수 있다.

그리고 _minxins를 import 한다음 scss 코드를 적어주면 된다. include 를 이용해서 함수를 호출한다.

@import "_minxins";

a {
  margin-bottom: 10px;
  &:nth-child(odd) {
    @include awesome("odd");
  }
  &:nth-child(even) {
    @include awesome("even");
  }
} //파이썬 처럼 minxins 안에 있는 함수를 적용하였다. 이때 include 를 사용한다.

그럼 아래와 같이 짜잔하고 나타난다.

EXTEND

mixin 유연하게 css를 변환하는 반면 extend는 말그대로 그대로 옮겨다가 쓰는 용도이다. html 부터 먼저 만들자. log in 링크와 log out 버튼의 스타일을 같게 만들려고 한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="dist/css/reset.css" />
    <link rel="stylesheet" href="dist/css/styles.css" />
    <title>(S)CSS Masterclass</title>
  </head>
  <body>
    <a href="#">log In</a>
    <button>Log Out</button>
  
  </body>
</html>

그리고 _buttons.scss 라는 파일을 만들어 주자. extend를 만들때는 % 기호를 이용한다. 그럼 아래처럼 많은 기능을 한꺼번에 감싼 패키지같은걸 만들게 되는 셈이다.

%button {
    font-family: Georgia, 'Times New Roman', Times, serif;
    border-radius: 7px;
    text-decoration: none;
    text-transform: uppercase;    
    background-color: powderblue;
    color:white;
    font-weight: 500;
    padding: 5px 10px;
}

// extend를 쓰고 싶을때는 퍼센테이지 바로 옆에 함수의 이름이 있어야 한다.

그리고 import 해주자. @ 통해서 extend를 불러오고 아래에 새로운 css property를 추가 할 수 있다.

@import "_buttons";

a{
  @extend %button;
  text-decoration: none;
}

button {
  @extend %button;
  border: none;
}

// extend 함수는 minxins 과는 다르게 똑같은 함수를 가볍게 적용할 수 있다.
// minxins은 인자와 조건에 따라 유연하게 바뀌는 측면에서, 그리고 독립적으로 적용할 수 있다는 점에서 extend와 차이가 있다.

결과

function

@function grid($a: 1, $b: 2) {
  @return $a + $b;
}

//사용할때는 js랑 똑같다
.box {
  width: grid(1, 2);
}

혹시 built-in 함수랑 이름이 겹칠수 있으니 my-grid 라고 해주는 것이 좋다.

조건, 반복문

// 조건문
@mixin avatar($size, $circle: false) {
  width: $size;
  height: $size;

  @if $circle {
    border-radius: $size/2;
  }
}

// 삼항연산자
if(조건,true,false) .square-av {
  @include avatar(100px, $circle: false);
}

// 반복문
// each
@use "sass:list";

$size: 20px 40px 80px;
$fruits: (
  apple: 1,
  banana: 2,
);

@each $size in $sizes {
  $index: list.index($sizes, $size);
  .icon-#{$index} {
    height: $size;
    width: $size;
  }
}

//for
.list {
  position: relative;
  top: 0;
  @for $i from 1 through 3 {
    .item {
      width: 100px * $i;
    }
  }
}

//while
.list {
  position: relative;
  .item {
    $i: 1;
    $n: 8;
    @while $n > 0 {
      &:nth-child(#{$i}) {
        width: 100px * $n;
        height: 100px * $i;
      }

      $i: $i + 1;
      $n: $n - 2;
    }
  }
}

bootstrap을 통해서 이미 만들어져있는 변수를 사용가능하다.

&(자기자신 참조)

&

자기자신을 참조한다.

.container {
  &-a {...}
  &-b {...}
  &-c {...}
}

css로 나타내면 아래와 같다

.container-a {
 ...
}

.container-b {
 ...
}

.container-c {
 ...
}

보간기능

선택자 속성을 처리하거나, 문자를 치환할때 쓰이는 기능이다. #{} 기호를 사용한다.

예시 1.

@mixin box($position, $width, $color) {
    border-#{$position}: $width solid $color;
}

div{
    @include box(left, 2px, blue);
}
p{
    @include box(bottom, 1px, red);
}

그럼 아래 처럼 컴파일 되서 나온다

div {
  border-left: 2px solid blue;
}

p {
  border-bottom: 1px solid red;
}

예시2.

.list li.icon1 {
  background-image: url(img/icon1.svg);
}

.list li.icon2 {
  background-image: url(img/icon2.svg);
}

.list li.icon3 {
  background-image: url(img/icon3.svg);
}

.list li.icon4 {
  background-image: url(img/icon4.svg);
}


@for $i from 1 through 4 {
    .list li.icon#{$i} {
        background-image: url(img/icon#{$i}.svg);
    }
}

import

  • 모듈화: @use './variables'as var 라고 하면 사용할때는 var.$success 라고 하면 된다.

이런 방식을 '모듈화'라고 한다.

@use "./variables" as var var.$success;
  • forward: 다른 파일에서 사용가능하게 하는 키워드
// 이름 충돌 발생하지 않게 하는 과정. var-여기는 variables 안에있는 어떤 변수가 와도 상관없음.
// a.scss
@foward './variables' as var-*

// b.scss
// 요렇게 사용가능
@use /../a
width: a.$var-cool;

built-in 모듈/함수

  • darken($color, $amount): amount만큼 color가 어두워진다.
  • background-color: color.adjust($primary, $ligtness: -20%) : $primary 색깔 밝기가 20%정도 줄어든 색깔이 들어간다
  • saturate(color,amount) : color를 amount만큼 채도를 조정한다. ex)saturate(brown,50%) ⇒ 갈색의 채도가 50% 올라간다. // desaturate 라는 내장모듈도 있다.
  • list모듈
@use 'sass:list';

// append, index, join, length, nth 를 사용가능
$nations: KOREA,JAPAN,CHINA
$planet: EARTH, MOON, MARSE
$nations: list.append($nations,USA) // $nations: KOREA,JAPAN,CHINA,USA
$nations: list.index($nations,KOREA) // $nations: 0
$universe: list.join($nations,$planet) // $universe:KOREA, JAPAN, CHINA,EARTH, MOON, MARSE
list.length($universe) // 6
list.nth($universe,1) // JAPAN

map 모듈

@use "sass:map";
@use "sass:stirng" $my-info:
  (name: "YEONGHUN", address: "ULSAN" . age: 30, weight: 60) $another-info:
  (name: "HOHI", job: "teacher") map.get($my-info, name) // 'YEONGHUN'
  map.get($my-info, hello) // null
  // 따옴표가 없어짐
  string.unquote(map.get($my-info, name)) // YEONGHUN
  map.has-key($my-info, weight) // true
  map.keys($my-info) // name, address, age, weight
  map.values($my-info) // 'YEONGHUN' , 'ULSAN', 30, 60
  $new-info: map.merge($my-info, $another-info) /* $new-info: (
 name:'HOHI',
 address: 'ULSAN'.
 age: 30,
 weight: 60,
 job: 'teacher'
)
*/ $new-info: map.remove($new-info, job) // remove는 덮어쓸때만 사용 가능
  * * 참고로 key에 따옴표 적을 수 있음.;

  • math 모듈도 있음. 따로 찾아볼것.

  • meta

@use 'sass:meta'

// $cb 함수안에 200px 을 인자로 pass하게 됨
@function a($cb) {
 $res: meta.call($cb,200px)
 @return $res
}

@function c($s) {
 @return $s + 100px;
}

div {
  height: a(c)
}

meta.type-of(a) // function
  • string 모듈도 한 번 찾아볼것.

debug

@debug "heelo";
@warn 'be careful!';

// 에러메세지를 넣으면 컴파일이 이루어지지 않고 에러가 뜸
@error 'something missing';

debug는 console.log와 유사

warn은 console.warn 과 유사

error는 throw new Error 와 유사

profile
YEONGHUN KO
'과연 이게 최선일까?' 끊임없이 생각하기
이전 포스트

반응형 페이지를 위한 grid

다음 포스트

responsive mixin

0개의 댓글