SASS Crash Course | Tilly Wittrup | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (30m) View My Notes
    • 1. Introduction to SASS

    • 2. Install atom

    • 3. Install Visual Studio Code

    • 4. SASS First line of code

    • 5. Nesting in SASS

    • 6. Imports in SCSS

    • 7. Extend SASS

    • 8. Variables in SCSS

    • 9. Maths in variables


About This Class


Everything you need to know about SASS and folder structure

If you want to learn about SASS and how to use it to improve your readability, scalability and the structure of your CSS code to help you build beautiful, modern websites, then this course has the content you will need!

What you will learn and achieve after finishing this course:

  1. Learn what SASS is and the difference between SASS and SCSS syntax.

  2. Improve the structure and readability of your CSS code.

  3. Implement variables into your code and perform mathematical operations.


1. Introduction to SASS: Hello. Welcome to discourse on this course. Ricana learned basic off cess. Um, slash issues is so what we achieved in discourse and this question won't become an expect in s uses, and you will be confident in wiring Coast in its uses. I am to just Web after confusion, and we have excuses. And then we have says I am obsessed is his own Styx should Langridge and and issues this is another one. So basically, if you look at it from this perspective that says has a difference in text just lying, you can have a script and you can have Pete fee have due to difference in Texas. And that's basically the difference which you will learn about in the next lecture. And so excesses a style sheet language as mentioned, which is, um, an extension off CSS is like allowing you to where she says code as an actual programming language and allow you to structure the code way more and way better. And then they consist off to sin. Texas, which assess and excuses, and the reason why it's important to consider using his thesis assess is because it's used by most companies and and again. It will help you to it. Organized your CSS CO So is more structured. Makes more sense. When you have 1000 of lives of she assists, Cody will make more sense use. And CS is basically structure code more and And it has a lot of help of functions. Like for somebody can poem, um, mathematical creations in you're cold. And then it would just basically trans pile it into CSS files. Transpiring is when you have. If I for some motor issue says it will basically convert anything inside did that s uses file into a CSS file, then you will be able to use this uses underground because, says houses no support to. But Grassley, your brows won't understand. Um, that s uses that are successful. So you will need to transfer pile it to a CSS file that will allow you to and the farm big sexing systems you would have wouldn't normally, but it will just be in s uses foul and more organized. So what Experience issue crying too. Start this course. You only need to be able Teoh understand the basis of hate email and see asses to start with discourse. And that's basically it and half a section including discourse So you won't be able true installed. It takes time. Well, you're in the course. And you also then very few faces thing about terminals. If you don't already know it, you can just get that. And so thank you very much for watching dispersed later. 2. Install atom: hello and welcome to this video. So in this video, we're gonna install ate him and recon Estonia's on both Windows, McElroy's and V necks So it works, and pretty much every rating system that you would imagine it would be using. You can go into your package if you want to, and even install external package like something that Waas extends the functionality of PHP . Like for some a PHP de Baca similar things. And you can go into themes and installed material team instead. If you want to, it's all up to you. So it's really functional coated inside where people can make their own package Donald up your package and then extended in this course. We're not gonna install any third parties in the editor we're just gonna go with Then they won't eight a militar field because so when this is opened up, we have just filed and we drag it inside of cases. Fiona, while you have this installer and when you hope my job, we won't have this window. And then you can basically go from there and over fouls. Ah, make a new foul and it is quite easy to your site. You can go here. You foul Just remained control, depending on what? Over in operating system. Young to make a new foul. Uh, Cindy? Oh, uh, open bar, controlling it. And that's it for this video. Thank you for watching. 3. Install Visual Studio Code: handwork into this videos and this, really we're gonna install missile studio code in this course, we're gonna use a team fraud cars, but you are welcome to use any other. Eat it. So you want I'm just gonna give you some examples of how to install them. And it made it sense to commute so you won't find the thing that works best for you. So you stumble visual studio code, you need to have Vienna X windows are make, and in this case, we can install it on a Mac and you just keep found out, you open to file, and then we're gonna wait for it to come in here, and then we're going to place it in Sanctification folder, dissipate Speaker and then inside he really just open it, and then it will open up with default windows. And, of course, if you are a regular Matthew, so you will notice that it won't ask you if it's on Dwight, term it for the first time, at least, and then you have ability to create a new file open far normal workspace. I am search for things we place it. Beijing controlled parking download extensions and so on. So this is really great, editor. But again, we're not gonna use this discourse. And but you can use any It'll tell you want to and even thought I wouldn't recommend it if you wanted to use something like and just a normal take stated that doesn't do highlighting . You could do that again. Stony. Wouldn't we commend to do that? But you could do that. And you can also use anything online and using online. It's under because it owner crafts half the ability to install sets or half sets and sort of. And so therefore, if you are facing on a crew book, you could go to the Internet and you something that count mine are coat anywhere AM and then use that to due to programming in your is. That am because then it will be we ease of you and thank you for watching this video 4. SASS First line of code: Hey, and welcome to this videos. In this video we're gonna transparent at the excuses fall in tow dot CSS file and create office piece of says code. So what we're gonna do is we're gonna create our investigation awful inside here. We gonna have Hey, Jamaat, Devon end with hello world. And then we can link Teoh the style sheet we're gonna have soon. I am. We're gonna have it inside in ceases folder index stuff uses, and then we're gonna have a paragraph with Hello? Well, which is the finger gonna stall now? Remember that Browse up only taste in CSS house. It doesn't take incest files. So that's why we have you're gonna have to countries we're gonna have one cold CIA says Then we're gonna have one call sis inside. All Cecil we can create to foul. Where were you actually write out of house styles. So in here for simple saying terribly, that's a fun size 50 pixels. And then what it would do is just like normalcy says, Make this to make sense of 40 pixels, whatever you choose. But what is important to remember? Here's if we linked to just to show you so this? Yeah, And just and change its white. Finding him if we link in here to this found it won't work. So do you. See, that's no changes. And you'll probably also see inside consoled eyes in Iran because it can. We know the resource is so we can't just low to this one here. We can instead do something like she says. Index. Yes. Use it and then we can go in here. So what we're doing right now just to show you what happens this we watch our index. That issue said every time we make a change, it would take inside Rosalia. Then it will come transplant it into in taste of Seuss's. So it will make a new one him and objectify every time you safe some changes inside here. So just to show you that it works now, if we just go, then you seen it. If we go in here and say color pink, it has detected two changes and then we can go in here. It will automatically made the changes inside this wrong. So in our projects, we only gonna Wyden did that s uses fall. It is strongly not recommended to do any changes inside the index that CSS, if you're using, says 5. Nesting in SASS: along. Welcome to this video. So today we're going to use nesting in issues in. So basically, when you nest, something in issues is you basically have a parent element, which for some could be big fear. With the class off container and then inside our container, we will have a pack rat. So what we can do here is we can stop both these elements by going into our soil here. Then we can go in and say container grid, 100% maybe just 1000 whenever you want it to me. And in a Macken suo outer. All right, so this is our parent emit light. So we have to parent element here. We just the container in this case. Then we can go inside the container and we can and the Packers. So basically, what we're doing here is we're going in, taking a paragraph putting inside here and and then be able to start everything inside the container class that it's a paragraph, it won't start anything out office. So if we have free symbol a paragraph here, this won't be Stein, so this won't get pink color. We're gonna give it. So if we just go into our council now you can. One says watch. Then we concerning issues this. And if we didn't go into our documents here, then we go into our project over which Google crown. You can see we have discernment it that's gonna be stalled because we miss it'd inside our container class. What's this one who have no impact at all. And we can go into a coat and we can see that this will be wooden justice. You normally will go at it in CSS. But because of this structure in here, we are able to have for simple navigation bomb class and then sell all of the child Tillman's in there, which will make it much more structure so we can free symbol in at a foul called navigation about it s uses. And then everything would just be inside the parent element. Which room have an impact on our structure and our code. So that's why this is important. And we could even extend this even more by for symbol seeing after before we can see recusing culo blue. If we didn't go in and freshen up rata, we don't even have to write paragraph hover we can't do that. However, it's easier to just if we have one long name like container. Don't say, however, that's a lot much wide. So I said we can just used other way around it. I drink this because this will simplified a text which more again, have a positive impact on how you start like structure, code and style code. So the help kind of sass is to you, make face more organized and more structured in your code. So your sin textbooks more easy to use. And that's why we can use says in such a good way, So to extend its a little bit more just to give you some my samples off it. We can also go in and add, um, if class would m interrogations bath, a navigation Justin, then we get this from that. And if we just moved this, then we can go in and say you will, and then we can see class and container here. Then we can going insane and I am a lie. This is just a very simple irrigating. You mean we're not gonna extended any further in this, so it's not gonna have any things you function. So that is just to show you how much more organized this would be. Comparative Sucessful will have after you have wind discourses so we can call it is here class I'm never going to before gets home. All right, so inside here we condone, say navigation We didn't call for with 100% background of man and became genetic in damn, it's acted container. Dr Neff writes him. I think it a you know, saying color worried. And as you can see here we have our more structure here. And if we didn't go into a CSS file, you can see here that if we begin to write a lot more code of this so if we even do it a bit more cold just to show you how long it will be, we will have a lot more organized code. Because this will look way more messy if we had two wide office in the normal way. So if we didn't go in and same we left in here, you convince. See that this looks more organized again. This output we get here would just be structured this way because it makes more sense from a lack of perspective in the way you will road. You killed yourself and but this is a way to structure and are Nitya code anymore efficient way. 6. Imports in SCSS: Hello and welcome to this video. So in this video, we're gonna learn how to import files incest. So we're going to create, um, different class box, and we're gonna create a diff with the class card weapon of them, has a paragraph in them, and then we're gonna create too fast. What if there was called bus? That s uses and other one is called Carter Issues is and in them, we're gonna have def signing for both dose in elements. But we're going to keep them in separate falls. Teoh keep instruction. Says so. The important thing processes that you keep a structure or were cold. So it actually makes sense to you and other people that would be looking at your cup. All right, so we now need to clear a fire for the bucks and for the cat component. So when we have done that, we're gonna import the fouls inside says and we're gonna do that by using I am at and then import, and then we're gonna import if ash from there, which will then allow us to transport, are off the 1000 to 1 single CSS found. All right, so we're gonna add some styling into classes just to see that it's gonna be applied. So in the card, when we're gonna add the color blue and then we're gonna have a background color off gray and then we're gonna transport to file inside or criminal again. You don't have to use the watch command, but that's the one I recommend using because then you can always keep track of the code and see what happens. And then if you go in and look at your success for you, notice that it's all transpired into one far. But we have more 1000 says territory. And the reason why it's important who important all into import only one seasons valleys it improved performance a lot. So we need Teoh only have one ceases founded of import. I thank you for watching this video 7. Extend SASS: Hey, and welcome to this videos. In this video, we're gonna learn how we can you assess and then extend our course. You can basically include a code and different attributes. So what that means is, we won't have. It's basically like a functions we'll have, like, you say, a function. And then you included in another attribute to weaken for symbol. Have it button one here and then inside here we're gonna duplicate that code inside a class called Beach in primary. So by using them at and then extend and then say bt and we will basically duplicate off the beaten coat and put it inside the beat in primary class. I am. And by doing this, you'll save a lot of time writing code. If we have some code that you know, we're gonna wide more than one time instead of using a lot of time winding to sink, or we can just do this this way instead. If we look at the CSS code, you can see that it will basically try to save us. Money is life when you're transported from s uses to a CSS file. And so now let's go ahead and creed a BT and Danger class on inside beaten danger class. We're just gonna give it a different color to see how it looks like when it gets rendered into browser. So we're gonna give it a color of Fred Justice Yard looks like and, as you can see here, it will being with so this again, their practical we don't use and the excellence of CO because this it will basically just be trust Powell's into the color where so we will save as many lives as possible. 8. Variables in SCSS: hand working to the same elections. And this lecture you will learn how to use variables in excuses. So valuable is, if you don't know it from our allegiance is basically just ability. Teoh stars are information in a variable, and then we use it as many times as you wish. So you can resemble have a terrible cold X equals 20 pixels and then Knuble be able to use this variable x 20 picks off a smelly times s you which and that's how you can use variables incest to improve your work because you will not have to time in the same code all the time. You were just We use it instead. So we're gonna have a variable foul, and then we're gonna have a components phone inside that there's gonna be a time public goofy, and that is successful. So we're gonna have first afford to fund size of transit, Payson. And and then we're gonna have, um, from size. That is a slash one, which were also gonna using discourse. And then that's gonna be off 28 pieces and then we're gonna use them inside. I am our Tabac Chai pack of three classes a bit later, we have first gonna start. Should hate you more so into Haiti, man, We're gonna have free packets. One for defense, eyes normal one. And in mournful Francis, it's a large and then one for the extra ace. A lodge front size. - So you're just gonna ply into classes at reusing with doom like I am most diseases, and that's gonna be nothing different about this. We're just gonna create tree classes that were used in variables in it, and then it would be transferred into and successful. So inside the components Fiona, where you're gonna have did typography and inside the topography class, we're gonna have a very bull Noah Khonsari with did class of fun size large and inside false I Slattery gonna then used to variable in death. And as you can see, we can then say fun size And because if I am gonna fuddy rebel and then we could say fun size, which is the default one. So they asked a large front sight for having there, and we can use this 25 times we wanted toe are just one time depending on how much you use it in your code And then we can go in and say fun sites a slice a notch and fun size s a lodge and put in the crank rebels for this one. So then when you transplanted am transplant would know that this is 20 pixels, so it would just be converted into 20 pixels. And the reason? My variables, it's important in s assesses because it will allow you Teoh half a more. We used the same coasts the same amount of times. And that gives you this whining so you can just change the fund science. You're single element that has this fun sized to trench two paces instead of going into every single file and change it from there. Thank you. Very my shorts in this nature seeing the next one. 9. Maths in variables: so in sex you can actually perform Meth in your variables are just in your cess co. So you can fight. Some will say a plus four paces. And then you will have execs and Wessels as before, because it's only four pixels am We're having to watch command in the background running, so you will. It won't medical update, but him basically you can, plus the miners anything here if you want to, you can even defeat tight here. So this is him a very similar aged. Do it and you can go crazy with the math if you want to em, so you can also say 40 pixels and to diaper to free. And if it's David Iver to golf course, be the same thing because it's still 20 pixels. So if we didn't go into see society, nothing has changed. But if we then go in and change our terrible to be divided by free a plus for plus free places away, whatever you will be able to see that it's actually a difference. Now and then you'll continue having decided smaller big guns. That's pretty much how you can use variables and says, thank you fortune. This video