3.1 Day 1: Syntax

Welcome to day one, where you'll learn about the difference between the Sass and SCSS syntax, comments, and general guidelines for proper syntax. Let's begin, this language has two syntaxes, basically. There's the SCSS, or SassC CSS, which is the newer one. And there's also the Sass Syntax, which is the older one. And both of these have corresponding file name extensions, .scss and .sass. Now, let's see about the main differences between the two. First of all, it's the SCSS and this one Is an extension of the syntax of basic or plain CSS. So every valid CSS style sheet is also a valid SCSS file. That means that in a valid SCSS file you can just write plain CSS. So you can do stuff like body, background color, white. This is valid, all right and it compiles to this bit. Apart from this of course Sass is an extension of CSS. So you can do a lot more with it. You can have variables, you can do nesting, you can do operations and all that good stuff. So, coming up, lets see some sample Sass code. Now, this might seem complicated because there are some notions here that you have not learned just yet, for example variables and nesting. But I just want to go over the syntax and how it's different from the Sass Syntax. So first of all, this is how it compiles. As you can see here, just regular plain old CSS. And the way we write this is exactly the same as CSS. We use semicolons to separate properties and we use brackets to make nesting possible. So these properties are for this selector. Now Sass, on the other hand, the other syntax, uses indentation instead of brackets to show these selector nesting. So just by doing that, It's not compatible with CSS. Also, instead of semi-colons, Sass uses new lines to separate properties. So, let's take this code and let's put it in our Sass file here and let's do the necessary changes. So, all the semicolons are gone. So as you can see, in using the CSS syntax, we can do this. But we cannot do it in the Sass syntax. So we gotta use a new line to separate these two properties. And the other big change is the fact that we don't need these brackets. So let's select them, delete, and let's also delete the closing brackets. So, as you can see here, we are using indentation to show selector nesting. So, these properties belong to the selector. This property here belongs to this selector and so on and so forth. So, now we can actually save this and we can have a look at the generated CSS. And if we compare it with the one compiled from the SCSS file, you'll see that they are exactly the same. So it doesn't matter how you write your code here, what kind of syntax you are using, the resulting CSS will be the same. Now another difference between these two syntaxes is how you write comments. Because in CSS this comment right here will be considered perfectly normal, and valid. In fact, this is how you write comments in CSS. Now this type of comment, if you write it in SCSS syntax, will be compiled to CSS, it will be shown. But you can also write a comment like this, using the double slashes. Now, this bit will not be compiled to CSS. So if we take a look here, we don't have that comment. The same goes for Sass, for the Sass syntax. If we write a comment like this, this will also not be compiled into CSS. Now, in both of these syntaxes, you can use something called multi-line comments and in SCSS, it goes something like this. You would start with this, slash start, and you would end it with star slash. It doesn't matter how many lines you have in between. Now this will be compiled to this, as you can it's exactly the same. You can also do this in the Sass syntax, but there is a difference. Here you can use indentation to show nesting, so you would do this. As you can see here, I have one tab, and everything that is indented under the start of the comment will be considered a multi-line comment. There is no need to put in the star slash to end it, as you can see here. Now, you can also do this multi-line comment, if you don't want it to be rendered in CSS. So for example, here I can say something like this, and then I can select these two, and just indent it. And I'm going to have multi-line comment that is not rendered in CSS. Now finally, the Sass syntax allows you to do something different as well. For example, here instead of, margin, colon, and then the value. I can have, colon, the property, and then the value. This is also valid syntax but only in Sass. As you can see, this compiles to the exact same CSS. So you can either do it the traditional way, or using the colon right before the property name. And these are the main differences between the two syntaxes. Now feel free to use whatever you want. I'll be using SCSS throughout this course and I recommend you do the same. Because the SCSS syntax Is closer in form to regular CSS. So, I think it's much easier to learn. Now, for your exercise, you will have an SCSS file with some SCSS code in it. And your task is to translate this using the other syntax, the Sass syntax. The condition is that on at least two properties, you decide which one, you have to use the alternative property syntax. Okay, those are the basics of Sass syntax. Day two is about a very important aspect of Sass, which is nesting, see you then.