1
00:00:00,000 --> 00:00:04,983
[MUSIC]

2
00:00:04,983 --> 00:00:08,759
The CSS file for even a moderately
complex website is immensely long,

3
00:00:08,759 --> 00:00:12,050
containing hundreds or
even thousands of styles.

4
00:00:12,050 --> 00:00:15,165
Finding the single style you want to
edit could be like finding a needle in

5
00:00:15,165 --> 00:00:16,105
a haystack.

6
00:00:16,105 --> 00:00:16,865
What's worse?

7
00:00:16,865 --> 00:00:20,295
When it's time to add a new style to
a style sheet with thousands of styles,

8
00:00:20,295 --> 00:00:21,795
where should you put it?

9
00:00:21,795 --> 00:00:23,045
The more styles a site has,

10
00:00:23,045 --> 00:00:25,845
the more difficult it can be to
maintain a single style sheet.

11
00:00:27,345 --> 00:00:30,995
Currently, our style sheet is one
lengthy list of variables, mix-ins,

12
00:00:30,995 --> 00:00:32,625
placeholders and rule sets.

13
00:00:32,625 --> 00:00:37,120
And if we keep adding components to
the site, it's going to get crowded fast.

14
00:00:37,120 --> 00:00:40,595
Fortunately Sass has a great
solution to this problem, partials.

15
00:00:40,595 --> 00:00:43,793
They're one of the main
benefits of working with Sass.

16
00:00:43,793 --> 00:00:46,680
Partials is like split your style
sheets into separate files.

17
00:00:46,680 --> 00:00:50,360
They help marginalize your CSS and
keep things easier to maintain.

18
00:00:50,360 --> 00:00:54,730
Each partial is a single file and its
like a small piece in the big CSS puzzle.

19
00:00:54,730 --> 00:00:56,218
It contains a portion of your style sheet.

20
00:00:56,218 --> 00:00:59,260
You will use partials to
group related styles.

21
00:00:59,260 --> 00:01:02,240
For example you could place audio
variables inside a partial and

22
00:01:02,240 --> 00:01:05,460
your CSS reset and
base styles inside other partials.

23
00:01:05,460 --> 00:01:09,140
You can create as many partials as you
like while you're writing you CSS and

24
00:01:09,140 --> 00:01:10,975
when it's time to write
your finals CSS file,

25
00:01:10,975 --> 00:01:14,150
Sass will merge the partials
into a single CSS file.

26
00:01:14,150 --> 00:01:17,583
Let me show you how we can break our main
style up into small chunks using Sass

27
00:01:17,583 --> 00:01:18,140
partials.

28
00:01:19,410 --> 00:01:23,850
It's possible to split regular
CSS into multiple files, however

29
00:01:23,850 --> 00:01:28,700
each CSS file creates and additional
HTTP request for the browser to process.

30
00:01:28,700 --> 00:01:31,410
Too many of these request affect
the performance of your site, so

31
00:01:31,410 --> 00:01:33,265
many developer avoid this approach.

32
00:01:33,265 --> 00:01:38,230
Sass partials give you the best of both
world, multiple files to organize your

33
00:01:38,230 --> 00:01:42,480
styles with the performance benefit of
a single production ready CSS file.

34
00:01:42,480 --> 00:01:43,580
You can create tens or

35
00:01:43,580 --> 00:01:46,170
hundreds of partials without
impacting your site's performance.

36
00:01:47,240 --> 00:01:49,730
Using partials is a two-step process.

37
00:01:49,730 --> 00:01:53,040
First, you create the partial
files to organize your CSS

38
00:01:53,040 --> 00:01:54,880
into related groups of styles.

39
00:01:54,880 --> 00:01:58,920
And second, import the partials
into a regular Sass file.

40
00:01:58,920 --> 00:02:01,430
Sass compiles the imported
partial files and

41
00:02:01,430 --> 00:02:03,990
outputs the final CSS into a single file.

42
00:02:03,990 --> 00:02:06,350
So let's start with creating partials.

43
00:02:06,350 --> 00:02:08,880
To create a partial,
simply add an underscore character

44
00:02:08,880 --> 00:02:12,070
to the beginning of the name for
a sass or scss file.

45
00:02:12,070 --> 00:02:16,384
The underscore is when instruct says that
the file should not be compiled into CSS.

46
00:02:16,384 --> 00:02:20,355
So we're gonna break out related sections
of our style sheet into partials and

47
00:02:20,355 --> 00:02:22,690
this will help organize our project.

48
00:02:22,690 --> 00:02:25,730
For instance, variables can be
defined in their own partial.

49
00:02:25,730 --> 00:02:31,278
So I'm going to create new folder
named Partials inside the scss folder.

50
00:02:34,850 --> 00:02:39,860
In the partials folder
let's create a new file and

51
00:02:39,860 --> 00:02:42,846
name it _variables.scss.

52
00:02:49,672 --> 00:02:54,760
Now we'll cut all variables
out of style.scss and

53
00:02:54,760 --> 00:02:58,910
paste them in our new variables partial.

54
00:03:01,750 --> 00:03:06,540
Saving these changes produces an error
in the console and output CSS.

55
00:03:08,800 --> 00:03:13,294
The error says that there
is an undefined variable

56
00:03:13,294 --> 00:03:17,361
of color-text on line 35 of style.scss.

57
00:03:17,361 --> 00:03:21,080
You see,
Sass won't directly compile partial files.

58
00:03:21,080 --> 00:03:24,770
It ignores files with the underscore
character, so in this case,

59
00:03:24,770 --> 00:03:30,730
Sass did not include the context of this
variables partial when compiling to css.

60
00:03:30,730 --> 00:03:33,549
So right now all variables in
our project are undefined.

61
00:03:36,566 --> 00:03:40,817
Saas will compile the contents of
a partial only when you import

62
00:03:40,817 --> 00:03:46,050
it from within a a regular Sass or
scss file using the import directive.

63
00:03:46,050 --> 00:03:51,910
So at the very top of style.scss, I'll
write a comment for our partial imports.

64
00:03:54,790 --> 00:03:59,866
Then I'll import the new
variables .sspartials into this

65
00:03:59,866 --> 00:04:05,971
file by typing @import followed by
the path to the file inside quotes.

66
00:04:12,537 --> 00:04:17,715
When importing a partial, you can leave
out the underscore in the file name and

67
00:04:17,715 --> 00:04:20,400
the .scss word.sass extension.

68
00:04:20,400 --> 00:04:24,560
Just make sure you wrap the file name or
path to the file in single or

69
00:04:24,560 --> 00:04:27,560
double quotes otherwise
Sass will throw an error.

70
00:04:27,560 --> 00:04:30,130
Keep in mind that the style.scss file

71
00:04:30,130 --> 00:04:32,730
does not have an underscore
character in its name.

72
00:04:32,730 --> 00:04:34,120
It's a regular Sass file.

73
00:04:34,120 --> 00:04:39,170
So when we save and compile these
changes the undefined variable error

74
00:04:39,170 --> 00:04:42,590
no longer appears in the console or
the output CSS.

75
00:04:44,040 --> 00:04:48,560
All our rules can now reference the
variables inside the variables partial and

76
00:04:48,560 --> 00:04:50,990
include their values in the output CSS.

77
00:04:52,270 --> 00:04:57,300
Next, let's break out other related
sections of our style sheet into partials,

78
00:04:57,300 --> 00:04:59,630
like the mixins and place holders.

79
00:04:59,630 --> 00:05:03,380
So I'll create a new file
inside the partials folder

80
00:05:04,590 --> 00:05:08,864
named _mixins.scss.

81
00:05:10,110 --> 00:05:15,090
Then I'll select and
cut all mixins out of style.scss and

82
00:05:15,090 --> 00:05:18,447
paste them inside the mixins partial.

83
00:05:24,750 --> 00:05:29,632
You can import multiple partials by
respecifying the import directive, so

84
00:05:29,632 --> 00:05:32,689
for example in style.scss
we can type import,

85
00:05:35,525 --> 00:05:39,774
Followed by partials mixins.

86
00:05:39,774 --> 00:05:43,959
But by now, you know that Sass helps you
to avoid retyping and repeating code.

87
00:05:43,959 --> 00:05:48,530
So of course, Sass provides a shortcut for
grouping your partial imports.

88
00:05:48,530 --> 00:05:54,514
You define just one import directive then
write the files as a comma separated

89
00:05:54,514 --> 00:06:00,331
list I usually place them on separate
lines to make the code easier to read.

90
00:06:04,093 --> 00:06:05,680
All right, let's keep going.

91
00:06:05,680 --> 00:06:09,460
Next, we'll create a partial for
our placeholder selectors.

92
00:06:09,460 --> 00:06:16,821
So inside the partials holder, we'll
create a new file named _helpers.scss.

93
00:06:20,570 --> 00:06:25,445
Then I'll cut the clear fix and
button place holders out

94
00:06:25,445 --> 00:06:30,224
of style.scss and
paste them inside helpers.scss.

95
00:06:32,885 --> 00:06:36,464
And import the new helpers
partial in style.scss.

96
00:06:39,470 --> 00:06:42,300
So I'll replace the semi-colon
here with a comma.

97
00:06:42,300 --> 00:06:47,105
Then on the next line specify
the path to the helper's partial with

98
00:06:47,105 --> 00:06:52,440
partial/helpers then add
the semi-colon to this line.

99
00:06:52,440 --> 00:06:56,340
So by separating our code into
the multiple scss file, so

100
00:06:56,340 --> 00:06:59,230
our style sheet is starting
to look less cluttered.

101
00:06:59,230 --> 00:07:02,485
And you can create as many partials as
you want while building your project, and

102
00:07:02,485 --> 00:07:05,540
Sass will compile them to a single
file to use in production.

103
00:07:08,480 --> 00:07:11,620
You can also import partials
onto other partials.

104
00:07:11,620 --> 00:07:15,210
To make our project even more organized,
let's place

105
00:07:15,210 --> 00:07:19,650
all the main styles written here in
style.scss in a partial of their own.

106
00:07:19,650 --> 00:07:23,240
So in the partials folder
let's create a new file

107
00:07:25,610 --> 00:07:29,840
named _main-styles.scss.

108
00:07:29,840 --> 00:07:33,186
Then I'll go ahead and select and

109
00:07:33,186 --> 00:07:37,847
cut all remaining rules
out of style.scss and

110
00:07:37,847 --> 00:07:41,565
paste them into main-styles.scss

111
00:07:45,030 --> 00:07:47,612
Then will import the file
at the top of style.css.

112
00:07:54,224 --> 00:07:57,284
So now, styles.scss only does one thing,

113
00:07:57,284 --> 00:08:01,800
it lists the partials that Sass
should import and compile.

114
00:08:01,800 --> 00:08:05,880
And because there's no underscore in
the file name it's the file that Sass uses

115
00:08:05,880 --> 00:08:07,680
to name the output CSS file.

116
00:08:09,900 --> 00:08:13,900
On a larger Sass project with dozens or
hundreds of partial files,

117
00:08:13,900 --> 00:08:17,480
you normally won't place all
your partials inside one folder.

118
00:08:17,480 --> 00:08:18,610
You'll likely organize and

119
00:08:18,610 --> 00:08:22,150
sort them into multiple directories
containing several partials.

120
00:08:22,150 --> 00:08:24,940
For example, you may have
a directory containing partials for

121
00:08:24,940 --> 00:08:28,190
your CSS reset, base and
typography styles.

122
00:08:28,190 --> 00:08:31,030
Another directory just for
your layout and component styles.

123
00:08:31,030 --> 00:08:33,660
And one for your variables,
functions, mixins, and helpers.

124
00:08:35,370 --> 00:08:38,650
You could also place all your meta
queries into their own partial.

125
00:08:38,650 --> 00:08:41,890
But I'm going to teach you a convenient
way to manage meta queries with Sass

126
00:08:41,890 --> 00:08:43,260
in the next video.

127
00:08:43,260 --> 00:08:46,893
Now, I'm going to stop here but
you don't have to.

128
00:08:46,893 --> 00:08:51,780
Why don't you practice creating partials
by breaking main-styles.scss out into

129
00:08:51,780 --> 00:08:55,600
other partials for the base,
layout and component styles.

130
00:08:55,600 --> 00:08:57,580
You could even take
things a step further and

131
00:08:57,580 --> 00:09:02,100
sort all related partials into
directory of their own Just remember to

132
00:09:02,100 --> 00:09:06,480
keep your partials simple by only
breaking up related bits of your code.

133
00:09:06,480 --> 00:09:09,661
In the next video,
I'll show you how I organize the files.

134
00:09:11,316 --> 00:09:15,068
It's important to mention, that when
importing partials, the order in which you

135
00:09:15,068 --> 00:09:19,130
import them matters because that's
the order in which they compile to CSS.

136
00:09:19,130 --> 00:09:23,630
So import any dependencies first or a code
that's being referenced in other rules

137
00:09:23,630 --> 00:09:26,940
like variables, mixins and helper rules.

138
00:09:26,940 --> 00:09:30,980
Then input your base layout,
component styles and so on.

139
00:09:30,980 --> 00:09:34,560
I've included links to Treehouse videos
that teach you advanced methods for

140
00:09:34,560 --> 00:09:36,830
structuring your Sass projects
in the teachers notes.