CODEWITHSUNDEEP
csssasscompass-sass
Ya Basha
Ya Basha

Reputation: 1952

Compile part of sass or scss file

I have wrote a large main.scss file with variables and mixins to style many pages of my website, I want to know if there is a way to compile different files for the different pages and these files just include the styles for the pages. For ex:

I have main.scss file which contains styles for index.php, about.php, and list.php, rather than all these php files share the same compiled main.css, I want the sass/compass compiler to compile different files for these pages.

Or there is another technique to accomplish this.

Please advice,

Thanx,

Upvotes: 0

Views: 604

Answers (1)

Johan
Johan

Reputation: 19062

  1. Split your main.scss into multiple files. For example scaffolding.scss, nav.scss, button.scss etc.

  2. Create index.scss, about.scss and list.scss. In each of these files import scaffolding.scss, nav.scss and other files you need for the specific page

Example

scaffolding.scss:

.container {
    width: 100%;
}

nav.scss:

nav {
    color: pink;
}

button.scss:

input[type=button] {
    width: 2em;
}

index.scss:

@import "scaffolding";
@import "nav";

about.scss:

@import "scaffolding";
@import "nav";

list.scss:

@import "scaffolding";
@import "button";

If you are concerned about performance, it could still be a good choice to have all your css in one file since it will only be downloaded the first time, the next time it will be loaded from the cache.

Upvotes: 3

Related Questions