How to compile SASS to CSS

compile sass into regular css format using command line and how to compile sass to css windows and how to compile sass to css in visual studio
LexiWills Profile Pic
LexiWills,United Kingdom,Professional
Published Date:31-07-2017
Your Website URL(Optional)
Comment I Basics've left this page blank to make the page numbers the same in the electronic and paper books. We tried just leaving it out, but then people wrote us to ask about the missing pages. Anyway, Eddy the Gerbil wanted to say “hello.” • 3 Let’s get going. Here’s a quick run-down of what we’ll be going through in the Basics section: • We’ll start by looking at how to install Sass in Task 1, Installing Sass, on page 4, then we’ll look at how to convert a Sass file to a CSS file in Task 2, Compiling Sass into CSS, on page 6. • Check out the next task for how to work with Sass in Task 3, Using Sass with Rails, on page 8. • If you’re not familiar with the command line, we’ll look at a great Sass interface in Task 4, Avoiding the Command Line: Using Scout, on page 10. • We’ll look at how to do comments in Sass in Task 5, Commenting, on page 12. • Then we’re going to look at the idea of scoping and how this is much simpler in Sass. Scoping is introduced in Task 6, Selector Scoping, on page 14; we expand upon it in Task 7, Going Further with Advanced Scoping, on page 16. • Learning how to change the exact CSS produced from your style sheets is covered in Task 8, Altering the CSS Output, on page 18. • Then we’ll move on to variables in Task 9, Defining Variables, on page 20. • We’ll put the skills we learned about variables to use in Task 10, Calculating a Layout, on page 22, and Task 11, Creating Themes with Advanced Colors, on page 24. • Next we’ll look at how importing can keep your style sheets cleaner and more semantic in Task 12, Importing, on page 26. • In the last tasks, we’ll look at a couple of ways you can use importing in Task 13, Building a Font Family Library, on page 28, and Task 14, Resetting CSS, on page 30. • Basics 1 Installing Sass So before you can explore the simplicity (and beauty) of Sass, you’ll need to set a few things up. It’s useful to have a folder where you keep all your Sass files for a project. Creating a Sass file couldn’t be easier: just use the extension.scss—or.sass for an Original Sass file. The only tool you need is a text editor. Every OS comes with something, but of course that’s not always the best something. Generally, just use whatever you usually use to write CSS. We recommend some text editors with each set of installation instructions. In order to install and run Sass, you need to have Ruby installed on your system. We’ll go through how to do this in the three major OS categories. If you’re not comfortable with the command line, you may want to check out Task 4, AvoidingtheCommandLine:UsingScout, on page 10. Installationon Windows Because W indows doesn’t come with Ruby, you’ll need to install it. There are a few installers around the Internet, but we prefer the simple 4 one at RubyInstaller. Once Ruby has been installed, you need to access the command line. Go to Start, then Accessories, then find Command Prompt. That should open a window that will allow you to run the needed install com- mands. A decent text editor for W indows is Notepad++. InstallationonaMac Unlike W indows, Ruby is already installed on OS X, making things a bit easier. Allwe need to do is open theTerminal application and install Sass via the command line. The text editor that we use on our Macs is TextMate. InstallationforLinux If you’re a Linux user, you’ll be aware of how to access your command line—we won’t insult your Unix-fu. To install Ruby (and Ruby gems), use your package manager. We recommend Ruby version 1.9.2. As for text editors, V im tends to be the most popular. 4. report erratum • discussInstalling Sass • 5 ➤ Use this command to install Sass. geminstallsass ➤ Create a simple Sass file. Name a filetest.scss with the following contents: .red color:red; ➤ Test that Sass is working. Navigate to the folder containing thetest.scss file via the command line and you should see the following if you run the commandsass test.scss. sasstest.scss .red color:red; It just reformatted the CSS we wrote above. Now we’re ready to show you how to rock some Sass superpowers. report erratum • discuss6 • Basics 2 Compiling Sass into CSS We’ve introduced the idea that Sass is an advanced version of CSS. As a matter of fact,anyvalid CSS isvalid Sass. Sass just adds features on top of CSS—it’s a kind of meta language. Unfortunately at this point, no browsers support Sass files directly, so we have to convert from Sass into CSS first. The basic gist is that we write some Sass and then wecompile—or convert—Sass into CSS. How do we compile Sass into CSS? Well, you did it in the last step ofTask 1,InstallingSass, on page 4, but we didn’t use any of the extra powers of Sass, so the results were pretty similar. Let’s run through how we can convert a Sass file into a CSS file again in a lot more detail than we did in the last task. First, we need to create a Sass file. Any old thing will do—this is just to show how we can turn our Sass into CSS. Since CSS isvalid Sass, take any random CSS file you have sitting around and change its extension to.scss. Now, let’s go to our command line. Typesass, followed by the name of your file. Look at that Oh right, it just printed out the CSS but in a different format. And printing out your CSS files to the console isn’t very useful. It would be better if we could make a separate CSS file. Well, you can Run thesass command again with a second argument that specifies the output file youwant. For instance, you might say sasstest.scsstest.css and Sass will generate a CSS file namedtest.css. Running that command over and over would be extremely tedious as we edit our Sass file. If you are using Rails or another framework, it can automatically update your CSS for you. But when we aren’t using a framework, we have a neat command-line trick for converting Sass files into CSS files as we alter them. It’s calledwatch. watch will take any.scss file found in the specified Sass folder and convert it into a.css file in the specified CSS folder. Magic It doesn’t just do this once either. It constantlywatches the file for any changes and incorporates them into the CSS file. Another useful command to mention here isconvert.You can use this to turn a.css file into a.sass or.scss file. report erratum • discussCompiling Sass into CSS • 7 ➤ Start with a simple bit of Sass. .fab_text color:336699; font-size:2em; ➤ Type this in your command line. sassfabtext.scss You should see the following: .fab_text color:336699; font-size:2em; ➤ Watch a folder. Assuming we have a Sass and a CSS folder, the command would look like this: sasswatchstylesheets/sass:stylesheets/css ➤ Convert a CSS file to a Sass file. sassconverttest.csstest.sass Related Tasks: •Task 8,AlteringtheCSSOutput, on page 18 report erratum • discuss8 • Basics 3 Using Sass with Rails Sasswas originally built to work with Rails, and it’s painfully easy to use with the popular Ruby web framework. If you don’t use Rails, then move on to the next chapter, where we’ll show you an easyway to work with Sass files on your computer. The only difficult part is dealing with the slight differences between Rails versions. But read on, brave reader, and we’ll get you sorted out. If you are using a Rails version previous to 3.0, then all you need to do to get Sass working with your Rails application is to addconfig.gem 'sass' to yourenvironment.rb file. If you place your Sass files inside of public/stylesheets/sass/ (yes, make sure to make the directory), then they will automatically get compiled to CSS in thepublic/stylesheets/ folder. In Rails 3.0 the process is very similar, but instead ofconfig.gem, we use theGemfile and add the linegem'sass'. Bundler makes it easy, as usual In Rails 3.1+, Sass is included SeriouslyYou don’t have to do anything specific. Just installing Rails 3.1 installs Sass, but the process for working with Sass is a little different due to the introduction of the assetpipeline into Rails. The asset pipeline includes both Sass and CoffeeScript, a Javascript replacement language that supports many advanced features like asset compression, bundling, and more. Cover- ing these features is outside of the scope of this quick book, but in general Rails will generate an.scss file with every controller and will place it inapp/assets/stylesheets.You can find out more about Rails 3.1’s 5 asset handling at the Rails site. 5. Rails Edge Guide to the Asset Pipeline: asset_pipeline.html report erratum • discussUsing Sass with Rails • 9 ➤ Install with Rails older than 3.0. Add this line to yourconfig/environment.rb file. config.gem'sass' Since we aren’t using Bundler here, you have to make sure the Sass gem is installed on your system, which we cover inTask 1,Installing Sass, on page 4. geminstallsass ➤ Install with Rails 3.0. Add this line to yourGemfile. gem'sass' Then make sure to runbundle bundleinstall ➤ Use on Rails 2.0 or 3.0. First, start up your Rails server. Then, create apublic/stylesheets/sass/ap- plication.scss file and put some simple SCSS inside it. .worked width:100; If you load a page on your Rails application, thenpublic/stylesheets/ap- plication.css should contain the exact contents asapplication.scss. It will auto reload this file every time you make a change to the SCSS file. So make sure not to edit the CSS file or else you will be sad when it gets replaced report erratum • discuss10 • Basics 4 Avoiding the Command Line: Using Scout So far we’ve been using the command line to generate our CSS from Sass. However, not everyone is comfortable using the command line. A great app to help you use Sass (and Compass, a tool we’ll come 6 across in Part III,Compass, on page 59) is Scout. Scout is a graphical user interface (GUI) that automatically sorts out all the Ruby installation stuff we’ve been describing in the previous tasks.You don’t need to know about the command line at all. Once we’ve downloaded Scout, we just import our project file. We specify the input folder, which is typically our Sass folder. Then we specify the output folder, which is usually the stylesheet folder. Hit the play button, and Scoutwatches your Sass files. As soon as you make a change to a Sass file, Scout notices and updates the corresponding CSS file in your output folder. It’s really that simple 6. report erratum • discussAvoiding the Command Line: Using Scout • 11 ➤ Import your project and set up your input and output folders. ➤ Scout logs your changes. report erratum • discuss12 • Basics 5 Commenting Comments are snippets of text that are ignored by the browser. Sass gives us the option of two types of comments. One will only show up in the Sass document, and the other will be incorporated into the CSS that’s compiled. The comment style that’s compiled into the CSS is the same one you’re probably used to—in fact, it’s exactly the same as the CSS comment style. Just place your comment between/ and/. These comments can be on multiple lines. If wewant to write a comment that will only appear in the Sass file, then we place the comment after//. This style only works for single- line comments, though. report erratum • discussCommenting • 13 ➤ Use two different styles of comments. Download basics/comments.scss /Heylookatthismultilinecomment thatwewanttoshowupinourCSS output./ page color:black; //Thesecommentsaresinglelines //andwedonotwantthemtoappear //inourCSS sidebar color:336699; This compiles to: /Heylookatthismultilinecomment thatwewanttoshowupinourCSS output./ page color:black; sidebar color:336699; report erratum • discuss14 • Basics 6 Selector Scoping Let’s look at a core feature of Sass: nesting. If you’ve been working with CSS for a long time, you know the advantages of giving more specific selectors to your style sheets. Using.sidebarpem allows you greater specificity to theem element versus a standaloneem selector. It gives you more freedom with reusing names and making your HTML more semantic and readable. We generally refer to this as scoping. It’s a good thing to scope, except it’s not DRY. (Remember Don’t Repeat Yourself?). We keep having to repeat our classes or IDs—for example, repeating an apply-to-all class like.infobox—on every line. Typing this by hand is laborious and makes uswant to be lazy. When writing CSS, scoping can be very tedious. It involves a lot of copying and pasting. What’s more, keeping track of parent-child relationships is tough. We can do better than that Technology should support good behaviors. Sass is here to help us withnesting. We can put a style such as a border colorinside a declaration block, and Sass will automatically do the repetitive part for you when you generate CSS. I bet your fingers are thanking you already for saving all that typing. Cool, huh? A small note: the CSS that’s compiled in the example opposite looks a bit funny, doesn’t it? Especially when we compare it to the original (repetitive) CSS example we wrote out. What happens is that the Sass engine keeps the indentation when it converts to CSS. All it does is insert the missing selectors. report erratum • discussSelector Scoping • 15 ➤ Look at this scoped CSS. Look how much repetition there is in this file. Holy cow Download basics/scoping.css .infoboxwidth:200px; .infobox.messageborder:1pxsolidred; .infobox.message.titlecolor:red; .infobox.userborder:2pxsolidblack; .infobox.user.titlecolor:black; ➤ See it in Sass. Instead of repeating it, just nest it inside the parent selector. Download basics/example_nesting.scss .infobox width:200px; .message border:1pxsolidred; .title color:red; .user border:2pxsolidblack; .title color:black; This compiles to: .infobox width:200px; .infobox.message border:1pxsolidred; .infobox.message.title color:red; .infobox.user border:2pxsolidblack; .infobox.user.title color:black; Related Tasks: •Task 7,GoingFurtherwithAdvancedScoping, on page 16 •Task 8,AlteringtheCSSOutput, on page 18 report erratum • discuss16 • Basics 7 Going Further with Advanced Scoping In the last section, we introduced simple nesting. Just throw a selector inside a declaration block and BAM It automatically scopes the style as being the child of the parent. However, sometimes we need to be more explicit. The last example w e gave didn’t specify that the children weredirect children. In standard CSS, we specify this directness as parentchild. If your CSS is rusty, that means finding a tag named child who’s exactly one level inside of aparent tag. Using these kinds of CSS operators is as simple as you’ d hope. Just start the child selector with the operator youwant. So the child would be defined aschild inside of theparent definition. Using nesting is a greatway to organize your styles. It means that all of the related styles are grouped together. By default, every child selector is the parent selector plus the child selector. In situations where w e want to do something more advanced, w e use the& selector. Simply put,& means “the parent selector.” Don’t look scared. It’s easy stuff once it clicks. Oftentimes, we use a bit of Javascript to add classes to thebody tag based on what browser the user is using. For instance, if you visit with Safari, the body will have the classes .safari and .webkit. So when we’ re styling the sidebar, we mightwant to add a rule that says, “If the body tag has this class, apply this rule,” and it would be nice to have this code near all the related rules. So if we’re inside of.sidebar.item and then we write the child selectorbody.webkit&, Sass will compile into body.webkit.sidebar.item. The ampersand got replaced with.sidebar.item, whichwas the parent’s scope. If it’s still a bit foggy, read over the examples. Then it should click. It really is simple report erratum • discussGoing Further with Advanced Scoping • 17 ➤ Define direct ancestors. Download basics/direct_ancestors.scss .infobox .message border:1pxsolidred; .title color:red; .user border:1pxsolidblack; .title color:black; This compiles to: .infobox.message border:1pxsolidred; .infobox.message.title color:red; .infobox.user border:1pxsolidblack; .infobox.user.title color:black; ➤ Use the magical &. Download basics/ampersand_example.scss .infobox color:blue; .user& color:gray; .message color:gray; &.new color:red; .infobox .user&.message content:"Selectoris'.user.infobox.message'"; This compiles to: .infobox color:blue; .user.infobox color:gray; .message color:gray; color:red; .user.infobox.message content:"Selectoris'.user.infobox.message'"; report erratum • discuss18 • Basics 8 Altering the CSS Output When you compile your Sass, a CSS file is generated. But what if you want that CSS file to be in a slightly different format? We have a few options to choose from. This means you can have your CSS output in a style thatyou prefer. In the command line, you can type this: sassstyle Follow this with the name of the style youwant. The four options we have are called nested, expanded, compact, and compressed. Nested is the default output style. It looks very much like regular CSS, with curly braces and semicolons. Expanded is, as its name suggests, an expanded form of the CSS output. All classes—including nested ones—expand rather than remaining nested in their parents. Both nested and expanded styles are probably the easiest to read, but they also have the largest file sizes. Compact puts all the properties of a selector on one line so it’s easier to scan down a list of selectors. Finally, compressed is possibly the most difficult to read. All spaces are removed, so the CSS sits on one line. This makes a compressed CSS file the smallest, which is great for mobile devices, for example. report erratum • discussAltering the CSS Output • 19 ➤ Check out the Sass we’ll be compiling in each case. Download basics/outputs.scss .infobox .message border:1pxsolidred; background:336699; .title color:red; ➤ Nested (the default setting) looks like this. .infobox.message border:1pxsolidred; background:336699; .infobox.message.title color:red; ➤ Expanded looks like this. .infobox.message border:1pxsolidred; background:336699; .infobox.message.title color:red; ➤ Compact looks like this. .infobox.messageborder:1pxsolidred; background:336699; .infobox.message.titlecolor:red; (The first declaration should be on one line.) ➤ Compressed looks like this. .infobox.messageborder:1pxsolidred;background:336699 .infobox.message.titlecolor:red (The compressed output didn’t fit on one line in the book, so we had to create another one. In the real thing, though, it is all on one line.) report erratum • discuss

Advise: Why You Wasting Money in Costly SEO Tools, Use World's Best Free SEO Tool Ubersuggest.