Become a CSS Superhero With Stylus

2.2 Terse or Full Syntax, Your Choice

Hello, welcome back to Become a CSS Superhero with Stylus. In this lesson, you're going to learn about Stylus' flexible syntax options, which will allow you to write in full CSS format, or something called terse syntax, or anywhere in between. Now, the best way to explain what all of that means is just to show you in action. And what you see here is just some really simple code. [BLANK_AUDIO] And as I know you are familiar with CSS, you will understand what you are looking at here. But this code is written inside a Stylus file. [BLANK_AUDIO] And Stylus is fully capable of compiling code that's written just as you would write CSS. Now, if I save this file, this is being sent out to auto compile using Prepros as you saw in the last video. So, I will save this. And this is our resulting CSS. And you can see it's been able to format it just fine. So, if you're a little bit nervous about changing up the way that you write CSS, but you still wanna be able to take advantage of a preprocessor, then you can do that inside any of your Stylus files. You don't have to use any special settings. You don't have to switch on any particular kind of syntax. And you can just use the same file extension. Stylus will still be able to work with this fully formed CSS syntax approach. Now, that's really good for you if that's how you like to write code, or even if you just need to put in a big chunk of CSS right in the middle of one of your Stylus files. But you also have other options. For example, you don't have to use curly braces when you're writing Stylus, these little thingies here that you use to open and close any bunch of CSS. So, let's see what happens if we just delete these curly brackets. [BLANK_AUDIO] Now save. And that has been successfully compiled. Now, other preprocessors would throw an error if you had this particular type of formatting. But with Stylus, that still produced the exact same CSS, which is really, really cool. You don't have to just stop there. You can also omit the semicolons. So from the end of each line, I can delete these semicolons. And now if I save, again, successful compilation. And one more step. You can even drop the colons. [BLANK_AUDIO] And again, if I save, once more, that is successful. Now, what you have ended up with here is what we were talking about earlier with the term terse syntax. So terse just means short, concise. And this is about as short and concise as, as it gets with writing CSS. You haven't had to write in any of the punctuation. All you have to do with this terse syntax is make sure that you're using tabs to indent all of your individual lines of CSS within a style.. So you could see here, these are tabs. Now sometimes, you might accidentally put some spaces in instead of tabs, say for example, if you've copied and pasted code from another file. And if you do that, you might get some compilation errors sometimes. If that happens, the way you can double-check to see that you've got tabs and not spaces is to highlight this little gap in front of the line. And if it's spaces, you'll see little dots instead of this little line. And in Sublime Text, you can fix that easily just by selecting all of your code and going down here to where it says Teb Size 2, clicking that, and saying Convert Indentation to Tabs. And you can see that then has corrected it. But that's the only thing that you have to be careful of with working with terse syntax. But again, if that bothers you, if you don't wanna have to worry about that, then you can just use the full CSS formatting style instead. And you can also mix and match these things. You know, for example, you might have accidentally out of force of habit, or again, from copying and pasting something over, you might have accidentally left a semicolon in. So if you do that, that's not gonna be the end of the world. Save and it still compiles just fine. [BLANK_AUDIO] At the same, the same token, you could also write in some full CSS, like for example, you might have a, a bunch of CSS that you are bringing in from an old project and you don't want to rewrite it in Stylus format. So, .oldstyle, background-color: black. And again, that's compiled perfectly fine. So you've got a lot of options. You might prefer to user the terse syntax all the time, but like to have a little bit of room for errors, or you might need to mix and match these things. Or you might like to just do fully formed CSS formatting all the time. So you've got a full range of choices, and you can go with any one at any given time, depending on what you need. So that's Stylus syntax, and in the next lesson, you're going to learn about Stylus nesting, which gives you a really easy and really quick way of targeting child elements and pseudo elements. All right, I'll see you there.