SCSS 문법 더 알아보기

YEONGHUN KO·2022년 1월 6일
If_Elsedebugmixin
0

CSS/SCSS - BASICS

목록 보기
4/13
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 를 사용한다.

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

mixin

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와 차이가 있다.

결과

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개의 댓글