sass-project-advanced's Introduction

sass-project-advanced

Install sass
```
npm i sass --save-dev
```
install parcel
```
npm i parcel-bundler --save-dev
```

Ändere dein Script in package.json

"start": "parcel src/index.html",
"build": "parcel build src/index.html"

Strukturen für Projekt
Es gibt verschiedenen Methoden, wie man die Ornder für ein Projelt anlegen soll. Die drei bekannteste Methoden sind:

SMACSS
- Base:
- Moduls:
- Layout:
- Themen:
ITCSS
- Settings
- Tools
- Generic
- Elements
- Objects
- Components
- Utilities
7in1

Struktur 7in1

  src/
|
|– abstracts/
|   |– _variables.scss    # Sass Variablen
|   |– _functions.scss    # Sass Funktionen
|   |– _mixins.scss       # Sass Mixins
|   |– _placeholders.scss # Sass Platzhalter
|
|– base/
|   |– _reset.scss        # Reset/normalize
|   |– _typography.scss   # Regeln für Typographie
|   …                     # Etc.
|
|– components/
|   |– _buttons.scss      # Buttons
|   |– _carousel.scss     # Carousel
|   |– _cover.scss        # Cover
|   |– _dropdown.scss     # Dropdown
|   …                     # Etc.
|
|– layout/
|   |– _navigation.scss   # Navigation
|   |– _grid.scss         # Grid system
|   |– _header.scss       # Header
|   |– _footer.scss       # Footer
|   |– _sidebar.scss      # Sidebar
|   |– _forms.scss        # Forms
|   …                     # Etc.
|
|– pages/
|   |– _home.scss         # Home spezifische Styles
|   |– _contact.scss      # Contact spezifische styles
|   …                     # Etc.
|
|– themes/
|   |– _theme.scss        # Default-Theme
|   |– _admin.scss        # Admin-Theme
|   …                     # Etc.
|
|– vendors/
|   |– _bootstrap.scss    # Bootstrap
|   |– _jquery-ui.scss    # jQuery UI
|   …                     # Etc.
|
|
`– main.scss              # Haupt Sass-Datei