2022-12-15 13:41:47 +01:00
|
|
|
|
# Pattern Template 7-1 Lite version with Split Media
|
|
|
|
|
|
|
|
|
|
|
|
An extraordinarily neat architecture that any Web Designer can understand at a glance. Structure with the help of SASS and media queries.
|
|
|
|
|
|
|
|
|
|
|
|
``` txt
|
|
|
|
|
|
sass/
|
|
|
|
|
|
|
|
|
|
|
|
|
|– mobile/
|
|
|
|
|
|
| |– _header.sass
|
|
|
|
|
|
| |– _footer.sass
|
|
|
|
|
|
| |– pages/
|
|
|
|
|
|
| | |– _home.sass
|
|
|
|
|
|
| | |– _contact.sass
|
|
|
|
|
|
| | ...
|
|
|
|
|
|
|– desktop/
|
|
|
|
|
|
| |– _header.sass
|
|
|
|
|
|
| |– _footer.sass
|
|
|
|
|
|
| |– pages/
|
|
|
|
|
|
| | |– _home.sass
|
|
|
|
|
|
| | |– _contact.sass
|
|
|
|
|
|
| | ...
|
|
|
|
|
|
|– _base.sass
|
|
|
|
|
|
|– _mixins.sass
|
|
|
|
|
|
|– _typography.sass
|
|
|
|
|
|
|– _variables.sass
|
|
|
|
|
|
|– vendors/
|
2023-01-02 10:41:22 +01:00
|
|
|
|
| |– _normalize.sass
|
|
|
|
|
|
| |– _owl-carousel.sass
|
2022-12-15 13:41:47 +01:00
|
|
|
|
| ...
|
|
|
|
|
|
`– mobile.sass
|
|
|
|
|
|
`– desktop.sass
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
# Compile SASS.
|
|
|
|
|
|
|
|
|
|
|
|
## Install
|
|
|
|
|
|
|
|
|
|
|
|
``` bash
|
|
|
|
|
|
yarn global add node-sass
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## Run
|
|
|
|
|
|
|
|
|
|
|
|
``` bash
|
|
|
|
|
|
node-sass --output-style compressed sass/mobile.sass css/mobile.css
|
|
|
|
|
|
node-sass --output-style compressed sass/desktop.sass css/desktop.css
|
|
|
|
|
|
```
|
