> 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)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shhn0509.gitbook.io/react/sass-module.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.