why is a _partial in sass included - css

Question

I have a partial sass called "_color.scss" where it has these code from materializecss.
$materialize-red: (
"base": #e51c23,
"lighten-5": #fdeaeb,
"lighten-4": #f8c1c3,
"lighten-3": #f3989b,
"lighten-2": #ee6e73,
"lighten-1": #ea454b,
"darken-1": #d0181e,
"darken-2": #b9151b,
"darken-3": #a21318,
"darken-4": #8b1014,
);
...
#each $color_name, $color in $colors {
#each $color_type, $color_value in $color {
#if $color_type == "base" {
.#{$color_name} {
background-color: $color_value !important;
}
.#{$color_name}-text {
color: $color_value !important;
}
}
#else if $color_name != "shades" {
.#{$color_name}.#{$color_type} {
background-color: $color_value !important;
}
.#{$color_name}-text.text-#{$color_type} {
color: $color_value !important;
}
}
}
}
// Shade classes
#each $color, $color_value in $shades {
.#{$color} {
background-color: $color_value !important;
}
.#{$color}-text {
color: $color_value !important;
}
}
// usage: color("name_of_color", "type_of_color")
// to avoid to repeating map-get($colors, ...)
#function color($color, $type) {
#if map-has-key($colors, $color) {
$curr_color: map-get($colors, $color);
#if map-has-key($curr_color, $type) {
#return map-get($curr_color, $type);
}
}
#warn "Unknown `#{name}` in $colors.";
#return null;
}
Then in my every other .scss files, i import that in.
#import "../../bower_components/materialize/sass/components/color";
Given this statement by their site, "The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file.", should this be excluded from the actual css? But my current environment is including the partial into my css
was it something to do with my grunt?

Answer 1

You shouldn't have to include the partial file in every over sass file, it defeats the purpose.
What does your file structure look like?
For example, my file structure would look something like:
main.scss
_variables.scss
_mixins.scss
_grid.scss
_whatever.scss
and then within main.scss
#import 'variables'
#import 'mixins'
#import 'grid'
#import 'whatever'
With grunt or sass you are then compiling main.scss , or using sass:
sass --watch main.scss:style.css

Answer 2

Without the underscore, there is a chance that your build tool (grunt) will output a CSS file for every SCSS file in your folders. For example, with this folder structure (without underscores):
my_project
scss
main.scss
colors.scss
mixins.scss
component1.scss
component2.scss
grunt might output a CSS file for every partial:
my_project
css
main.css
colors.css
mixins.css
component1.css
component2.css
Most people don't want this, so we use underscores to tell grunt not to compile every file, like so:
my_project
scss
main.scss
_colors.scss
_mixins.scss
_component1.scss
_component2.scss
This will output as:
my_project
css
main.css