> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/sass-module.md).

# 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 코드가 객체로 불러와진 것을 확인 할 수 있다. ](/files/-MW_t4MCMzmEFFWoTrvr)

자 이렇게 되면 어떻게 활용을 할 수 있느냐? 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;

![](/files/-MW_s-oxG8CMT_2dIJd7)