0:01 Hey guys, I decided to make a minieries 0:04 on SAS, which stands for syntactically 0:08 awesome stylesheets. And what it is, 0:10 it's it's a CSS preprocessor. 0:13 Um, or you could also call it a CSS 0:16 extension language. All right? And it 0:18 just allows us to do certain things like 0:22 uh use variables, use mixins, which are 0:25 kind of like functions uh in our CSS. 0:29 Um, and what we what we do is we work 0:31 inside of a SCSS file. All right? And 0:35 then we have a compiler that will go 0:37 through and compile it and then generate 0:40 a regular CSS file. Okay? So, the 0:43 browser doesn't read the SCSS files or 0:46 anything like that. We're just 0:47 generating a regular CSS file. Um, and I 0:52 would definitely suggest if you haven't 0:53 used this or you haven't used less, 0:55 which is another one, uh, I definitely 0:57 suggest at least trying it because, uh, 1:00 I was really hesitant to use this at 1:02 first, too, because I had a really 1:04 strict workflow, uh, when creating HTML 1:07 5 applications. Um, but when I did try 1:10 it, I was really surprised at how easy 1:12 it was to to integrate into my workflow 1:16 and just how easy it was to use in 1:17 general. Um, there's really no learning 1:20 curve. It's it's pretty simple. Um, and 1:25 uh there's just so much you can do. So, 1:28 if you go to sasslang.com/guide, 1:31 it'll show you all the major features 1:34 that you can use. All right. So, 1:36 basically, uh, variables are probably 1:39 one of the the best reasons to use a a 1:42 pre-processor. 1:44 All right. If you want to change a color 1:47 on your website or your application uh 1:49 and you have 25 instances of that color 1:52 through multiple stylesheets, that's 1:54 going to be a real pain just to do that 1:56 simple task. If you have variables, you 1:59 can just throw that color in a variable 2:02 like primary color and then go ahead and 2:05 change that and then it'll iterate 2:07 throughout all your stylesheets. 2:11 Another really nice feature is the 2:14 nesting feature or function. Basically, 2:17 you can format your CSS just like your 2:20 HTML. All right, so in this example, we 2:22 have a navigation or a nav element, and 2:25 then we're nesting inside of it the 2:27 unordered list, the list item, and the 2:30 link. All right, so this is pretty much 2:32 how you would have it set up in your 2:34 HTML as well. Um, so that's it's really 2:37 nice for organization and just keeping 2:40 everything really clean. 2:43 All right, so partials basically when 2:45 you use SAS, you deal with SCSS files. 2:50 All right, and you you can break these 2:52 up into subfiles and then just uh use 2:56 the import directive to bring them all 2:59 into one stylesheet. All right, so let's 3:02 say you have a bunch of different 3:03 buttons on your site. Okay, they're all 3:06 styled differently. You might create an 3:08 underscorebuttonscss 3:10 file. All right, you may have a 3:12 navigation SCSS file. All right, now you 3:16 can use import and then bring them all 3:19 into let's say a main.cscss 3:21 file and then generate use your compiler 3:25 to generate a main.css file which will 3:29 include all the styles from all your 3:31 partials. All right. And I'll give you 3:34 we'll do that later on. Um mixins also 3:39 awesome. Basically they're CSS 3:42 functions. Um you basically use the 3:45 syntax at mixin and then a name. Give it 3:48 a name in this case border radius. And 3:51 you can even have parameters. All right. 3:52 So we have a parameter of radius which 3:55 will take whatever 5 pixels 10 pixels. 3:58 Um, and in this particular mixin, what 4:01 we're doing is setting the border 4:03 radius, but we're including all these um 4:06 these uh vendor prefix versions as well. 4:10 Uh, so you don't have to write all that 4:11 out in your CSS. You can basically just 4:14 do this. Okay, you can do include and 4:16 then the name of the mixin and then plug 4:18 in your parameter. In this case, 10 4:20 pixels. And you can have multiple 4:23 parameters, you can have default values. 4:25 So uh really helpful. 4:29 All right. So extending and inheritance 4:32 uh basically if you have experience with 4:34 object-orientated programming um then 4:37 you'll you should have no problems 4:38 understanding this. Uh basically in this 4:41 example we have a class called message. 4:43 It has a border padding and a color. All 4:46 right. And then here we have a class 4:48 called success and we're going to say 4:50 extend message. So basically we're we're 4:54 grabbing all of this and putting it into 4:56 the success class. And then we're just 4:58 going to change the border color to 4:59 green. And same thing for error and 5:02 warning. All right. So that's very 5:04 helpful. 5:06 Operators, you can do all kinds of math. 5:08 You can do percentages and uh division, 5:11 multiplication, things like that. And 5:15 another thing that's not on here is you 5:17 can actually use if statements. All 5:20 right, you can have if statements. You 5:22 can use loops, you can use four loops, 5:24 each loops. Uh there's just a ton that 5:27 you can do. So, like I said, if you've 5:30 been hesitant to try something like 5:32 this, uh I would definitely encourage 5:34 you to to go ahead and do it. Um we're 5:37 going to get this up and running. 5:40 Basically, uh SAS runs on the Ruby 5:42 programming language. So, you'll need to 5:45 install that. 5:48 And if you're using Windows like I am, 5:50 then the easiest way to to install Ruby 5:53 is to use something called Ruby 5:54 Installer. Uh, so let's go ahead and 5:58 grab that. So I think it's got Ruby 6:01 Installer.org. 6:07 Yeah. So you want to click download. And 6:10 there's two things we're going to 6:11 download. We want the actual Ruby 6:13 language, which is right here. I have 6:15 the 64bit version. So, I'm going to 6:17 download that. 6:21 And there's also something called the 6:23 devkit or the development kit. And 6:26 that's going to allow us to do certain 6:28 things in the command line, um, such as 6:31 install Ruby gems, uh, things like that. 6:34 So, you want to get that as well. But 6:36 first, we'll install the actual Ruby. 6:42 Okay. Okay, so the default directory for 6:44 me is going to be Ruby 200064. 6:47 And you want to add Ruby executables to 6:50 your path environmental variable. So 6:53 check that and also check associate RB 6:57 and RBW files. Okay, so we'll install 7:00 that. 7:02 And that's it. Ruby is now installed. So 7:05 let's go ahead and grab the development 7:07 kit. Um 64bit. So I'm going to get this 7:09 one. 7:12 And that's going to download. 7:19 And I should also mention you need to 7:21 have Java installed. Um, so you probably 7:24 have that, but if you don't, just uh 7:26 just download Java. And also Adobe Air. 7:31 Uh but I believe if when we go to 7:34 install Ruby um I'm sorry when we go to 7:37 install Scout which is the compiler tool 7:40 uh it'll give you the option to install 7:42 Adobe Air. 7:49 So let's go ahead and run that. 7:52 Sorry about that. Uh, so what we need to 7:55 do is we're going to extract the devkit. 7:57 And you want a folder to extract it to. 8:01 And what I usually do is go to my C 8:03 drive and create a new folder called 8:07 devkit. 8:10 All right. So that's where I'm going to 8:12 extract it. 8:33 All right. So, now that that's done, you 8:35 want to make sure that those files are 8:36 in there. So, it should look like this. 8:40 All right. So, now we have Ruby 8:41 installed and we also have the devkit 8:43 installed. So, what we need to do now is 8:45 run a couple commands. 8:47 So, we want to go to the start menu and 8:49 then in the search box, cmd 8:55 enter. 8:59 All right. So, what we want to do is 9:00 navigate to the devkit directory. So, 9:03 I'm going to say cd 9:05 and I want to go to my C drive and then 9:07 cd 9:10 devkit. All right. And I'm going to run 9:14 ruby 9:16 um dk.rb 9:19 init. 9:21 All right. So that's the initializer. 9:22 Now we need to run 9:25 ruby 9:27 dk.rb 9:29 install. 9:32 All right. Um I actually had devkit. I 9:36 had this installed at one point. So you 9:38 might see something different here. Um, 9:41 now what we need to do is make sure that 9:44 the Ruby environment is using DevKit 9:47 correctly. All right, we can do that 9:49 with gem 9:51 install JSON 9:55 um platform 9:57 equals Ruby. 10:08 All right. So, that's good. Now, we just 10:10 want to install SAS. So, gem 10:14 install SAS. 10:22 So, SAS is now successfully installed. 10:25 Okay. So, we can go ahead and start to 10:29 um create our our application or 10:33 website, whatever you want to call it. 10:34 Uh and then we can compile from the 10:36 command line. But I want to do something 10:38 a little easier. And I want to use a 10:40 tool called Scout. 10:44 See, Scout, I'm not exactly sure of the 10:46 website. 10:50 This is so I apologize for this slow 10:52 machine. It's a virtual machine. 10:56 All right. So, the URL is 10:59 mhs.github.io/scoutapp. 11:03 All right. And we want to click download 11:05 for Windows. 11:07 And I will be making a video for how to 11:10 get this all set up in with a Mac as 11:12 well. 11:21 All right. So, let's see. Add shortcut. 11:25 That's fine. Installation location 11:28 is program files. That looks good. 11:39 All right. So, this is the scout 11:41 interface. Um, I it kept my old project. 11:45 I'm going to remove this. All right. So, 11:47 you should see this. 11:50 Before we do anything here, we need to 11:52 create our project folder, which you can 11:54 create anywhere. Uh, I'm just going to 11:56 go to my C drive 11:58 and create a new folder called projects. 12:04 and then create a new folder called my 12:06 project. 12:09 All right. And then this will be your 12:11 website or your application structure. 12:14 So I'm going to create a CSS folder. 12:17 We want to create an SCSS folder. And 12:19 that's what we'll be working in. 12:22 And then we'll create a JavaScript 12:24 folder 12:26 and an images folder. 12:30 All right. So now we'll go back to 12:33 Scout and click on this little plus 12:35 sign. And you want to choose the project 12:37 folder you just created. 12:41 Okay. So my project 12:43 and then you want to choose the 12:45 directories. The input folder is going 12:47 to be your SCSS folder. 12:50 And then the output is going to be where 12:52 the generated CSS files go which will be 12:55 CSS. 12:57 And we can also choose our JavaScript 12:59 folder 13:01 and our images folder. 13:05 All right. And then down here, you can 13:07 have development mode or production 13:10 mode. Basically, development is just 13:12 going to keep all the it's going to have 13:14 comments in the CSS file, stuff like 13:16 that. Production will wipe all those 13:18 out. Um, and then we can choose to have 13:21 it compacted or compressed or expanded, 13:24 which I'm going to keep. All right. So, 13:26 I'm just going to leave it at the the 13:27 default. And then we want to go and 13:29 click this little play icon. 13:33 And we should get an error. So, 13:36 basically, we got this error because 13:37 there's nothing to compile. All right. 13:39 Now, if you got an error, a popup 13:42 message that says something about uh 13:46 argument error 3214, something like 13:49 that, then you need to install Java. All 13:52 right? That's usually what that means is 13:53 that you don't have Java installed or it 13:56 can't find it. Um, so make sure you do 13:59 that. Now, what we're going to do is 14:02 create our HTML file 14:08 and we're going to create our main SCSS 14:11 file, 14:14 which Whoops, not a folder. 14:17 Sorry about that. We want to create a 14:19 new text document. 14:22 called main.scss. 14:28 All right. So now 14:32 let's open that up. I'm going to use 14:33 Notepad++. 14:36 Okay. So I'm going to open. 14:39 Let me get rid of this. I'm going to 14:41 open that and I'm going to also open the 14:43 HTML fold uh file. 14:48 All right. So let's go ahead and create 14:50 a basic structure. 14:56 So I'm going to use the HTML 5 doc type. 15:17 We'll say my SAS 15:21 project. 15:23 All right. And we want to link our 15:24 stylesheet, which we don't have, we 15:27 didn't create yet. We're actually going 15:29 to let Scout generate it, but we just 15:31 want to set a link to it. So, link reel 15:37 stylesheet 15:39 href is going to go to CSS slash and 15:43 we're going to call it actually we'll 15:44 leave it at main.css. CSS, not SCSS. 15:49 CSS. 15:51 Okay. So, we'll save that. Now, what I 15:54 want to do is go back into Scout and 15:56 click play. 16:02 All right. So, right now, you can see 16:06 how it's changed to the stop. All right. 16:08 So, if we want to stop compiling, we can 16:10 click that. But right now, no matter 16:12 what we do, if we create SCSS files and 16:15 save them, they'll automatically be 16:18 compiled and then put into the CSS fold 16:20 file. All right. So, 16:25 basically, we have main.css. 16:28 Let's go ahead and say body, 16:33 and we'll say background, 16:35 and we'll give it a black background. 16:38 Okay. Okay. So, if I save that, 16:44 you can see right here it says change 16:45 detected at main.scss. 16:49 So, it then over overwrote the main.css. 16:53 So, if we go and open up CSS main, 16:58 you can see that it's got it. It's in 17:00 there. And we also have the comment that 17:02 says where the line is. All right. 17:04 That's because we have it in development 17:05 mode. So, if we open up index in a 17:08 browser, just close this. 17:14 If we open up index, it has a black 17:17 background. All right. And we can change 17:20 inside of our SCSS file. I'll change it 17:23 to red. Save. 17:26 And you can see that it it updates it in 17:29 real time. You don't have to keep 17:30 pressing compile. All right. When you're 17:33 done, you can click stop. All right. and 17:35 then it'll stop generating changes. Um, 17:38 and then when you're ready to start 17:40 developing again, then just come in 17:42 here, press play. All right. So, that's 17:44 that's the only real difference in your 17:46 workflow is that uh at the beginning and 17:49 end of your development session, you 17:51 just want to click play and stop and 17:53 scout. 17:55 All right. So, now I want to demonstrate 17:57 some of the features and we'll start 17:59 with variables. 18:02 Actually, you know what? We'll start 18:03 with partials. 18:04 So, 18:07 in our SCSS file, we have a main SCSS. 18:11 Um, you don't want to just keep one uh 18:14 and that's it. Uh, because that kind of 18:16 defeats the one of the purposes of using 18:18 a pre-processor. All right. So, we want 18:21 to create different folders. All right. 18:23 So, what I usually do is I'll call one 18:25 folder modules. 18:29 I'll call another one base. 18:33 and then maybe 18:36 layout. 18:38 All right. So in base 18:42 I will have an underscorebase. 18:46 SCSS. 18:48 Now the reason for the underscore is 18:50 that if I don't have that underscore 18:53 when scout goes to compile our CSS, it's 18:56 going to also generate a base.css file. 19:00 And I don't want that. The only file I 19:01 want it to create is main.css. 19:05 All right, so you need to have the 19:06 underscore. Um, so this will basically 19:09 be all my base like paragraphs, 19:11 headings, things like that. Just that 19:13 the base styles 19:16 and I may also have a reset file. 19:25 All right. So, that would be if you use 19:28 like the maybe the Eric Meyers reset 19:30 file or something like that. Um, you 19:32 could put in there. Um, 19:35 so that that's it for now. For base. For 19:38 layout, I do something like header 19:51 and footer. 19:59 So all the styles for the header and 20:01 footer would go there. Modules. 20:04 Okay. So in modules I do like 20:09 uh buttons. 20:18 Um let's see. Sometimes I'll use a block 20:22 block blocks 20:24 and that'll be like, you know, sidebar 20:26 blocks, different versions, different um 20:29 may have a primary box and a secondary 20:31 color box, things like that. 20:35 Uh and then maybe like 20:40 components. 20:43 Okay. So, in here I'd put like alerts, 20:46 um, 20:48 progress bars, things like that. And you 20:51 usually would have this kind of 20:52 structure with with an application, not 20:54 just a a HTML website. You don't need 20:58 all this stuff just to build a small 20:59 website. This is more for application 21:01 stuff. Um, and then I'd have a 21:05 typography.css, 21:09 SCSS and this should have an underscore. 21:13 Okay. And this would be like my headings 21:16 um special heading classes, different 21:18 colors, things like that. All right. And 21:21 then in our main, 21:26 go back to our main one. And I won't 21:28 have any styles in here at all. It will 21:30 be all imports. 21:33 So we would have like um import 21:39 say import what do we have base 21:42 slashbase 21:45 actually yeah 21:47 oh another one that is very important 21:50 inside of base that I usually have is 21:52 variables 21:58 variables and also mixins 22:08 Okay. So, we'll include those. 22:12 Basically, variables I would do first 22:18 and then mixins 22:24 and then base. 22:27 And what else? Reset would go before 22:30 base. 22:31 Actually, reset would go. 22:35 Now, reset would go right here. 22:43 All right. And even though that the file 22:44 names have underscores, um, actually, 22:47 yeah, we should include those as well. 22:52 Uh, I'm not sure if we should, but let's 22:55 just give it a shot. 23:02 Okay, so that's all our base files. Next 23:05 we would have 23:10 what do we have? layout 23:28 and then we would have our modules. 23:34 So buttons 23:40 actually probably do typography. 23:47 So buttons, blocks. 23:52 Is that all of them 23:56 and components? 24:03 All right. So we're importing all these 24:06 into this file. So we don't the browser 24:10 doesn't make any extra HTTP requests for 24:12 these. That's why it's okay to do this. 24:15 If you were to import all these in in a 24:17 regular CSS file, then you may see some 24:19 performance issues. Um so uh it's just 24:23 nice to really compartmentalize your 24:25 diff your different aspects of your 24:27 application or your website. 24:30 All right, so let's just add a little 24:31 bit of HTML. We're not going to build an 24:33 actual website. I just want to uh just 24:35 kind of demonstrate some some stuff 24:38 here. So, let's go ahead and create a 24:41 div 24:46 container 24:51 and we'll put in a header. 24:59 So, we'll call this my project. 25:06 All right. And then maybe have 25:09 our navigation. 25:13 That's another one that I I use a lot is 25:16 navigation um SCSS 25:19 or nav. And in here we'll have a ul. 25:43 Oops. 25:54 All right. And then maybe have a section 26:03 and then a footer. 26:22 All right. 26:26 So, reload. There's our awesome website. 26:30 So, let's um 26:33 start with the container. Uh we'll 26:35 actually start with the body. So, 26:37 basically, 26:39 where's my uh I want to use base. Okay. 26:42 Okay, I want to go to my base file and 26:45 that's where I'm going to put my main 26:47 body styles. All right, so font 26:51 family, 26:53 let's use Georgia. 27:00 Okay, font 27:03 size, 27:05 we'll say 14 pixels, not font size. 27:10 All right. And then color. We'll do like 27:12 a really dark gray. 27:18 Line height. 27:22 All right. And then we'll do the 27:24 container 27:30 960 pixels 27:33 margin auto 27:37 and 27:40 overflow auto. 27:43 And for the body uh let's do a 27:45 background 27:47 of light gray 27:51 container. We'll also give a border. 27:58 All right. 28:01 Um, let's see the container. Oh, this 28:04 should be an ID. 28:10 All right. So, the container, let's give 28:12 a background of white. 28:16 We can give it a border radius. 28:23 of five pixels 28:26 and 28:28 that's good. Say the header 28:35 give it a background 28:39 uh we'll say 003 28:42 D99 which is a bluish color and then the 28:46 font color will be white. 28:52 Okay, let's actually add a reset. So, 28:55 I'm going to open up actually, you know 28:56 what? I want to pull my project up over 28:58 here. 29:02 Okay. So, let's open up 29:06 base reset. And I'm just going to do a 29:09 global reset here. 29:18 All right. And then in base, I'm going 29:20 to make my header have a height 29:23 of 90 pixels. 29:30 Okay. 29:33 The header H1 29:38 say padding from the top 20 pixels top, 29:42 right, bottom, and left. 29:49 And let's move the whole container down 29:51 a little bit. So the margin 29:55 we'll do 20 pixels auto. 30:00 All right. and the navigation. 30:09 Okay, we'll give it a height of 30 30:11 pixels and a background 30:14 of black, 30:17 color white. 30:21 Okay. Okay. And then we'll do the nav 30:23 li. 30:26 And back in the reset file, I'm also 30:28 going to put uh list style none. 30:40 Okay. So, we'll float to the left. 30:45 Padding. 30:46 Uh zero. 30:48 We'll do 20 30:52 20 30:53 and then the lengths 30:56 should be white. 31:02 What am I doing? 31:04 I get ahead of myself. 31:06 All right. 31:09 So, there's our navigation. I I realize 31:12 it doesn't look very good, but just 31:14 doing this real quick. 31:21 10 pixels. 31:25 Let's give section 31:29 a minimum height 31:32 200 pixels and then footer 31:40 text align center. 31:44 All right. 31:48 Okay. So, good enough for for what we 31:50 need to do here. Um, I realize it's very 31:53 ugly. So, basically, let's look at using 31:57 variables. All right. So, what I'll do 31:59 is go into my variables SCSS file and 32:04 I'm going to set 32:06 let's set a header. Not actually not a 32:08 header. Let's set a primary color. 32:13 And I want to set that to that blue 32:16 which is in 32:20 the header. So it's right here. I'm 32:22 going to grab this and I'm just going to 32:24 replace this with primary color. 32:28 And then go ahead and put that in here. 32:32 All right. So if I save that should now 32:34 still be the same. All right. And then 32:37 secondary color, 32:42 we'll do black. 32:47 Actually, we'll do like a dark dark 32:49 gray. 32:52 And we'll put that in for our 32:53 navigation. 33:06 All right. Now, you can see that if I 33:08 misspell a variable here and save it, 33:12 it'll actually give us the error and 33:14 tell us the line number, which is really 33:16 cool. 33:21 All right, so let's say the footer, 33:24 let's go. I'm going to break this up and 33:27 put it into our files afterwards that we 33:30 created, our footer and header files and 33:32 things like that. Um so footer I'm going 33:35 to do padding 33:37 20 pixels. Background 33:41 um background will be primary color. 33:47 Okay. And text 33:51 will be white. 33:55 Okay. 33:57 So let's break these up. And uh 34:01 basically I'm also going to create a 34:02 navigation in my layout my layout 34:05 folder. 34:08 Call it nav.scss. 34:11 All right. Make sure we go and include 34:13 that here. 34:21 All right. And then I'm going to grab 34:24 all the navigation CSS. 34:30 Okay. And then we'll grab the 34:33 header stuff. 34:38 Put that inside header. 34:41 Save. And then go 34:44 back to base and get the footer. 34:50 Okay. Okay, put that in footer. 34:53 All right. Now, if I save and we go back 34:55 and reload. Okay, we have a issue here. 34:58 Invalid CSS after layoutnav. 35:03 What did I do here? 35:06 Import layoutnav. 35:10 Oh, I don't have a semicolon. 35:14 All right. So if we want to change the 35:17 main let's let's just say we have a 35:18 bunch of pages uh with this color 35:21 everywhere. All right. So instead of 35:22 having to just go and change every 35:25 single instance, we can go into 35:26 variables and say primary color and 35:30 let's just say red. 35:34 All right. So that's going to change 35:36 everything to red. All right. So that's 35:38 that to me is is well worth um the extra 35:42 workflow which basically isn't much. 35:46 Maybe running running the scout program 35:48 and um breaking your CSS up into 35:52 different files is probably the the the 35:55 only extra work that you're going to do. 35:58 And breaking them up into these files is 36:00 actually more helpful because 36:01 everything's compartmentalized and you 36:04 know where everything is. 36:06 you know that if you want to add um 36:09 whatever if you want to change the 36:10 border in your header, you know where 36:13 exactly to go for that. You know it's 36:15 going to be right in here. All right. So 36:17 huge advantage. Um so I want to 36:20 demonstrate a mixin now. Um basically 36:23 let's go to base 36:26 and we have our border radius. Just 36:28 doing this um isn't you shouldn't do 36:32 that. You should also include the vendor 36:34 prefix at least WebKit and Moz. 36:42 You want your your application or your 36:44 website to look good on in all browsers. 36:47 Um, so basically instead of having to 36:50 write this, it'd be better to just say 36:53 include 36:57 border radius 37:01 and we'll say 10 pixels. 37:04 Okay. Okay. So now what I'm going to do 37:06 is just grab this these three lines, 37:09 cut them out, and go into my mixins, 37:12 which is in the base. 37:18 And I can just say mix in 37:24 border radius 37:28 and plug in 37:34 radius 37:38 and then just 37:41 change all this to radius. 37:47 All right. So that's a lot cleaner. Uh 37:50 if we go back to base. 37:53 Okay. So let's save this and see if make 37:55 sure it still works, which it doesn't. 37:58 Uh expected variable. Oh, you know what? 38:01 I'm using the wrong. 38:06 This needs to be 38:09 No. No. That's right. That's right, 38:12 isn't it? 38:14 No, it's not right. This is actually 38:16 less syntax. The um the other popular 38:21 CSS pre-processor called less. 38:25 And I would suggest picking one and 38:27 sticking to it or you do this what I 38:29 just did all the time. 38:33 All right. So there we go. Now it's 10 38:35 pixels. Now we can also set a default. 38:39 All right. So in our mixin, 38:42 let's say the default 38:45 5 pixels 38:46 and save and then go back to base and 38:49 just say border radius. Okay, no no uh 38:53 parameters at all and save and then 38:56 reload. And you can see now we have a 38:58 default of five pixels. 39:00 All right, so we're running out of time 39:02 here. Um, basically the last thing I 39:05 want to show you is how to nest objects. 39:09 um our next nest elements and we can do 39:12 that in the header. 39:14 Okay, basically we don't need to do this 39:16 here. We can use SAS to 39:20 take this 39:23 and put it right in here 39:26 but not have the header just H1. 39:30 All right, so that's going to give us 39:31 the same result as what we just had. 39:40 All right. 39:43 So, I think that's pretty much it. Let's 39:46 take a look at the stylesheet that's 39:48 been generated. 39:50 So, CSS, 39:53 main CSS, and you can see that it's 39:56 heavily commented. Um, but it's all just 39:59 standard CSS. If we look for, let's see, 40:02 the header color. Where's the header? 40:06 right here. Background red. All right. 40:10 So, there's no variables or anything. 40:12 It's just plain old CSS. We can take 40:14 this application, this website, and uh 40:18 totally delete the SCSS files and it'll 40:21 be fine because it's just using what was 40:23 generated. All right. So, that's all I'm 40:26 going to do for now. I'm going to have 40:28 some more tutorials on this on SAS. Um, 40:32 we'll do we'll build an actual project 40:34 uh rather than just this these little 40:36 tutorials. Um, so please subscribe if 40:39 you haven't already and thanks for 40:41 watching.
1:00:21
12:08
52:41
3:23:11