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

# Sass Rules

### File structure <a href="#file-structure" id="file-structure"></a>

* Categorized styles; making them easier to maintain
* 5-1 Pattern architecture; for clearer organization (based on the [7-1 Pattern](https://github.com/HugoGiraudel/sass-boilerplate))
* Clear delineation between grouped and associated rules
* Encourages common style, components and variable (inline with [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/))
* Modular style management that facilitates [Styleguide Driven Development](http://webuild.envato.com/blog/styleguide-driven-development/)
* Reusable approach

```
scss/                               # Import all ‘__[name].scss’ files except in abstract folder
|
|- abstracts/                   
|	|- _mixins.scss             # Scss Mixins
|	|- _variables.scss          # Scss Variables
|
|- base/
|	|- __base.scss              # Import all base .scss files
|	|- _fonts.scss              # Font Import
|	|- _reset.scss              # Custom Reset/Normalize
|	|- _typography.scss         # Typography Rules
|	…                           # Etc.
|
|- components/
|	|- __components.scss        # Import all components .scss files
|	|- _button.scss             # Button Styles
|	|- _input.scss              # Input Styles
|	|- _modal.scss              # Modal Styles
|	…	                    # Etc.
|
|- layouts/
|	|- __layouts.scss           # Import all layouts .scss files
|	|- _footer.scss             # Footer Styles
|	|- _main-navigation.scss    # Main Navigation Styles
|	…                           # Etc.
|
|- pages/
|	|- __pages.scss             # Import all layouts .scss files
|	|- _homepage.scss           # Footer Styles
|	|- _about-us.scss           # Main Navigation Styles
|	…                           # Etc.
|
|- vendor/
|	|- __vendor.scss            # Import vendor folders
|	|- bourbon/                 # Bourbon
|	|- fontawesome/             # Font Awesome
|	|- neat/                    # Bourbon Neat
|	|- normalize/               # Normalize
|	…                           # Etc.
|
`styles.scss                        # Main Scss File

```

### Styles.scss <a href="#stylesscss" id="stylesscss"></a>

* Charset should be included
* Only directory files `-dir.scss` files should be imported
* Changes should not be made to this file
* Filename is always ‘styles’ as it is a compiled file containing multiple stylesheets
* All files except /styles.scss require an underscore at the beginning of each filename

```scss
@charset 'utf-8';

//Vendor
@import "vendor/__vendor";

//Base Styles
@import "base/__base";

//Components
@import "components/__components";

//Layout
@import "layouts/__layouts";
```

### Use abstract folder

abstract folder contains functions, mixins, variables or other things that can be used repeatedly

this is how to use it

```scss
@use "../abstract/mixins";

.Footer {
  @include mixins.display(flex);
  @include mixins.justify-content(space-between);
}
```