Join John Riviello for an in-depth discussion in this video Convert CSS to SCSS, part of CSS to Sass: Converting an Existing Site.
- Now that our project is set up for rapid development by using grunt watch to compile our Sass files, we can move forward with converting our CSS to SCSS. I'll quickly touch on the differences between Sass's two syntaxes, show you a tool to automatically nest your Sass and discuss if you want to do that or not. The original syntax of Sass includes no curly braces, no semicolons and uses indentation to delimit block of styles. It's more concise, but since it does not look like CSS, some beginners find that this is a turnoff.
I was no exception when I first started using Sass. SCSS on the other hand looks exactly like CSS, so much so that you can take your CSS files, move them to your Sass folder, change the extension to SCSS and you have valid SCSS. Of course that's not taking advantage of any of Sass's features yet, but it's developer-friendly. So for your first commit of an SCSS file, you can do just that. One feature of Sass that is pretty powerful is the ability to nest your rules. The Ruby version of Sass actually comes with a commandline tool to convert your CSS to SCSS and automatically add nesting to the SCSS files.
But currently, that does not exist in LibSass. However, there is an online tool that provides the same functionality and it's available at css2sass.herokuapp.com. It's pretty straightforward to use. Let's walk through it together using the CSS from our sample H plus sports website in our exercise files for this video that was created by staff author Ray Villalobos, whose name I'm sure you've come across if you've watched any other front end web development videos in the library. In the exercise files, go to the assets, css folder and open up the styles.css file.
Select all with Command A, copy it with Command C and then let's go over to our browser and we'll paste it in with Command V on the left-hand side here. Hover over the arrow in the middle here and then choose the SCSS link that appears. Click it and you end up with nested SCSS on the right. Let's select all of this, copy of it and back in Sublime, we're going to open up our Sass file, which I've added for you already as a blank file and paste it in there.
Just don't blindly use the tool though as although it will generate the same styles for you, it may alter your selectors a bit. For example, if you have multiple selectors of the same block of styles, and then one of those selectors is used separately, as we do in our CSS file with the sub and sup selectors here, it will duplicate each selector in the multiselector block style and add the additional styles instead of maintaining the multiple selectors. So if you look at the sub and sup in the SCSS file, you can see what I'm talking about.
I'll put these files side-by-side to make it clear, so I'll hit Command Option two and drag that over. And you can see how it changed our CSS originally here to the resulting SCSS. It's exactly the same as far as what the browser is going to render, but we could optimize it a bit. I prefer to maintain the multiple CSS selectors for the individual style block since it usually results in less text being output when the Sass is compiled to CSS.
So after you run the tool, it may require some manual adjusting to get it where you like it. If you have a large amount of CSS you're converting, you may want to skip this automated step entirely and just add nesting as you wish later on manually. In our example, there are only a few cases so we'll adjust them now quickly. We'll start here with our sub and sup, so I'll copy them from the CSS, and I'll paste that here in the CSS. I'll adjust the indentation there and then for this sup below, we just need the top values since all that is shared above.
Other spot this happens is down below here. So we have this webkit appearance button and cursor pointer and a couple of spots here that are all in the SCSS covered by this one line of selector. So there's four selectors there. We can just copy this from the CSS and paste it in the SCSS. Just below that, we see the border and padding are set in multiple spots here, and that selector is right here so I'll go ahead and I will copy that.
Now in this case, we still need to maintain the input selector because these are being used below. So I'll just paste that above here, adjust the indentation and I'll remove this moz focus inner input from right there. Here's one more spot, we have multiple box sizing inherit for what was just a few selectors right there. So I'll copy these from the CSS if we write the SCSS. And the last spot is down at the bottom where our modal is.
So here, we can see height, width, top and left were set for modal mode or backdrop while there are multiple ones. In the SCSS, so again, I'll copy from the CSS. And in this case, I'll paste it above that because the backdrop has some additional styles. And the modal, we can remove those from here, and then I'm just going to take the modal-specific styles which are right now below the backdrop, cut those and paste them at the top of the modal so it's in the clear order.
Also, there's the potential for comments to end up out of place, and that's what's happening here with our branding comment. If we take a look back at our original CSS and search for that, we can see it was added to signify the end of the branding styles. So I'll put that back where it belongs. So I will select it in the SCSS. I will cut it, and then I assume the branding style will be up here a little bit. There it is. So I'll add a line for that and add the branding style.
Then I'll be sure to save my file with Command S. As great as nesting is, I do want to point out a couple of potential issues with nesting. First, when you're writing new Sass code, it's easy to get carried away with nesting and go many levels deep. This typically results in bloated, unnecessary CSS. So it's best to follow what's known as the inception rule, which was coined on this article on the Sass way. The rule states that you should never nest more than four levels deep. I agree and recommend that you follow this as best you can.
Additionally, now that you're using nesting to create selectors, you're generating selectors for browsers to use that don't exist in your actual Sass source code. So if you're used to inspecting the element with the browser's developer tools, copying the selector and searching for it in your code base, your searches will come up empty if the selector was generated due to nesting. This sways some developers away from using nesting at all in Sass. I personally still enjoy the organization and reduced typing nesting affords, and with the debugging techniques that Sass offers, you can be working just as fast as you were with vanilla CSS.
In these Sass tutorials, students will learn the benefits of libSass over the original Ruby Sass, and set up a Sass-friendly development environment with Node.js and Grunt. A unique aspect of this course is learning how to handle challenges specific to integrating Sass with an existing website, such as new debugging workflows and the variables and mixins worth the effort to define. Author John Riviello also introduces a few Sass tools that speed up media query handling, automatic browser prefixing, and sprite generation. At the end of the course, he shows how your setup work pays off, styling a whole new section of the practice site in just 15 minutes.
- Deciding between Ruby Sass or libSass
- Installing Node.js and Grunt-Sass
- Converting CSS to SCSS
- Creating core variables and mixins
- Abstracting units and values
- Applying advanced mixins
- Generating image sprites with eyeglass-spriting
- Creating high-DPI sprites
- Building new styles