Saas Folder structure - Partial Files

Question

I am trying to create a folder structure for my SCSS files in Dreamweaver. It will be some where similar as follows.

stylesheets/

|

|-- modules/ # Common modules

| |-- _all.scss # Include to get all modules

| |-- _utility.scss # Module name

| |-- _colors.scss # Etc...

| ...

|

|-- partials/ # Partials

| |-- _base.sass # imports for all mixins + global project variables

| |-- _buttons.scss # buttons

| |-- _figures.scss # figures

| |-- _grids.scss # grids

| |-- _typography.scss # typography

| |-- _reset.scss # reset

| ...

|

|-- vendor/ # CSS or Sass from other projects

| |-- _colorpicker.scss

| |-- _jquery.ui.core.scss

| ...

|

`-- main.scss # primary Sass file

Reference - How to structure a Sass project

Is it possible for me to structure the Sass files and import the partial files to the main sass file. I am trying to have as many sass files as possible since it is recommended.

BenPleysier · Accepted Answer

Don't overthink the folder structure, especially on smaller sites. The following is typical of my file structure.

The vendor files are kept intact and included as needed, my overriding files are place in a similarly named folder. The compiled CSS file is placed as normal, in a CSS sub-folder of the root directory. Notice how I have cloaked the _src folder. That way the files do not get uploaded.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded