Compile a Directory of Sass Files3:21 with Guil Hernandez
You'll often work with multiple Sass files consisting of a number of different stylesheets and directories. Sass lets you compile dozens of individual Sass files into a single, compact CSS file.
To help a team track their styles in an organized way, developers often work with 0:00 multiple Sass files consisting of a number of different style sheets and directories. 0:04 For example, its comment to divide your style into separate files based on 0:08 their function. 0:11 The sites main style in one file, layout related styles in another file and 0:12 typography styles and yet another. 0:17 Normally you wouldn't want dozens of style sheets for a site since each file means 0:19 another server request which can slow down your website, however, Sass let's you 0:23 compile dozens of individual Sass files into a single compact CSS file. 0:27 Since you're working with two different types of files, 0:32 it's best to organize them in two separate directories. 0:34 A directory containing your working SCSS files and 0:37 another that holds your final CSS output. 0:40 You'll usually instruct Sass to autocompile a directory of Sass files 0:43 into one output.css file. 0:46 In the workspace, let's create a new folder for our Sass files. 0:48 Developers commonly name this folder SCSS. 0:52 Now let's place input.scss inside this new folder and 0:56 rename the file style.scss. 1:01 Now, let's create a folder for the output css. 1:14 We'll name it css. 1:16 You no longer need the output.css and output css.map files, so 1:19 you can delete them from your project. 1:24 sass will auto generate a new CSS file and map for us inside our CSS folder. 1:26 Now over in the console run the command sass --watch 1:37 followed by scss:css and with this command, 1:44 we are instructing sass to watch the scss directory for any changes to the working 1:51 scss files, then output those changes into a style feed inside the css directory. 1:57 Once you run the command and refresh the workspace sidebar, 2:04 you'll see that even though we didn't create or specify an output css file, 2:09 Sass generated the output file style.css as well as 2:14 style.css.map inside the css folder. 2:18 Now, we're going to work with just one file. 2:24 inside the SCSS folder for now but in a later video you'll learn how 2:26 Sass can combine multiple SCSS files into one output SCSS file. 2:31 And since we renamed our files and placed them inside folders 2:37 we need to update the output CSS path and file name and index dot HTML. 2:40 So I'll change the third links tag, href value 2:45 to css/style.css. 2:51 And now we're all set. 2:58 Once Sass begins watching your files for 3:00 changes, you're pretty much done using the console. 3:02 Just make sure not to close it because that will stop the watcher and 3:05 the compelling of Sass to css. 3:07 And if you prefer not to use the command line there are a few 3:10 good desktop applications that will get you up and running with SAS in no time. 3:13 I've posted links to many of these tools and apps in the teacher's notes. 3:17
You need to sign up for Treehouse in order to download course files.Sign up