# Sass module

## Tip 

Sass Module은 Component에서 불러올 때 객체로 불러온다. 

```css
/* Container.module.scss */

.center {
  margin: {
    left: auto;
    right: auto;
  }
}

.left {
  margin-right: auto;
}
.right {
  margin-left: auto;
}

```

위의 Scss Module을 Component 파일에서 console로 확인해보자. 

```javascript
import React from 'react'
import containerStyle from './Container.module.scss'

const Container = ({ children, ...restProps }) => {
    // console.log 확인 
    console.log(containerStyle)
  return <div {...restProps}>{children}</div>
}

export default Container
```

![console에 Scss 코드가 객체로 불러와진 것을 확인 할 수 있다. ](https://831271375-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSRg9KgNRIGErVFy_6g%2F-MW_rlC7SLtSMIOd3DGJ%2F-MW_t4MCMzmEFFWoTrvr%2Fimage.png?alt=media\&token=3be76ba5-8534-41a5-b4ff-2a566608e5d5)

자 이렇게 되면 어떻게 활용을 할 수 있느냐? containerStyle\[align] 구문, 향상된 객체 표기법을 사용할 수 있다.&#x20;

```javascript
import React from 'react' 
import classNames from 'classnames' 
import containerStyle from './Container.module.scss' 

/* -------------------------------------------------------------------------- */

const Container = ({
// props로 스타일을 설정한 class 이름을 전달 받는다. 
  align = 'center',
  className = '',
  children,
  ...restProps
}) => {

  return (
    <div
      // containerStyle[align] 동적으로 객체의 아이템을 설정할 수 있다. 
      className={classNames(containerStyle[align], className)}
      {...restProps}
    >
      {children}
    </div>
  )
}

export default Container

```

&#x20;

![](https://831271375-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSRg9KgNRIGErVFy_6g%2F-MW_rlC7SLtSMIOd3DGJ%2F-MW_s-oxG8CMT_2dIJd7%2Fimage.png?alt=media\&token=9a9a1b98-d747-4973-8b98-2d3da6bf8fd5)