Mastering SASS: A Complete Guide to CSS Preprocessors

1. Course introduntion: Have you been using CSS for a long time, and do you want to take your skills to a higher level? You may have done a wave design course, but you have not yet fully understood CSS. In your case, this is the solution for you. Hello. My name is John Shocker. Once again, I'm back with a new exciting and in this course, we are going to learn SAS from very beginning to advance. SAS stands for syntactically awesome style sheets. It is a CSS preprocessor. In modern time, if you want to be a front end web developer, then you should have knowledge of any CSS preprocessor, there is no doubt CAS is the most mature, stable and powerful professional grade CSS extension language in the world. As I told you, I'm going to cover everything related to SAS in this tutorial series. At first, I'm going to give you an in depth introduction of CAS, and then we are going to learn how we can install CS compiler. We are going to cover variables, nesting, partial and imports, mixing, extend operators, functions, conditional directips and loops. This course will give you the knowledge that are you looking for. We are ready to go. Let's get started. 2. What is Sass ?: Hello, guys. Welcome back. In this tutorial, I'm going to introduce you what is SAS? Why we need to use SAS? And how can we use CAS? Our first question is, what is SAS? SAS stands for syntactically awesome style sheets. It is basically a CSS extension. We will do the same work in the CAS file. As we do in the CSS file. Otherwise, we can call it CSS preprocessor. Nowadays, it is very necessary that you should have knowledge of any CSS preprocessor. There are two famous CSS preprocessor, SAS and less. As compare s, SAS is more popular because SS come with more advanced feature than less. If you complete this course, I want to say if you learn CS then automatically, you can understand less. Just you need to face little syntax difference, nothing else. Now the question is, as I told you earlier, it is worked like CSS. Then why CS is more popular than CSS? Because there is some reasons. Let me show you. First of all, it is very easy to manage. When we work with CSS, it creates very lengthy files. Sometimes it's very difficult to manage lengthy files. But if we talk about SAS, it is very easy to manage. The next reason that made it more popular, it increases our coding speed as compared normal CSS. But it is effective with when you work with big projects, not the small projects. It is not very handy with small projects. Suppose you want to create a five page website. In that case, it's not very handy. But if you work with complex and multi page website, then it is very handy. The last thing that made it more popular, which is cross browser compatibility. When you use CSS, some features are not support in old browser. Sometimes it creates some big issue, but there is no issue with SAS for its inbuilt feature, it's work with any old browser. Suppose if you work with Internet Explorer seven, otherwise, if you work with letters version of Chrome browser, then you cannot see any difference in the output. It is work in the same way as it work in the letters version. Now let's see how we can use CS file in our STL file. The strange thing is we cannot use CS file in a sml. Yes, it's true. We cannot use CS file directly in Atmel. Even browser cannot understand SAS code. Browser can only understand CSS files, not the CS file. So why we need to create a CS file, we need a compiler SAS compiler. It compiles CS file and convert into CSS file. So you need to indect CSS file on your ETL document, not the CS file. But you need to type your code in the CAS file, not the CSS file. Then you compile the SAS code and convert into CSS file. Now the question is, what is SAS compiler? In the next video, we will know what is Cs compiler. Now, let's talk about features OSS, and we are going to cover these features in our upcoming tutorials. Our first feature is variables. We can store value in variables as like programming language. Our second feature is nesting. Using nesting, we can assign a class into another class. Otherwise, we can use a class into another ID. This is a use case of nesting. Our next feature is partial and inputs. We can create small cs file and we can import it as modules. Our fourth feature is vixens. Using mixins, you can reuse your code multiple times. Our fifth feature is extends. Suppose you type some code in a class, but you want to reuse these codes in another class. In that case, you can use extends. Our next feature is operators. Operator means arithmetic operators. If you need to execute any calculation, in that case, you can use these features like addition, multiplication, division, et cetera. Our next feature is functions. Our SAS come with some veiled functions, and you can use these functions. As you can create your own functions like programming language. Then our second last feature is conditional directives. If you want to execute some conditional work like Is condition, then you can use this feature, and our last feature is loops. I know you are already familiar with JavaScript and other programming languages. Then I don't need to explain what is loops and what is the usage of loops. You can use any kind of loop like four loop, Di loop, while loop, et cetera. These are all available in SAS. Now let's talk about SAS syntax. Basically, CSR came with two types of syntax, SCSS syntax and SASS syntax. These are basically extensions. SCS SAS. Basically, they're in, but there is a minor difference. Suppose we have a CSS syntax. And as you can see, we take total three different type of selectors NebuL Nb AI and Neb anchor. As you can see, first, we need to type NebUL CSS values. Then we need to type Nb AI CSS value. At last, need to type Neb anchor CSS values. But if we need to use the same code in SCSS syntax in that case, we need to type like this. We need to select Nab element one type. Then inside the alivss we need to type all the syntax, UL, LI and A. Basically, we call this system nesting. We are going to learn more about it in our upcoming tutorials. But if you type the cell syntax in SAS code, then you need to type like this. You don't need to use any calivrass and any semicolons. You don't need to use any semicolon after a property. It's pretty similar with Python programming language. But for this tutorial, I'm going to use SCSS syntax, this one. Otherwise, it may confuse you. Now, let's talk about what kind of knowledge you need to start su. For CAS, you should have basic knowledge of STML and you should have good knowledge of CSS. As I told you earlier, ultimately, CS file compiled into a CSS file. So you should have knowledge of proper CSS syntax. And if I talk about codditor, you can use any codditor. For this tutorial, I'm going to use VS code. You can use any cod editor. So this is it for this tutorial. In the next tutorial, I'm going to talk about what is CAS compiler and which compiler we are going to use for this tutorial. So thanks for watching this video. Stay tuned for our next tutorial. 3. Download and Install sass compiler : Hello, guys. Good to see you back. In this tutorial, we are going to learn what is SAS compiler and how can we download the SAS compiler, which can help to compile our CS file into a CSS file. As you can see in my browser, I open SAS official website, SAS hyphen lang.com. As you can see, it provides some basic introduction of SAS. If you have time, then you can read it. Next, here you can see a option name Install. Just click on. Then it's redirect to this page. If you scroll down a little bit, here you can see to different method. Here you can see a compiler list, and here you can see another method that you can install your SAS using NPM. For this tutorial, I don't going to use any node package. I would like to go with compiler, and I'm going to use a different compiler, not this ones, and our compiler name is Koala. As you can see, these are most of paid compilers. That's why I'm going to use a free compiler, which is Koala. Just you need to search Koala SS compiler in your browser, and then you need to click on this link, qualaapp.com. This is the official website of this compiler. As you can see, Koala is a GUI application for as SAS Compass and CoffeeScript. We use it for compilation purpose for these languages, and you know that these are all preprocessor languages. Basically, using this application, we can compile all of these languages. At first, we need to download this application. For download, you need to click on this green button, Download. As you can see, our download is already start. And next, you need to open your download folder, and here you can see the setup of this application, Koala setup. Now I'm going to install this application in my computer. Installation process is very simple, you need to double click on it. After that, you need to click on next, and then you can choose your directory where you want to install it. This is the default location, just click on next. As you can see, I already installed this application, so I don't want to install it again, but you need to complete your installation process. It can take two or three minute to complete the installation process, and after I complete the installation process, it open automatically. For now, I'm going to cancel it. So after complete the installation process, you need to click on the Koala icon to open it. Just into double click on it. As you can see, first time is totally empty. And from this point, you can add any SAS file or a is file. At first, I'm going to jump into my editor and create a CS file. As you can see, there is a folder Nam Demo, and inside this Devo folder, there is another folder Nam CSS. And inside this CSS folder, I'm going to create a CS file. Let's create a new file inside this folder. Style dot SCSS. Otherwise, also you can use SASS syntax. But as I told you earlier, for this tutorial, I'm going to use SSS syntax. Also you can see the SAS icon in this place. Now, let's add some SAS code in this document. I already copy some SAS code and I'm going to paste it here. This code is for demo purpose, so you don't need to understand it. From the next video, I'm going to talk about it. As you can see, we create our CS file successfully. Now, we need to create a CSS file in the same folder with the same name. I'm going to create a CSS file in this folder, style dot CSS. That's it. And we need to keep this file empty. We don't need to type any CSS code in this file. We need to leave it blank, and now we need to open our KoalaOptare. I'm going to open our KoalaOptare. So as you can see, side by side, I open my Qarafopter and my current working directory. And here you can see two different file as file and a CSS file. And now we need to move this CSS folder in this application. Just I'm going to drag this folder and place it here. This is it. Here you can see it automatically peak all the CSS file and the CS files. Now I'm going back to our code editor and I'm going to make some changes in our CS file. Here you can see in my editor, I open my CS file. With that, I also open my CSS file. If I show you my CSS file, as you can see, now it's totally empty. Now I'm going back to the CS file and I'm going to set this file, control. So if I set this file and show you my CSS file, here you can see the proper CSS code. So this Kana application compile the SAS code and convert into a CSS code. Here you can see with Nap tag, it select ULTAgO but in our CS file, inside the Nap tag, we use UL tag. As you can see in our CS file, we use Napkword one time. But if I show you CSS file, here you can see it used Nap tag three time with UL tag with LI tag with ANCA tag. Now let's make some changes in our CS file and see what happened. So here I want to increase UL paddy 20 pixel, Summer type, 20 pixel. If I set this file and show you my CSS file, here you can see our changes are properly reflect in CSS file. Just you need to remember you don't need to change anything in your CSS file. The best option is close your CSS file and then just work with on the CS file. I hope now it's clear for you how CS compilers are worked. So thanks for watching this video. Stay tuned for our next tutorial. 4. Sass Variables Tutorial : Hello, guys, good to see you back. In this tutorial, we are going to learn SAS variables. But at first, let's try to understand what is variables and why we should use variables. Here you can see we create a selector of body tag. Inside this selector, we set background color, red, and font family aerial. With that, I'm going to take two other selector H one selector and Spenselector. Now if you notice, you can see there is a common thing. They are colors, color red. For body, I use red background color, and for each one tag, I use red font color, and also I use the same color for span tag. As you can see, red is the common color. Suppose we have used the same color in ten places. And now we need to change the color. Then we have to go ten places to change the color, and it takes a lot of time. For that, sus introduce variables. In variables, we take name for a value. In our case, color red, and our variable name is primary dash color. And you should remember or the variable name, you need to use dollar sign. At first, we need to take a name of variable, then we need to store value in this variable. Next, we need to depress the color name with this variable name. The main benefit using variable is when we need to change the primary color. Suppose I want to change the primary color red to blue. Then just we need to make changes in the variables, not the all selectors. We don't need to type blue color name on the places. Just you need to make changes in variable. This feature is also introduced in CSS, but the old browsers do not support the CSS feature. But SAS could. Without wasting your time, let's start the practical and see how variables are work in SAS. Here you can see side by side, I open my Visual Studio Ceaor and my browser and already you can see, I create a basic webpage layout. Here you can see the header, a manure, a sidebar, and also you can see the content part and a footer. If you notice you can see, there is a common color in this web page header and footer. If I hover these links, you can see the same color, background of this anchor tag. Also if I hover my sideware items, you can see the same color brown color. Not only that, if I select all the content, you can see the same background color behind the content. Now I'm going to show you how can we use variables. So as you can see, our primary color is brown, so we need to found the brown color. Here you can see the color name brown. We use this color in Anchor hover, header section, footer section, a lot of this. Now I want to replace this color value with the variable limb. For that, we need to create a variable. So here, I'm going to create a variable. At first, we need to use dollar sign, dollar and our variable limb is main color. Min color. I'm going to use brown color. Now I'm going to replace the color names with the variable name, main color. So first, I'm going to replace top bar Anchor Hover selector, color or variable name. Also I'm going to replace it in header selector, main color. Then in our menu list item. Next, I want to replace it in our content section. And also I'm going to replace it in our sidebar. Next, I'm going to replace it in our footer section. So it's done. If I set this file and reload my browser, and you can see there is no changes. You can see the same header color, same footer color, and if I Ober my cuter in my menu links, you can see the background color. It's also brown. I successfully replace our color value with a variable. Now, I want to change the main color of this website, brown to blue. When I hbar my cursor in menu items, I want blue brdrown color. Basically, I want to say I want to change the main color, brown to blue. I'm going to type blue hair. If I set this file and reload my browser, you can see the result. You can see the blue color in header section, footer section, menu section, and sidebar section also. Now we don't need to change the color multiple time because now we use variable. Now you can put any color for one time, and it going to reflect it all the pages. This is the benefit of using variables. Just you need to use variable name as a value. Now if I show you my CSS file, here you can see there is no variables. Just you can see the color names, background blue. It's not only work with colors. You can put any type of value in variable. Suppose I want to change the font style all over the web page. In that case, we can use variable. I'm going to create another variable, and our variable name is main font, Dollar, main font. Colon. For now, I'm going to use aerial and now I'm going to replace all the font value with this variable. I'm going to replace Aerial font with this variable, main font. And also we need to replace in header selector, main font. At last, I'm going to replace it in our content header. Min font. If I set this file and reload my browser, as you can see, there is no changes. It's worked perfectly. You can see it print a real font all over the webpage. Now if we need to change the font family, then we need to change it multiple time. Now, let's change the font family all over the webpage, and I'm going to use what than a font. If I set this file and reload my browser, you can see the font style. As you can see, it replace Areal font with VardanaFont. Now it's clear for you, what is the uskase of variable in sas? It not only save our time, it also enhance our productivity. We can change thousands of places by changing one place. Thanks for watching this video, stay tuned for our next tutorial. 5. Sass Nesting Tutorial : Hello, guys. Welcome back. Once again, I'm back with a new tutorial related SAS and in this tutorial, we are going to learn SAS nesting. Here you can see three different selector. As you can see in our first selector, I use Nap tag with UL tag, and in our second selector, I use naptag with Ali tag, and in our last selector, we use Nap tag with anchor tag. What is the common thing among these three? Which is Nap tag. As you can see, if we use SS syntax, then we need to use Nap tag three time. But if we type the same code in SAS, then we need to type like this and we call this method nesting. Here you can see, at first, we start Nap tag, then inside the Caliss we style all these selectors. You will select our Ali selector anchor selector. If we use nesting, then we don't need to type dep keyword three time and inside the Liverss we need to select all other selectors. Which is related to naptag. But when I set the CS file, it's going to return this kind of CSS code. It's going to reduce some lineup code, but it's going to return the same result. Finally, without wasting your time, let's study the practical and see how it's work. So here you can see side by side, I open my visual screw creator and my browser and I already create a basic web layout. And in my visual studio Cdiator you can see IOPent 35, our estimate document our CS file and our CSS file. You know, I use this layout in our previous tutorial, you can see the variables which I create in our previous tutorial. But in this studio deal, we are going to learn how can we use nesting. But at first, we need to find the position where we can use nesting. I'm going to scroll down a little bit. Here you can see top Br selector. As you can see, after top Br selector, we use top Bar with UL, UL Li, anchor tag, and Hover. This is the rightness to use nesting method. At first, I'm going to copy the UL CSS. Copy, and then I'm going to paste it inside the Tobar selector because tobr is the common tag for Obrine. Now, this selector is not necessary, so I'm going to remove it. Next, you can see inside the UL tag, there is LI tag. As you can see, I already use the UL tag inside the top bar section. Now I'm going to copy only the AI selector from this position to this position. Copy. I'm going to paste it inside the UL tag. At first, our tobr selector and inside the tobr selector, I put UL selector, and then inside the UL selector, I put AI selector. Now I don't need this thesis selector, so I'm going to remove. And now you can see inside the Tobar selector, we have anchor tag. Now I'm going to copy the anchor tag selector only, and I'm going to paste it outside the UL tag. I'm going to remove this code. I don't need this now. Now you can see a Hobart selector. It's a anchor Hober selector, not the TbarHber selector. I'm going to copy this Hobart selector, and I'm going to use it inside the nga tag in that position. I'm going to remove this one. And now I want to tell you a new thing. As you can see, inside the anchor tag, we create Anchor Hobert tag. So it is not necessary to use anchor tag again so we can remove Anca tag. Here we can use person sign, something like that. It's mean we use this Her effect with the parent tag. It's going to create the Her tag of his parent tag. If I set this file and refresh my browser, here you can see there is no changes. It's work as it is. We call this method nesting. Similarly, we are going to follow the same process for header section. I'm going to copy the H one tag and I'm going to paste it inside the headed tag. I'm going to remove this one. As I'm going to follow the same process for menu section. At first, I'm going to copy the UL part of this menu and paste it inside the menu section, I'm going to remove old one. And then I'm going to copy the AI part of this menu and I'm going to paste it inside the menu section. And then I'm going to remove this one. Our next selected is anchor selector, which is inside the LI selector. So I'm going to copy the anchor tag, and I'm going to paste it inside the LI tag. And then I'm going to remove this one. And our next selected is Anchor Hobart tag. So I'm going to copy this selector. So as you can see, is the anchor Hobart tag, so we need to paste it inside the anchor tag. And then we need to remove the air tag, and we can use person here. For now, this one is useless, so I want to remove it. So basically, it's create our CSS code very manageable. If I set this file and reload my browser, as you can see, there is no changes. And now we don't need to use this menu selector multiple time. And next, I'm going to follow the nestering process for our content section. So at first, I'm going to copy the s two selector. Then I'm going to paste it inside the content section, I'm going to remove this one. Next, you can see a pseudoselector named selection. You can see we use this selection all of the content section, I'm going to copy only the pseudo selector. I'm going to paste it inside the content section, not the ST section. And then I'm going to remove it. As you know, for pseudo selector, we need to use person sign, so I'm going to type person here. If I save this file and reoad my browser, you can see there is no changes. I hope now it's clear for you what is nesting and how we can use nesting. Thanks for watching this video. Stay tuned for our next studio. 6. Sass Partials & Imports Tutorial : Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related SAS, and in this tutorial, we are going to learn what is partial and imports. So at first, let's focus on partial. Partial means parts. I want to say parts of SS fine. Suppose we have a CS file and our file is main dot CS file, and this is our main file. And as you know, if we create a website, our website divided by header, content, sideware and footer, sometimes we need to create different designs for different pages. But the problem is, when we type all the code in a single file? It creates our file very heavy and messy. We need to scroll up and down our page multiple time. So to solve this problem, we part our layout. For header, we create header file for content, we create a different file for sidebar and for footer. If we work with variables, also we create another file for variables. Basically, it's organize our code and reduce the clumsiness. Suppose we complete the header section style, then we need to open it again. We can open the specified part. Why we need to change? This is the concept of partial. Now talk about imports. After creating the different parts, we need to input these parts in our main file. For that, we need to use a special keyword, input. At the rate input, we need to type the file name header. One important thing you need to remember. You need to create this same extension file. I want to say CS file, not CSS file. You cannot input CSS file in the main file. Obviously, you need to create CS file. And another thing you need to remember when you create your separate file, you need to use undersco before. I want to say underscohader dot SCSS. Our underscore sign recognize this is not the main file, so our CS compiler successfully identify this is a partial file and we need to include it in our main file. That's why we don't need a separate CSS file for partial files. If you use SASS syntax, then for your partial file, also, you need to use SASS syntax. So without wasting your time, let's start the practical and see how we can use partial and inputs. As you can see, I already open my KOA application, and I open our CSS folder in this application. With that, I also open Visual Studio code editor. As you can see, this is our Min CSF, style dot Sss. And now I'm going to divide this file with pas. At first, I'm going to start with these variables. I want to create a separate CS file for our variables. At first, I'm going to create a new file in our CSS folder. And our file name is variables. As I told you earlier, to create a partial file, we need to use underscosge undersco variables. Dot, our extension is C is is, then I'm going to press Enter. As you can see, it screed our file, and then I'm going to cut my variables from this file, and I'm going to paste it inside the variable file. And I'm going to remove it from our main file. So first, I'm going to save this file. Then we need to include this file in our style file. For that, first, we need to type at the red sign, and then we need to type Import. Import inside the double codes. We need to type the file name, but we don't need to use underscoSign, we need to type variables. You don't need to mention file extension. Our compiler is smart enough to understand the file extension, and then you need to use semicolon to end this line. Next, I'm going to create a new file for our header section. So I'm going to type undersco header. Ss then I'm going to press Enter. As you can see, it created a new file, and now I want to separate our header section. For that, I'm going to select from the top bar. From top bar section, I want to copy our header, also the menu. I'm going to cut, and I'm going to paste it inside the header file. That's it. For our header part, we select Tobb header section, also the menu section. And then we need to import the file in our main file, which is style dot Sss. I'm going to type at the red, Import then inside the double course, we need to type the file name, which is header, then semiconm two in this line. Now, for our content section, I'm going to create another file. Inside the CSS folder, I'm going to create undersco content SCS, and then I'm going to press Enter. As you can see, it creates a new file. Then I back to my style SSS file, and I'm going to cut this content part. And I'm going to paste it inside the content dot SCSS file. I'm going to set this file also. In a similar way, we need to input this file in our main file. So I'm going to duplicate this line and here I'm going to type contain. And next, we need to create a file for our side wars section. I'm going to create a new file in our CSS folder. Underscoe sidebar Sss. As you can see, we create a new file for our sidebar and then we need to cut the sidewar section from the style CSS file. I'm going to cut this sides section from this file. And I'm going to paste it inside this Sidewd file. And then I'm going to set this file. Now we need to input this file in our style file. I'm going to begin this line, and here I'm going to type sidebard at last, I'm going to create a new file for our footer section. So inside this *** folder, once again, I'm going to create a new file, underscoeFter, dot scss. In this file, I want to style our footer part. I'm going to cut this part I paste it inside the footer section. Then I'm going to set this file. As I'm going to back to our main file, styled CS file. Now I need to input the footer section in our main file. So duplicate this line and here I'm going to type footer. I'm going to set this file. At last, you can see the media query section. We use it for responsive purpose. If you want to separate this part, yes, you can. Let's create another file for media queries section. Inside this *** folder, I'm going to create another folder. I'm going to create a file undersco media. Dot SCs then I'm going to press Enter. Then I'm going to cut the media query section and I'm going to paste it inside this media file. I'm going to set this one. As you know, we need to input this file in our main file. I'm going to duplicate this line here I'm going to type our fine line, which is media. And I'm going to press Control S to set this file. Using partial technique, we successfully separate our web layout. We separate our header section, content section, sidebar section, footer section, also the media queries, and the variables. It's radios clumsiness of our website. If I open my SML file, let me show you. As you can see, this is our TML layout. Let's reload the file. As you can see, there is no changes. It's L as it is. Now suppose you want to change the header and footer background color. In that case, you need to open variables file. And from here, you can change your main color. I want some green color, something like that. If I sit this pile and then back to the browser and reload my browser, here you can see the result. It changed our main color. If I show you my CSS file, let me show you style dot CSS. Here you can see it follow the sequence of our input files. At first Tpbard, then come header, then come content, and then come sidebar Atlas footer, and then our media query. After media query, as you can see, our body selected and our rapper selected. If I show you the style SAS file, you can follow the sequence. First, our variables, header contains sidebar footer media query, and as you can see, our body section and our rapper section. I hope now it's clear for you what is partial and imports. So thanks for watching this video. Stay tuned for our next tutorial. 7. Sass Mixins Tutorial : Hello, guys, good to see you back. In this tutorial, we are going to learn a new feature Vlated SAS. In this tutorial, we are going to learn vixens is a very useful feature. Suppose we have two different classes, class one and class two. As you can see, I use botter radius property, both of the classes. For class one, I use five pixel boder radius, and for class two, I use ten pixel border radius. So you can see, I use similar property both the classes. Their property is same, but their value is different. For our old Chrome rowser we use Ber radius with webkit, and for our old Mozilla brrowsers we use boerradius with mouse. So it's a simple CSS method. But the problem is if we need to use the similar properties ten time, then what? Then we need to type 30 lines of code. To solve this problem, sus introduce mixes. Mixes basically work as functions. If you had knowledge of JavaScript, then you already familiar with functions. Let me clear this concept. I'm going to show you an example. If you want to create mixing in SAS, at first, you need to type add mixins, and then you need to take mix in name. You can take any name. In our case, BD radius. Just you need to remember, do not provide any space in this name, and then you need to take round races and it's completely optional. If you want to take any parameter, then you need to pass the variable name. As you can see, in our case, value, then we need to use this three property inside this mixing. Also you can pass the parameter with this property. In this way, we can create our mixing function. Now the question is how we can use this mixing function in our CSS code? Let me show you. For that, I'm going to use class one. If I want to use this mixing, we need to type at the rate include, then our mixing name border radius. Inside the parenthesis, we need to pass the border radius value as like function. When I call this mixing function, then we need to pass a value as a parameter, and then we can use this parameter as a value, value for three different property. Without wasting your time, let's start the practical and try to understand how we can use mixins. As you can see, side by side, I open my visual studio Corretor and my browser and I already create a new DML document. And here you can see in my browser, we already create three different div for this example, and also we set three different ID for this three Div. For our first dif we set first. For our second, we set second, and for our last if we set third, and also I link our CSS file with this document. So let's jump into the CS file and try to explore how mixing work. At first, I want to set border ideas all of this three D. For that, I'm going to use mixing method. Let's create a mixing. Add the rate mixing. Then after mixing Qard, we need to take the mixing name and our mixing name is BD radius. And then we need to use parenthesis for our parameters. It is pretty similar with JavaScript function. Then inside the Kaliss I'm going to set our first property and our first property name is dash web keith Ber radius. For now, I'm going to set Bar radius by pixel, and I'm going to duplicate this line to type. At first, I use prefix for our old Crone browser and then I'm going to use prefix for Mozilla browser, so I'm going to type Msare. And at last, I'm going to use the exact property border radius. Now our mixing is ready to use. Remember, we do not use any parameter in this mixing function because for now, I do not want to pass any value as a parameter. At first, I'm going to use this mixing function in our first tap. For that, first, we need to type Include Keyword at the rate, include. After Include keyword, we need to type the mixing name, and our mixing name is VD radius. Then parenthesis and subagin to end this line. Remember, if you want to call this mix in function, always, you need to use add the red include keyword. Now, if I set this file and reload my browser, you can see the result. You can see the border radius in our first leap. And now I'm going to call the same mixing function in our second and third deep. If I set this file and rewrote my browser, you can see the same result, all of these three deeps. Now I want three different border radios for this three deep and now I want three different boder radios for these three deeps. Suppose for our first af, I want five pixel border radius. For our second deaf, I want ten pixel boer radius, and for our third, I want 15 pixel border radius. In that case, we need to use parameter in our mixing function. We need to set a variable name as a parameter. For that, we need to use dollar sign, dollar and our variable name is value. Then I'm going to copy this value, and I'm going to use it as a property value. Something like that. Now we need to pass the value when we call the mixing function. For our first, I'm going to say five pixel. Similarly, for our second DV, I want to use ten Pixel boer radius, ten pixel. And for our last DV, I want to use 15 Pixel boder radius. If I set this file and reload my browser, you can see the result. So as you can see, we successfully set three different border radios for this three deed. This is the use case of mixing function in SAS. I hope now it's clear for you. So thanks for watching this video, stay tuned for our next studio. 8. Sass Extend Tutorial : Hello, guys. Good to see you back. This is another tutorial related SAS. And in this tutorial, you are going to learn a very useful feature, which is extent. Suppose we have a class named class one, and as you can see, we use four property in this class, color, font size, padding and line height. With that, we have another class, and our class name is class two. As you can see, in our class one, we use red color, and in our class two, we use orange color. Here you can see without color property, every property and their value are same. Their font size, their padding and their lint. Everything is same. Now suppose we have another class, class three. Similarly, without color, every properties are same, their font size, their padding and their line height. So we repeat their proberity and their value to time. I want to say, we need to type six extra line for that. So to handle this kind of situation, CS introduced a new method, which is extant. Why do we need to work with CS file at first, we need to create plus one as it is. But when we create our class two, at first, we need to override the color property because I do not want to repeat this red color for this DV. That's why I overt this color. Next, you need to use the extend Keyword, at the red extend, and I want to extend this class with class one property. That's why I type class one. You can extend with class ID, whatever you want. Similarly, for our third class, just we need to override the color, colored green, and then we need to follow the similar process. Add the red extend or class one. It's mean I want to use class one property in class three. So without wasting your time, let's start the practical and try to understand how we can use extend method. As you can see, side by side, I open my visual studio coeator and my browser using if server extension, and I also open our Koala application. As you can see, we have to tell three different deep with their different background color and their different size. For this three Deep we use three different ID, first second and third. This is our CSS file, style dot CSS. If I show you my CSS file, here you can see for our first dip, our background color is gray and with this 300 pixel. Similarly, for our second dip, we use background colored orange and with 400 pixel. And for our third dive we use background color red and with 600 pixel. Without these two property, every property and their vary is same. You can notice it padding 15 pixel border radius ten pixel, font family aerial, font size 20 pixel. If we follow this regular method, then we need to type eight extra line. So to resolve this kind of problem, SAS introduce extend. Let's back to the CS file. We do not going to change anything in our first if, but in our second Dave, I'm going to use extend method. Let me show you. At first, I'm going to delete this four line, padding boder radius and font family and font sides. Then I'm going to use the keyword, at the at extend. And now I want to extend this second ID with first ID. Here, we need to type has tag first. Then semiconm to end this line. If I set this file, here you can see there is no changes. It's worked perfectly. Next, I'm going to follow this similar process for our third deep. I'm going to remove the properties, and I'm going to extend at the red, extend and I want to extend our third e with our first D has tag first. Then semicron to end this line. If I set this file, you can see there is no changes in our browser. So we successfully extend our first ID. But if I show you my CSS file, let me show you how you can see it creates a combination of ID selector, first, second and third, also you can see two different IDs second and third. It is just used for overwriting background color and deep with 400 pixel, 600 pixel, background red, and background orange. As you can see, it's very useful. If you notice, you can see it's pretty similar with mixes, but there is a difference between mixes and extend. What is the difference? The first difference is we can pass a value as a parameter in mixins, but we cannot pass the value as a parameter in extent. The second difference is we can use combined selector in extend. But inside the mixins, we cannot use combined selector, and now I'm going to show you another method, how we can use extend. So you already know the process, how we can use the extend. At first, we need to create a class, and then using this class, we can extend this class with other class and you know the process. Suppose now you decide you don't want to show class one in your CSS file, but you want to use their property in class two and class three. In that case, you need to use percentage sign before the class name. Now the class one is reusable, similar to mix ins. We call this BathodPlace hoolder. Now the placeholder, do not going to reflect in your CSS file, if you want to extend your property with this placeholder, then you need to use at the aid extend, percent sign and the class name. Just you need to remember placeholder and extend work together. So let me show you the actual demonstration. Once again, I'm back to my visual studio coordinator. So first, I'm going to create a placeholder, so I'm going to remove this hastag then I'm going to use percentisSge. Now we transform our first ID into a placeholder, and I'm going to use this placeholder in our second dip. And if you want to use placeholder with extend, then you need to use percentisine. Now our second div extend with this placeholder. Also, I want to extend our third dip with this placeholder. I'm going to use percentisg here. I do not set this file. If I set this file, first, it's going to destroy these deep properties because we transform our first ID into a placeholder. As I told you earlier, our placeholder do not going to reflect in our CSS file. If I set this file, you can see the result. First, it destroy our first deep, but it maintained the previous property for second dip and third dip. If I show you my CSS file, here you can see the result. Here you can see there is those selected name IDF. You can see only two selector, ID second and ID third. First, it create a combination using second ID and third ID, and then it create second ID selector and third ID selector to overwrite background color and width. Using placeholder, we can create a reusable code, and we can use it multiple time. I hope now it's clear for you what is extent and placeholder. In the next tutorial, we are going to learn SAS operators. So thanks for watching this video, stay tuned for our next tutorial. 9. Sass Operators Tutorial : Hello, guys. Good to see you back. This is another tutorial related CS, and in this tutorial, we are going to learn CS operators. Here you can see, we have total five different operators. Our first operator name is equality operator. Then come relational operator, numeric operator, string operator, and wllian operator. And in this tutorial, we are going to learn equality operator, relational operator, and wollan operator. But at first, let's try to understand what is the meningum operators. At first, I'm going to talk about equality operator and relational operator. As you can see in our equality operator, we have two type of operator, double equal to operator and not equal to operator. In equal to operator, we need to use equal sine two time. But in not equal to operator, first, we need to use explanation sine, then we need to use equal sine. It's mean not equal. Using equal to operator, we can compare values. Suppose our first value is five, five equal to five, then it's going to return true because both the value are same. Similarly, if I use not equal to sine, also it going to return true or false value according to the comparison. This is the usage of equality operator. We are going to learn more about it in our practicals. On the other hand, we have relational operators. And it's come with four different operators. Less than operator, greater than operator, less than equal to operator, greater than equal to operator. All of this equality operator and relational operator use with IP condition in SAS we call it I function. In our upcoming tutorials, we are going to learn about it. In this tutorial, we are going to learn, how can we use conditions with that? Without wasting your time, let's start the practical. Here you can see, I already put my CSS folder in this SS Quala compiler, and also you can see, I open our CS file and our CSS file side by side, and here you can see a class selector, class one. Now I'm going to start this practical with equality operator. Let me show you. At first, I'm going to take a CSS property, which is padding. Padding, ten pixel equal to ten pixel. Here I'm going to compare two values. If I set this file, here you can see in our CSS file, it's written padding, true. Here we match ten pixel equal with ten pixel, when I set this file, it's written true. Yes. The condition is true, but we do not use this operator like that. If you're familiar with JavaScript, then you know that. If you know JavaScript, then you already familiar with p condition, and we are going to learn about it in our upcoming tutorials. Here I just tell you how can we use comparison operators. Here you can see we compare ten pixel with ten pixel, but if I change the value ten pixel to ten EM if I set this file, now you can see it's written padding fols because ten pixel value and 10:00 A.M. Value is not safe. Similarly, if I compare with ten pixel with 15 pixel, let me show you I'll set this file, it's also written false because 15 pixel is greater than ten pixel. But if I use not equal to operator, let me show you and then set this file. In that case, it's written true because our condition is true. Ten pixel is not equal to 15 pixel. As you can see, here we compare our value with numeric value, but also we can use string value. Let me show you. Here I'm going to type font name AL I'm going to compare so I'm going to use equal to sine with aerial. If I set this file, here you can see it's written true because both the fonts are sale. But if I use Roboto font, let me show you I set this file, now it's written false. Not only string value, we can compare complex value also. Let me show you. Inside the roundresses, I'm going to type four pixel, six pixel, and two pixel, and I'm going to copy this slide, and I'm going to paste it here. If I set this file, as you can see, it's written true because both the value is true. But if I change one value, seven pixel, and then set this file, now you can see it's written false. But if I use is not equal to sine, and then set this file. Now it's written two because both the condition are not similar. That's why it's written two. This is our equality operators, and now I'm going to show you what is relational operators. Basically, relational operator work with numeric values. We cannot use it with string value. For that, let me show you an example. I'm going to remove this one and here I'm going to type 50 greater than four. I want to say is number 50 greater than four? If I set this file, as you can see, it's written two. But if I pass 60 and then set this file. As you can see, it's written fw Because in our previous condition, 50 is greater than four, but in this condition, 50 is not greater than 60. That's why our condition written forms. Not only that, we can use this value with unit. Let me show you 50 pixel and 60 pixel. If I set this file, you can see it's written fg. But if I pass 40 weeksel here and then set this file, now you can see it's written true. Not only that, you can compare with with different unit. Let me show you. Suppose I want to compare with 1,000 millisecond greater than equal to 1 second. If I set this file, here you can see it's written true. As you can see, their unit is different, s and, but their value is same. That's why it's written true, here I use greater than equal to relational operator. Using this operator, we can compare if 1,000 s is greater than one is, in that case, is going to return true, otherwise, if 1,000 s equal with one is, in that case, is going to return true. But if I pass two second here and then set this file, as you can see, it's return form. Because 1002nd is not greater than two second. Here you can see we can compare two different unit value with same category. We can compare second with our minute, microsecond, et cetera. But if I try to compare s with pixel, let me show you 1,000 ms greater than two pixel. Then if I set this file, now you can see it written error because their category is different, we cannot compare time with area. That's why we need to use the same category. Now let's talk about the Bullion operators and how we can use it. In SAS, we have to tell three type of Bollier operator and or not, and it's always written true or false result. We can use all the boolean operator with multiple conditions. I want to say, if you want to check more than one condition, you can use these operators. We use and operator if both the condition are true, then written true, else it's written false. Not only two condition, you can add more condition with this operator. Let me show you the example. Suppose this is condition one and I use and operator, and this is condition two. In our condition one, five pixel equal to five pixel. I mean, the condition is true and in our second condition, aerial font equal to areal form. Here we compare to numeric value and here we compare to string value. As you can see, both the conditions are true. In that case, it's going to return to result. And if any condition do not return true, in that case, it's going to return false. Next, let's talk about or Bullion operator. If one of the condition is true, then it's written true. Otherwise, it's written false. Suppose we have to condition condition one and condition two. In our condition one, I compare five pixel with 15 pixel and in our condition two, we compare area font with area four. In that case, you know one of the condition is true, aerial font equal with aerial font. Because one of the condition is true, that's why it's written true. And if both the condition written fails, in that case, it's going to return fails, and our last operator is not operator. It's always written opposite value. If the answer is true, it's going to return false answer, and if the answer was false, it's going to return true answer. Basically, it's written opposite answer. So without wasting your time, let's study practical and see how it's work. So as you can see, once again, I'm back to my visual studio code editor. And now I'm going to use a condition with Boulan operator. At first, I'm going to use this condition 1,000 milisecad better than equal to 1 second. Ismein is going to return true result, as you can see, it's return true. With that, I'm going to use end operator and five pixel, equal to five pixel. If I set this file, as you can see, it's written true because both the condition are true. But if I false one condition, so I want to change five pixel equal to six pixel and then set this file. Now Seton falls. Now, both the condition is not true, our first condition is true, but our second condition fails. That's why it's written fails because we used operator. But if I used or operator, then what? Now I'm going to use or operator. Or if I set this file, it's going to return two because as you know, if one of the condition is true, then it's going to return two. And if both the condition fails, let me show you. I'm going to change two second and then set this file as you can see, it's written fails. And if both the condition is true, in all operator, in that case, once again, and fight pixel and then set this file, as you can see, it's written true. So in our operator, both the condition or one of the condition is true, in that case, is going to return true. And now I'm going to show you the last lean operator which is not operable and how we can use it. So at first, I'm going to duplicate this slide, and I'm going to comment out our previous one. So here I'm going to use not operator. I want to remove this condition and first, I'm going to type no. As you know, not operator always written opposite result. So five pixel equal to equal to five pixel. As you know, the condition is true. If I set this file, here you can see it's written forms because it's written always opposite result. But if the condition is fails and if I use not equal to operator, five pixel not equal to five pixel and set this file, now it is written true. Because the condition fails, that's why it's returned too. It's always return opposite result. I hope now it's clear for you what is Bollan operators. So thanks for watching this video, stay tuned for our upcoming tutorials. 10. Sass Operators Tutorial II : Hello, guys. Good to see you back. This is another tutorial, related CS operator. And in this tutorial, we are going to learn CS numeric operator and SS string operator. As I told you, in my previous tutorial, we have to five different operator in SAS equality operator, relational operator, numeric operator, string operator, and Wulian operator. We already cover equality operator, relational operator, and an operator in our previous tutorial. In this tutorial, we are going to cover numeric operator and string operator. Let's get started. At first, I'm going to talk about string operator. String operator means concatenation operator and we define this operator using plus sine. We use this operator for to add a string with another string. Using this operator, we can join to different stree. Not only that, we can join numeric value with string el. Not only that, using this operator, we can join numeric value with string viel. If you are familiar with JavaScript, you already know that. Let me show you an example. Here you can see 50 plus px. Here we want to join a string hel with a numeric wave. As a result, it returned 50 pixel. On the other hand, we have numeric operators, addition, substruction, multiplication, division, modulus, otherwise, we call it reminder. We use this operator for arithmetic calculations. Let's start the practical and try to understand how we can use it. As you can see, I already open my CS compiler software Koala also you can see in my Visual Studio coretor side by side, I open my CS file and my CSS file. So at first, I'm going to show you how we can use string operators. For that, I'm going to create two variables. Dollar, colon, and I'm going to take 50 as in. Then I'm going to dugate this line, and this is what two. Here I'm going to take five. This is variable one, and this is variable two. Now I'm going to style it class dot class one. Then at the livers, I'm going to take a NCSS property. Suppose margin for Value, I'm going to use variable one, one. One. Next, I'm going to use concatenation sine. After concatenation sine, I'm going to pass px. Here you can see our V one written numeric value, and I want to concatenate Var one with string value px. I I set this file, as you can see, it's written Margin 50 pixel. So here we join two different type of value using string operator and we call this method concatenation. With that, I'm going to show you how can we use numeric operators. So with er I want to add $2.02. Up to two, once again, I'm going to use concatenate sine. Now, the sign 1-2, it is not a concatenation sign. This is addition sine, but this sign going to act as a concatenation sign. So if I set this file, here you can see our margin is 55 pixel. So as you know, using addition operator, we can add two values, but now I'm going to use substriction operator. Minus. I I set this file, now you can see our new margin is 45 pixel. It's radius five pixel from 50 pixel. That's why it's written 45 pixel. This is the use case of substruction operator, and in that way, we can use it. Similarly, we can use multiplication side. If I set this file, you can see the result, 250 pixel. If I use division sine and then set this file, now you can see the answer is ten pixel and now I'm going to use our lust operator, which is modulus. Let me show you how. If we use modulus sign, then it will give you the reminder up to division. If I set this file, as you can see, there is no reminder, that's why it return zero pixel. But if I change the Var one value, 54 and then set this file, now you can see the reminder is four. So this is the use case of modulus operator. So basically, we do not use this numeric operator in that way. We use it when we create complex designs. Let me show you. So for this example, I'm going to take a new property, which is font size. Font size, and I'm going to use Var one. Congetinate with pixel. If I set this file, you can see the result. Class one font size is 54 pixel. But for our heading one tag, I want font size two time, then class one. Let me show you font size. Dollar one, multiply with two concatenate concatenate pixel. If I set this style, you can see the result. Now our heading one font size is 108 pixel because I want to show two time font size then class one, then class one. That's why I use multiplication operator. In our class one, it's written 54 pixel and in our heading one, it's written 108 pixel. In that way, we use variables and numeric operator together, most of the time we use it with p condition otherwise loops, and we are going to learn about it in our upcoming tutorio so this is it for this tutorial. In the next tutorial, we are going to learn a new concept related stream, which is interpolation. Stay tuned for our next tutorial. Thanks for watching this video. 11. Sass Interpolation Tutorial : Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related SAS, and in this tutorial, we are going to learn interpolation, SAS interpolation. In our previous tutorial, we learn string operators. With that, we learn string concatenation operators. Using string concatenation, we can add string value with numeric value as you can see the result. Here you can see it. As you can see here, 50 concatate with pixel and as a result, it returned 50 pixel. But the problem is we cannot use concatate sine in CSS properties. We can only use it in CSS values. Also, we cannot use concatenation sine in CSS selector. Let me show you an example. Here you can see, I take a property name margin, margin hyphen concatenation sine, and I call a variable name position. You can put any value here, lab, top, right, I want to say, suppose margin top 20 pixel, but we cannot use concatenation sine in that place. Let me show you another example with selector. Suppose there is a class named image dot image hyphen concatenate with imaging, but we cannot use concatenation sine in our selector or properties. We can use concatenation only in our valves. But for this kind of congtation SAS introduce interpolation. If you want to congtnate with properties, otherwise classes, in that case, we need to use interpolation method and we need to use this sign, hashtag and clirass. Inside the calrass we need to put the variable line, and then we can congatenate our properties and classes. Let me show you the example. If you want to congatenate these properties and the class, in that case, then we need to type like this. Merging hyphen hastag inside the calirass, we need to pass the variable limb position. This is for property. Similarly, for a class, we need to follow the same method. After hashtag, we need to use Calirasis and then inside the calirasis we need to pass the variable name. So without wasting your time, let's start the practical and see how we can use it. As you can see, I already open my Kuala application, and in my visual studio code editor, side by side, I open CS file and our CSS file. Let's start the practical and see how we can use interpolation. At first, I'm going to declare a mixing. At the d mixing. And our mixing name is margin. And inside this parenthesis, I want to pass two parameters or first variable m is position, and our second variable m is unit. Also I'm going to call the mixing in our class. Let me show you. I'm going to select a class dot class one. Inside the aliases, I'm going to include the mixing. Add the red, include, and our mixing name is margin. At first, I'm going to pass position value. Our position is left. After position, we need to pass the unit here I'm going to pass 20 and then semicolum to end this line. Now inside this mixing, I'm going to take our CSS property which is margin. Margin, hyphen, here I'm going to use the interpolion method. Hastag Cariss. Now I want to concateate margin with another variable, and here I'm going to pass position variable, position. As you can see, in our position variable, we pass left value and then after column for value, I'm going to use unit variable. Dollar unit. I want to congatenate with pixel in PX. Then semicon to end this line. If I set this file, as you can see in my CSS file, it print margin lip 20 pixel. Now we can change the position just typing the name. Suppose I'm going to pass top and here I'm going to pass 40. If I set this file, now you can see margin top 40 pixel. Here you can see, we use a mixing called margin and inside this mixing, we use interpolation method. And we pass value from this mixing and we congtnate with CSS property, and also we congtnate string with unit. This is the usksOT is the uskaso interpolation. In this example, we use interpolion with CSS property, and now I'm going to use interpolion with CSS selector. For that, I'm going to create other mixing. At the red mix in, and our mixing name is set image, SET IMG. Then inside the caliass and inside this parenthesis, I want to pass one parameter, and our parameter name is dollar mail. Now inside the aliases, I want to congatenate our selector, dot, image, dash, has tag. Inside the liss, I'm going to call the image name. So here we use interpolition to congtnate our selector. Then inside the liverss, I'm going to use a CSS property, which is background image. Background, image, and I'm going to use URL Vu for the background image. URL inside the parenthesis, inside the double codes, we to pass the file location, and our file location is image, slash our image. Also, here we can use Interpoliion method to take image name. Let me show you. Hashtag inside the aliases, I'm going to pass the variable, which is name. After image name, we need to pass the image extension, and our extension is JPG. Now we need to call this mixing and we need to pass the image name. To call the mixing to type at the rate include. Then we need to pass the mixing name, set image, set image. Also we need to pass the image name. Suppose our image name is Cloud. And then semicolon two in this line. If I set this file, as you can see, first, it creates a CSS selector, image Cloud, and then it create the image name cloud dot JPG. Using interpolation, we can concatenate CSS selector, and also we can use it as a image name because we cannot use plus sign to concatenate CSS selector and CSS properties. That's why CS introduced CSS interpolation. I hope now it's clear for you. Thanks for watching this video. Stay tuned for our next tutorial. 12. Sass Functions Tutorial : Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related SAS. In this tutorial, we are going to learn SAS functions. If you are already familiar with JavaScript, then you know what is function. So let me show you how we can create functions in SAS. To create a function in SAS, first, you need to take a keyword and dilate function, then your function name. Remember, do not provide any space between the name. You can use otherwise under sco sine, but do not provide any space. Then inside the parenthesis, you can take one parameter, multiple parameter, otherwise no parameter. It is up to you. For this example, I took one parameter, means one variable, and our variable name is value. And then you need to use calibraces. If you remember, function and mixing are pretty similar, but there is a difference. Basically, function can return a Val. It can return arithmetic calculations, but mixing doesn't. But mixings always print what was already written in mixing, but functions written values, and we can use this value in our upcoming codes. Suppose I create a class name one third and inside this selector, as you can see, I use a property named with and we call our function and we pass a value 1,200. Then our function going to divide this value with three and return 400 and then it concatenate the number with pixel in our CSS it pass with 400 pixel. Let me show you a scenario that can clear your doubts. Suppose we have a parent container and its width is 1,200 pixel, and now I want to divide this width into three parts. In that case, every cell take 400 pixels. For that, we can create a function, which can divide our container into three per. If we change the width of this continuer, it automatically divide our continuer into three per. Similarly, if we want to divide this continuer into a two part, in that case, we need to create a function, which can divide our value into a two part. Suppose in future, you want to change the outer did. Something 1,500 pixel. In that case, our function going to divert the continu with equal size, 500 pixel, 500 pixel, and 500 pixel. This is the use case of function, so we don't need to type the cells width manually. We are going to calculate it using the help of function. So let's start the practical and see how we can use it. Once again, I am back to my visual studio coordinator. Side by side, I open style dot Ss file and style CSS file. At first, I'm going to set a container width. For that, I'm going to take a variable. And our variable nm is CN width, colon and for our continuer width, I'm going to take 1,000. For now, I'm going to take any unit like pixel, M, et cetera. Now I'm going to create a function, which is going to divide my continuari into three part. So to create a function, I'm going to type AderdFunction, and our function name is one third, one third. Then inside the parenthesis, user going to pass a parameter. For this parameter, I'm going to take a variable dollar weed. Then inside the aliases, whatever user going to pass, I want to divide it into three part. So for that, I'm going to use return keyword. At the red return. Then Dollar width divided by three, because I want to equally divide the continuer width into three part, and then I'm going to use concatenate s plus px. This is for unit because as a result, I want to return pixel unit. So we successfully create our function and our function name is one third, and now I want to call this function. To call the function, we need to style a class, and our class name is one third weed. Then inside the car resist, I'm going to call it property and our property name is what. What. Now I'm going to call our function, and our function name is one third, one third. Then inside this parenthesis, I'm going to pass this variable. Before I set this file, let me change the container width. I'm going to replace 1,000 with 1,200. If I set this file, as you can see, our one third container width is 400 pixel. So in future, if I change the container width, 1,200 pixel to 500 pixel and then set this file, here you can see, it's always written the one third of this container width, which is 500 pixel. This is the use case of function. Similarly, if you want to divide your container width into two part, in that case, you need to create another function. Some to duplicate this function, and I'm going to change the function name, and our function name is. But this time, we need to divide the continuer width into two parts. So I'm going to divide with two. As I'm going to create and also I'm going to create a selector for that. Let me show you. Our selected plus name is hub width, Hub width. Instide the aliras I'm going to call the width to parting. As a value, I'm going to call our new function and our new function name is hub. And inside the parenthesis, here I'm going to pass our container width variable container width. And also, I'm going to change the container width, 1,500 pixel to 1,200 pixel. If I set this file, you can see the result. Here you can see our hub function divide our container into two part and return 600 pixel for one part, and our one third function divide our container into three part, and each of the part to 400 pixel. Now it's clear for you how we can use functions for arithmetic calculations. So in the next tutorial, we are going to learn SAS veil functions. So thanks for watching this video, stay tuned for our next tribew. 13. Sass Number Functions Tutorial : Hello, guys. Good to see you back. This is another tutorial relatate CS, and in this tutorial, we are going to learn SAS number functions. Here you can see Cs come with total six in val function, numbers function, string function, color function, last function, selector function, and last one is intropetion. In this tutorial, we are going to learn only number functions. Let's see how many number function we have in CS. As you can see, we have total 11 number function in CS, and we are going to cover all of these in this tutorial. Let's start the practical with Avis function. Physically, Avis function written absolute will. Let's start the practice. As you can see, I already open my user studio cod editor and side by side, I open styloid SS pile and styled CSS file. At first, I'm going to create a class dot class one. Then inside the calices, at first, I'm going to take ACsSPperty and I'm going to use padding property. Padding. Our first function is Avis means absolute function. Sham row type abs. This function always written absolute value. If I pass a negative value, let me show you -14 pixel. If I set this file, as you can see, it's written absolute, 14 pixel. It's removed the negative value and written 14 pixel. If I remove the minus sign and then set this file, as you can see, it's always written absolute value. Now, let's talk about our next function, which is L. But before, I'm going to duplicate this line and comment out previous one. Here I'm going to use cell function C CEL. Then inside the ao verses, I'm going to pass a floating value. Let me show you. 5.3. What even if I set this file, let me show you. If I set this file, as you can see, it's written padding six. If I use cell function every time it return above value. If I use 5.9 and set this file, also it return six. But if I use 5.1 and set this file, also it returns six. It's always written above value. But if I pass 5.0 and then set this file, now it's written only five. If I pass float value in cell function, it's always written above value. Similarly, we have opposite function. For that, I'm going to duplicate this line and comment out previous one. And here I'm going to type floor function FL W R. Then inside the roundress I'm going to pass four and seven. This function always written below value. If I set this file, as you can see, it's written only four. Without zero, whatever value we use after dot is going to return only four. If I pass nine here, it's also written four. Let's jump into our next function, which is the round function to beg this line and comment out previous one. And here I'm going to type round function. Row if I set this file, as you can see, it's written five. This function is combination of seal function and float function. After Dhimil, if the value is bigger than four, then it's always written the a a value. But a Djimil, if the value is lower than five, then it's going to return wow value. Let me show you if I pass, 4.4 here, and then set this file, as you can see, now it's written only four. But if I pass 415 and then set this file, now you can see it's written five. This is the use case of round function. I hope now it's clear for you how sale floor and run function work. Our next function is max function. I want you to begin this line and coin out previous one. And here I'm going to call max function. This function always return the maximum value. Suppose if we have three value, let me show you one pixel, three pixel, and five pixel. If I said this file, as you can see, it's written five pixel. It's always written the maximum value from the least. At the same way, we have opposite function, which is min function. Soundg this line and comment out previous one, and here I'm going to call our Min function. If I set this file, as you can see, it's written the lowest value from this list. It's always written lowest value. Basically, we do not use this function like that. When we need to work with complex arithmetic calculation, then we use this function. Now, let's talk about our next function, which is percentis So to begin this line and comment out previous one. And here I'm going to type percentis. This function always return the percentage value. If I pass 0.3, I set this file, as you can see, it's written 30%. Also, if I work with arithmetic calculation, let me show you 200 pixel divided by 50 pixel. If I set this file, as you can see, it's written 400%. This function always return percentage. Our next function is comparable. For that, I'm going to duplicate this line and comment out previous one. Here I'm going to type comparable. Using this function, we can compare two units. If the units are matched, they is written, true, otherwise, it's written forms. Let me show you the demonstration. So here I'm going to pass two pixel and our next value is four pixel. If I set this file, as you can see, it's written true because their units are same, pixel and pixel. But if I pass EM unit and then set this file, EM and set this file, as you can see, now it's written fobs. Because their unit is different. That's why we could not compare it. But if I pass centimeter value here, CM, and if I pass MM unit, and then set this file, as you can see, now it's written through because we can compare centimeter with millimeter. That's why it's written through. Let's talk about our next function, which is random. I'm going to duplicate this line and comment out previous one. So I'm going to type random. This function always written a random value. If I set this pile, as you can see, it's written a random value. If I set this file once again, you can see it's written a different random value. By default, random function written value 0-1. That's why it's written float value. But if I pass a number, something 12 and then set this file, now it's written a number 0-12. It could be any number 0-12, and in our case, it's written ten. If I set this file once again, now you can see it's written one. Let's talk about our next function, which is unit. For that, I'm going to dulgate this line and comment out previous one. And here I'm going to type unit. For this example, I'm going to pass a number, which is 22. If I set this file, as you can see, it's written only the double codes, not the number because we do not pass any unit, but if I pass pixel PH and then set this file, as you can see, it's written only the unit pixel. Unit function always written the unit. Similarly, if I pass centimeter, CM, and then set this file, here you can see it's written centimeter. Now, let's talk about our last function, which is unit less. For that, I'm going to duplicate this line and comment out previous one. And here I'm going to type unitless. Basically, this function going to return to value, either true, either false. Basically, this function going to check, does we provide unit with this value or not? If I set this file, as you can see, it's written false. Because we provide unit, that's why it's written fals. But if I do not provide the unit, I set this file, as you can see, now it's written true. We can use this function with IP conditions. In the next tutorial, we are going to learn strings related functions. So thanks for watching this video, stay tuned for our next tutorial. 14. Sass String Functions Tutorial Part1 : Hello, guys, good to see you B. Once again, I'm back with a new tutorial related CAS. And in this tutorial, we are going to learn CS string function. Here you can see the list of inval function of SAS. In our previous tutorials, we'll learn about number function. And in this tutorial, we are going to learn string functions. So let's see the string functions. As you can see, we have total nine string function in SAS. Cote function to uppercase function, STR index function, to lowercase function, Star insert function, unique ID function, Star len function, uncoat function, and Star slice function. Without wasting your time, let's start the practical. As you can see, I am in my visual studio coordinator, and side by side, I open Stylar CS file and style CSS file. So first, I'm going to create a class, and our class name is class one. Then inside the arises, I'm going to use CSS property, and our property name is font family. Font family. But here I don't going to use the font family name directly. For that, I'm going to use a string function and our string function name is co Quote. Then instead the parenthesis, I'm going to call the font family name and our font family name is Ariel. Basically the code function going to wrap this string with double codes. If I set this file, here you can see the result. Font family inside the double codes al. In the opposite way, we have another function, which is uncode. If I use uncode and wrap this font name inside the double codes and then set this file, as you can see it removes the quotation from the string. This is the use case of uncode function. Let's jump into the next function, which is two uppercase. Here I'm going to tie two uppercase. Case. Basically, this function going to convert this string into uppercase. If I set this file, as you can see, all the letters are in uppercase. At the same way, we have opposite function, which is two lowercase. If I type two lower, and then set this file, as you can see, it convert our capital letter A into a small case. Basically, it convert uppercase character into lowercase. Let's jump into the next function, which is string length. Here I want to type our next function, which is St length. Str length. Whatever string value we pass inside this string function, it's going to count the character of the string and return the length in number. As you can see in aerial world, we have total five character. If I set this file, oops, there is a mistake. Lens spelling is not correct, LENGTH. If I set this file, you can see the result. It's three and five. This is the use case of STR length function. Let's talk about our next function, which is string index. I'm going to call this function string index. Then inside the parenthesis, in this function as a first parameter, we need to pass this string. I already copy a string and I'm going to paste it here. It's a dummit from La Mpsum. But at first, let's start on the word wrap. Using this function, we can search character or word from this string and it's written index number. As you can see, as the first parameter, we pass this string. Then in our second parameter, I want to search the dummy word. Inside the double chords, I'm going to pass Dummi. If I set this file, as you can see, it's written 23. It's written the index number of dammi text. If you count the characters, D would be 23, let me show you another example. Now I want to search Lorem word from the stream. So I'm going to type Loren. If I set this file, as you can see, it's written one because Lem word start from the first index. That's why it's written one. Remember, it's also count the space between the words. This is it for this tutorial. In our upcoming tutorial, I'm going to cover string insert function, QQ ID function, and string slice function. Thanks for watching this video, stay tuned for our next tutorial. 15. Sass String Functions Tutorial Part2 : Hello guys it's good to see you back. This is the second part of SastringFunctions. And in this tutorial, we are going to learn string insert function, unique ID function, and string slice function. So without wasting your time, let's study the practical. As you can see, inside the visor stew coeor I open our previous files. Style your CS file and style your thesis file. Suppose I want to insert a word inside this string. For that, we need to use string insert function. So here, I'm going to type string insert. I want to add hello word. So here, I'm going to type hello. I want to add hello word beginning of this string. For that, we need to pass another parameter. So here I'm going to type comma, and here I'm going to pass the index number. One, also, I'm going to provide a space in that place. And also, I'm going to provide space after O. So if I set this file, you can see the result. Using Insert function, we can insert word or a character inside this stream, and we need to pass the index number. That's it. Let me show you once again. Suppose this time I want to add Ipsum word in this stream. I copy this word and remove it, and here I'm going to pass the word Ipsum. And now I want to insert Ipsum word up to uen. For that, I'm going to count exact index number one, two, three, four, five, six. So here, I'm going to pass Sebin because also I want to provide a space up uen. So if I set this file, you can see the result Lorem Ipsum. So this is the use case of insert function. Let's talk about our next function. Our next function is string slice. So here I'm going to type STR slice. Suppose I want to slice down Lorem word from this string. In that case, we need to pass to the two parameter. Let me show. In our first parameter, we need to pass our string, and in our second parameter, we need to pass the index number. As you can see, Lorem word end in fifth index. So here, I'm going to pass six. If I set this file, now you can see it remove Lem word and print is simply dammitext. But in our next example, I want to return one word. In that case, we need to pass total three parameter, our starting index number and our ending index number, which is nine. If I set this file, as you can see it return is. So using this function, we can slice any section of our string. Let's talk about our last function, which is unique ID. At first, I'm going to remove all of these, and here I'm going to type Unique ID. ID. Then our parenthesis and semicon two in this line. If I set this file, as you can see, it's written a unique ID. It returns some random characters. If I set this file again, every time it's written a new ID, and Bt fold always this function written nine character unique ID. Basically, we use this function with IP conditions. I cover all of these string functions. Thanks for watching this video, stay tuned for our next tutorial. 16. Sass Color Functions Tutorial : Hello, guys. Good to see you back. Once again, I'm back with a new exciting tutorial related CS. And in this tutorial, we are going to learn CS color functions. As I told you earlier, CS came with some inval functions. Number function, string function, colors function, list functions, elector function, and introspection function. We complete number function and string function in our previous tutorial. In this tutorial, we are going to learn color function. Without wasting your time, let's see how many color function we have in our CAS. In this tutorial, we are going to cover the basic but important CS functions, Lighten, darken, adjust to, saturate, desaturate, mix, and transparent eye. I know we have to more than seven function related color in SAS, but these are the most important one. That's why I'm going to cover these seven functions. So let's start the practical and see how it works. Here you can see side by side, I open my Visual Studio Coreator and my browser using if server extension. I already created a HTML document named index dot HTML. With that, I already create Style Door CS file and styled CSS file. As you can see in my browser, we have to do two D, class one and class two. Class one filled with pink background color, and class two came with empty background color. Let's jump into the CS file and see what we have done. As you can see, at first, we create a variable limb base color, and our base color is pink. And then we style our dips and set a border. Then in our class one, we set background color, which is our base color pink, and we do not set any background color in our class two. Now I'm going to modify this color and I want to fill this div with the dark shape of this pink color. For that, I'm going to use a function named darken. So first, I'm going to use CSS property, which is background. Background, and I'm going to call our function. Here I'm going to type darken. Then inside the parenthesis, we need to provide a color. For color, I'm going to use the same color, which is base color. I'm going to copy the variable and paste it here. And then in our second parameter, we need to provide the value 0-100%. So here I want to pass 30%. So if I set this file, here you can see our container filled with 30% more dark cut than previous one. And if I show you my style or CSS file, as you can see, it creates a new color. Then once again, I'm going to back to my style or CS file. So as you can see, if I apply 30% darkened color to this base color, it return this kind of color. Similarly, if I apply 70% and then set this file, you can see the difference. Now it's ten more darkened color. I show you two deeps because this is the original color and this is the darkened part of this color. This is the use case of dark in function. Our next function is lighten function. Let me show you. So first, I'm going to duplicate this line and comment out previous one. And here I'm going to tie Lighten. And I'm going to pass 30% value here. If I set this file, as you can see, it's 30% lighten color from our base color. If I show you my CSS file, as you can see, it's written pure white because our pink color is already a lighten color. If I use blue color, let me show you base color blue. This at this file, now you can see the lighting part of this blue color. And if I show you the CSS file, you can see the colored code. We can use those function with Hova Effects. Let's talk about our next function, which is adjust Hue. First, I'm going to duplicate this line and comment out previous one, and here I'm going to type adjust Hue. Hue. If I set this file, as you can see, it changed the color. Basically using this function, whatever color we pass in our first parameter, it can return darkened part or lighten part of this color according to this value. And in our second parameter, we need to pass value with degree. If I pass 20 here, and then set this file, you can see the difference. It's return won't darken the previous one. If I pass 70 degree, let's see what happened. If I set this file, it return lighten part of this color. Using H function, we can rotate colors. So as you can see how we can use Hu function. Let's talk about our next function, which is saturate. At first, I'm going to duplicate this line and comment out previous one. Here I'm going to type saturate. Basically, this function increase the brightness of this color. If I set this file, you can see the result. As you can see, it still return the same color. Let's change the color. Here I'm going to use a brown color. I'm going to provide a hexadecal value has AD 4038. If I set this file, now you can see the color difference. This is the base color and this one is 70% saturated the base color. It increases the brightness of this brown color and return red color. Similarly, we have opposite function, which is desaturate. Let me show you. I'm going to duplicate this line and comment out previous one here I'm going to type desaturate. Also I'm going to change the base color, which is blue. If I set this file, as you can see, this function reduce the brightness of this color and return this color. Saturated function always increase the brightness of this color and desaturate function always decrease the brightness of this color. If we reduce the value 20% and then set this file, now it's try to match with base color. But if you increase the value 90% and set this file, now you can see the difference. It reduced the brightness of this color. But if I pass zero value, and set this file. Now you can see is written the original color, the base color, blue color. But if I use full value, 100% and set this file, now you can see Itrton gray color only. Now let's talk about our next function, which is mix. I want to oblate this line and comment out previous one. So here, I'm going to type mix. Using this function, we can mix different colors. In this function, basically, we need to pass total three parameter. So with base color, I want to add, as you can see, our base color is blue. I want to add red color. So here I'm going to type red, comma, and then we need to pass the percentage value. So here I'm going to pass 50%. It mean how much blue colored I want to add with the red color. If I set this file, as you can see, it's written purple colored. If we mix red color and blue color, in that case, it reten purple color. I I decrease the percentage value, 20% and then set this file, now you can see it return pink reddish color. It applied 20% west color to this red color. If I increase the value, 90% and then set this file, now you can see the different result. Now you can see our new color is much stronger than red colored and it's written nearly blue colored. This is the way how you can use mixed function. Now let's talk about our lust function, which is transparent dies. I'm going to duplicate this line, and I'm going to comment out previous one. Here I'm going to type background transparent ties. Basically, using this function, we can transparent our color. If you are already familiar with CSS, you know GVA value, and A stands for Alpha Val, and we can transparent our color using Alpha value. Similarly, we have function in SAS, which is transparent yes. Here, we need to pass through the two parameter, color and value. For color, I'm going to use our base color, and here we need to pass value 0-1. So Hemo type zero point, four, I mean, it's 40% transparent. Let's set the file and see is it worked properly or not. As you can see, it's 40% transparent our background color. And if I show you my CSS file, here you can see it use Rgvia value here you can see it's written Alpha value 0.6. And if I want to make it completely transparent, in that case, we need to pass value one. If I set this file, now you can see it's completely transparent. But if I show you my CSS file and compare with Alpha value, here you can see it's written zero. In CSS for complete transparent, we need to use zero, but in SAS for complete transparent, we need to use one. Obviously, it's work only for this function. This is it for this tutorial. I hope now it's clear for you what is CS color functions. Thanks for watching this video. In our upcoming tutorial, we are going to cover CS List functions. So stay tuned for our next video. 17. Sass List Functions Tutorial Part1 : Hello, guys, good to see you back. Once again, I'm back with a new exciting tutorial related SAS functions. And in this tutorial, we are going to learn SSList functions. As I told you earlier, we have to six function in SAS, number function, string function, color function, list function, selector function, and introspection function. In this tutorial, we are going to learn list function. These are all in wll functions. But before we need to understand what is list. If you are familiar with JavaScript, then you already familiar with arrays. Array means in a single variable, we can store multiple values. And if you want to do the same thing in SAS, then we have List. Here you can see, first we take a variable then list, and inside this variable, we set to tell three value, five pixel, ten pixel, and 15 pixel. This is the first method that you can create last in SAS. Let me show you this second method. Here you can use separator between the values. You can use comma. So you can use values without comma. Otherwise, you can use value with comma. And there is another way that you can create list in CAS. Let me show you. Also, you can use square addresses to create a list in CS. And now I'm going to show you the list functions. Using list function, you can manipulate your list. You can add new value in your list. Otherwise, you can remove a value from this list. You can do a lot of stuff using those functions. Our first function is length function. Thence come Nth function. Next, Seth N function, join function, appNFunction, function, index function, least separator function, and our last function is is bracketed function. So we have total line least function in CS and I'm going to cover all of these in this tutorial. Without wasting your time, is start the practical see how it swar. Finally, I am in a visual studio codtor. Side by side, I open stylet cs file and style dot css file. At first, I'm going to create a variable name list Dollar ist. Then colon here, I'm going to set some values. Five pixel, space, ten pixel, space, 15 pixel. Then semicolum two in this line. Now I'm going to create a class dot class one, then inside the alirass then I'm going to call a CSS property, which is padding here I'm going to use all the list function one by one. Let's call our first list function, which is length. So here I'm going to type length. Using length function, we can count total number of value in our list. If I pass the variable am dollar list, and set this file, as you can see, it's written padding three because we have to tell three value in our list. If I increase the value 20 pixel and then set this file, as you can see, it's written four. As you can see, it count multiple values. Also if I remove the unit pixel, let me show you and then set this file. As you can see it written four because this function is smart enough to identify the values. That's why without unit, it can count our values. And if I use comma between them and then set this file, as you can see, now it's also written four because we can create our list using space otherwise using comma. Let's back to the previous position. I'm going to press Control Z. Not only that, we can pass property and values in length function. Let me show you. First, I'm going to use round braces. Inside the round braces, first, I'm going to use with property with ten pixel. Also, I'm going to use height property. Height, five pixel. If I set this file, as you can see, it's retune two because we pass total two value in this function, width and height. This function is quite foul to identify these values. This is our length function which can count our list values. Now let's talk about our next function, which is NIT. But first, I'm going to duplicate this line and comment out previous one I'm going to type NI. Basically, we pass to two parameter in N function. In our first parameter, we need to pass the list value and in our second parameter, we need to pass the index. Let me show you. In our first parameter, I'm going to pass list Dollar list. And in our second parameter, I'm going to pass the index number, so I'm going to pass two. If I set this file, as you can see, it's written ten pixel. Now the quotien is why it's written ten pixel. Because as you can see in my list at index two, we have ten pixel value. That's why it's written ten pixel. We have to tell four value in my list. It's mean we have to tell four index in this list. In our second parameter, if I pass the index number, according to the index number, it return the value. Similarly, if I change the index number, four and then set this file, now you can see it return 20. Not only that, we can pass negative value also. If I pass minus one and then set this file, now you can see it return 20 once again. But the question is why? Because from left side, we count positive values. At the opposite way, we count negative value from the right side. So this is our minus one, this is minus two, this is minus three, and this is minus four. If I pass minus three, and set this file, you can see it's written ten. So we can print value from this way, otherwise this way. Now, let's talk about our next function, which is set it. I want to begin this line and comment out previous one. If you want to add a new value to our existing list, in that case, you can use Seth Neh function. Here, I'm going to type Seth Ne set nth. Inside the down presses, we need to pass three parameter. First, our list, then the index number, where you want to set? I want to set it at index two. That's why I pass two. In our third parameter, we need to pass the new value, and our new value is 30 EM. Here I want to replace ten pixel with 30 am. If I set this file, you can see the result. Five pixel, 30 am, 15 pixel, 20 pixel. Using this function, you can replace a value to your existing list. As you can pass minus value here. If I pass minus one and then set this file, now you can see it replaced 20 pixel with 30 am. Let's talk about our fourth function, which is Joan. I'm going to duplicate this line and comment out previous one. Here I'm going to call Joan function. Using joint function, we can join multiple list and we can create a single list. For that, I'm going to create another variable, which is is two. Also, I'm going to change those varios 50 pixel, 100 pixel, 150 pixel, and 200 pixel. Here, we need to pass dollar two parameter, List one and List two, Dollar, ist, comma, and our second parameter, we need to pass our second list is two, dollar, is two. So if I set this file, you can see it's written a new list, and we have total eight value in this list. Five pixel, ten pixel, 15 pixel, 20 pixel, 50 pixel, 100 pixel, 150 pixel, and 200 pixel. You can see there is no comma between these values. Basically, this function combined to list and written a new list. But what? If we use comma, in our first list, let me show you and in our second list, I just use space to separate values. If I set this file, as you can see in our new list, it used comma in our whole list to separate values. Also, we can pass another parameter in our joint function, which is separated. Suppose I don't want comma between these values. In that case, in our third parameter, we need to pass space. If I set this file, as you can see in our new list, it separate our value by using space, not the comma. As you can use auto value, it's the default value. So here I am to type auto. If I set this file, now you can see it proved comma between values. But if I do not use comma in our first list and then set this file, by default, as you can see, is written space. It separate our value using space. But now I want to separate this value using comma. In that case, we need to pass comma here. If I set this file, now you can see it provides comma between values. So our third parameter stands for separator. This is it for this tutorial. In our upcoming tutorial, we are going to cover a pen function, zip function, index function, is separator function, and e bracketed function. So thanks for watching this video, stay tuned for our next tutorials. 18. Sass List Functions Tutorial Part 2 : Hello, guys. Once again, I'm back in my visual studio coordinator, and as you can see, side by side, I open style SSPle and Stylo CSS file. In our previous tutorial, we'll learn about Length function, Nth function, set N function, and join function. But in this tutorial, we are going to cover the remaining ones APN function, Z function, index function, is separator function, and his bracket function. So without wasting your time, let's study practical. At first, I'm going to start with APN function. So I'm going to configure this line and comment out previous one. And here I'm going to type Append. Then our round brass. Suppose if you want to add a new value in the existing list, in that case, you can use AVN function. Suppose in our first list, I want to add 30 pixel up to 20 pixel. In that case, we can use this function. Let me show you how. This function adds on a single value. In our first parameter, we need to pass the list, which is dollar list. Then comma and then we need to pass the new value, which is 30 pixel. If I set this file, as you can see in CSS file, it's written 30 up to 20 pixel. It's adding new value in our list. We can add new value using this function. Also, we have third parameter that we can use as separate. Let me show you. As you can see, our values are divided by space, so here I'm going to use our third parameter, which is comma. If I set this file, you can see the result. Now you can see our values are separated by. You can use any value here, auto, space, Let's talk about our next function, which is Z function. I'm going to this line and comment out previous one. First, I'm going to inve this one and I'm going to type Z. Basically this function going to join two values. I want to say it had five pixel with 50 pixel, ten pixel with 100 pixel, 15 pixel with 150 pixel, and 20 pixel with 200 pixel. Here, I'm going to pass two parameter. Our first parameter is dollar list, and our second parameter is dollar is two. If I set this file, you can see the result. As you can see, it combined five pixel with 50 pixel, ten pixel with 100 pixel, 15 pixel with 150 pixel, 20 pixel with 200 pixel. Let me show you a good example for this. Here I'm going to take some color name. Inside the round presses, I'm going to take red, green, and blue. Also, I'm going to take another list. Is that the rounders is for red, I'm going to take 120. For green, I'm going to use 255, and for blue, I'm going to use 70. If I set this file, now you can see red color value is 120, green color value is 255, and blue colour value is 70. This is the good use case of zip function. If you do not use comma for separation purpose, let me show you so I'm going to revoke this comma and I'm going to use space. In that case, you can remove round braces. If I set this file, as you can see, it also worked perfectly. So it's totally on you, you are comfortable with separator or not. You can use Comma or webspace. Let's talk about our seventh function, which is index. I'm to beg this line and comment out previous one. And here I'm going to type index. Suppose you want to search something in your list. In that case, you can use index function. So as a parameter, at first, we need to provide the list name, and our list name is dollar list. In our second parameter, we need to pass the Keyword, which I want to find. I want to find 15 pixel. If I set this file, as you can see, it's written index number. I found our keyword at index three. If I remove the unit and then search the file, as you can see, it's also written three. But if I try to find a result which is not exist in this list, let me show you 40 and then set this file. As you can see, it's written nothing. If exist, then it's written, otherwise, it's written nothing. Now, let's talk about our eighth function, which is ist separator. So I'm to duplicate this line and comment out previous one, and here I'm going to type List separator. List separator. List separator basically return the separator name. Here we need to pass the list name and then it's going to return which separator we use in this list. I'm going to pass dollar list. If I set this file, as you can see, it's written space. So here you can see in our list one, we use space for separate our values. But if I use coma in our list two, and here we pass list two, and then set this file. Now you can see is title because here we use comma to separate our values. We have to tell two type of separator, otherwise, space. And now I'm going to talk about our last function, which is is bracketed. So I'm going to duplicate this line and comment out previous one. And here, I'm going to type is bracketed is bracketed. Basically, this function returns to value. True, either false. It is basically going to check does we use squared *** in our list or not? Here I'm going to pass our list name, Dollar list. If I set this file, now you can see it's written false result. But if I use square *** in our list too, let me show you and then pass, and if I pass is two in this function and then set this file, as you can see, it's written true. Basically, we are used this function with the condition, and we are going to learn about it in our upcoming tutorials. This is it for this tutorial. In our next tutorial, we are going to learn selected functions. So thanks for watching this video, stay tuned for our next tutorial. 19. Sass Selector Functions Tutorial Part 1 : Hello, guys, good to see you. Once again, we are back with a new tutorial related SAS. And in this tutorial, we are going to learn SAS selector functions. But before we need to understand what is selected. Here you can see inside the class one, we have ncatag we said hi and we to our Anca tag, which is inside this class one. Our Anca tag is our selector. But SAS provides some invied function that can manipulate our selectors. Let me show you the function. So as you can see, we have to seven selector function in CS, selector next, selector append, selector replace is super selected, simple selectors, selectors unify and selector extend. Moving forward and start our practical. Here you can see I already open my Kuala application, and side by side, I open styled CS file and style CSS file. At first, let's clear a variable in our CS file. Dollar and our variable name is selected. Then colon. At first, I'm going to show you what is the usage of selector nest function. Here I'm going to type selector List. Basically, inside this selector nest function, we pass total two parameter, and both the parameters should be selector. For our first parameter, I'm going to take double codes for our first parameter, I'm going to use L and for our second parameter, I'm going to use I and then Semgoron two in this line. Basically, this selector function going to create our first parameter parentag and it make our second parameter child tag of our first parameter. I want to say it going to create UL tag, parentag and LI tag child tag. It's going to combine both the tag and create a select. To apply it, we need to create a class. For that, I'm going to use interpolation method. So first, I'm going to type has tag and inside the aliases, I'm going to use our variable, which is selector, dollar selector. So whatever value we have in our selected variable, it going to paste it here. Inside this selective function, I'm going to use a property. You can use any property. For now, I'm going to use height. Height tint pixel. Let's set the file and see what we get in our CSS file. If I set this file, here you can see in the CSS file, it creates ULTAgParntag, and Litag child tag. It combined both the selector and Made combined selector. Basically, this is the usage of selector nest function. Let me show you another example of this function. I'm going to remove this one and set this double code. I'm going to take totter two class. Our first class is XYZ and our second class is dot ABC. And now I'm going to take our second parameter. I want to use comma and inside the tower code. Our second parameter is P tag. If I set this file, here you can see in my styler CSS file, here you can see it create two different group of classes. First, it select our paragraph tag, which is inside our XYZ class, and next, it's select another paragraph tag, which is inside the ABC class. If you want to use sudo class, yes, you can. Let me show you. First, I'm going to remove this class, and I'm going to use only XYZ class. And then in our second parameter section, I'm going to type N person, colon, our Psotoelector, which is Hober. If I set this line, here you can see it use Ober selector with XYZ class. Here you can see if you want to add two parameter, for that, you need to use N person sine. Let me clear this section once again. Suppose with XYZ, I want to add underscoe ABC. Let me show you then utter N person underscoe ABC. If I set this file, here you can see, it creates a new class XYZ underscore ADC. This was our first function which is selectnNSt. Let's talk about another function which is selector apene. Here I'm going to remove SelectonNST and I'm going to type selector apin. Similarly, in this function, we need to pass to the two parameter. And this appen function going to combine both of this parameter. Let me show you. In our first parameter, I'm going to use paragraph tag. In our second parameter, I'm going to use a class. Here I'm going to type dot ABC. Selector nest function basically provide space between two parameter. But in append function, it's going to combine both the parameter. If I set this file, you can see the result. As you can see, there is no space between P tag and ABC class. I want to say it creates a single select. His means all the paragraph tag with ABC class, height should be 20 pixel. Let me show you another example. Suppose I'm going to use dot XY Z class. In our second parameter, I'm going to use underscore Copy. If I set this file, as you can see, it creates a new class, XYZ undersco copy. In our previous function, we need to use N person sine to join these two parameter. But in this function, we don't need to use person sine. Now, let me modify this selector and jump one step further. Super coopy I'm going to use Coma, and here I'm going to type underscoimage, IMG. As you can see, in our second parameter, we use two different names, copy undisco copy and underscoimage. You can take any name as you wish. I I set this file, as you can see, it creates total two different selector, XYZ underscoe copy, and XYZ underscoeimage. Basically, it combine our first parameter with copy, and again, it combine our first parameter with image and create two different selector. This is it for this tutorial. In our next tutorial, we are going to learn about our remaining selectors. Thanks for watching this video, stay tuned for our next tutorial. 20. Sass Selector Functions Tutorial Part 2 : Hello, guys. Good to see you back. Once again, we are in my video studio code editor, and as you can see, side by side, I open style dot cs file, and stylet CSS file. In this tutorial, we will continue with selector function. I'm going to start this tutorial with selector RiplesFunction. Let me show you. For that, I'm going to type selector hyphen place. It is understandable from the name itself, it will replace something. In this function, basically we pass total three parameter. Suppose in our first parameter, I'm going to pass C dot XYZ. This is our class name. In the second parameter, we need to pass which we have to replace. Suppose I want to replace dot XYZ class. Here I'm going to tie dot XYZ. Now in our third parameter, we need to pass the new value, and here you need to pass the value, you want to replace with. I want to replace dot yate with dot ABC. If I set this file, here you can see the result. As you can see, there is no class name c dot XYZ. It replace dot yate with dot ABC. That's why it passed c dot ABC. Let me show you another example. If there is no H one class, H one in our first parameter, in that case, if I set this file, as you can see, it do not replace dot XYZ with ABC. It's simply print C dot XYZ because this reples function cannot find H one in our first parameter. That's why it print ADTs. This is the uses of selector repres function. Let's talk about our next selector function, which is E superselector. Here I'm going to tie is hyphen superselector. Basically, we use the selector for testing purpose, not the modifying purpose, and it's written only one with through either falls, and to understand it, we need to pass through the two parameters. In our first parameter, we need to pass a selector, but we call our first selector superselector. Suppose our super selector is A, and we'll call our second parameter sub selector. And in our sub selector, I'm going to pass a dot, and also I'm going to set a class X Y Z. If I set this file, it's going to return true. But the quotien is why? Because this function going to search our super selector in our sub selector. If superselector exist in our sub selector, in that case, it's written true. Let's set this file. As you can see, it's written through air. Basically, we use this function with IP condition. But if I replace their position, att XYZ. If I remove XY from our sub selector, and the set this file, as you can see, it's written falls because this super selector doesn't exist in this sub selector. That's why it's written falls. This is the usage of super selector. Let's talk about our next selector, which is simple selector. I'm going to remove this one and I'm going to type simple hyphen selector. Using this selector function, we can divide our selectors. If we pass combined selector here, it's going to divide the selectors. Let me show you. Suppose I'm going to pass here at ABC. If I set this file, here you can see it divide our selectors. It creates one selector A and another selector dot ABC. This is the usage of simple selector. This is it for this tutorial. In our upcoming Tutorial, I'm going to cover the remaining selector functions, selector unify and selector extend. Thanks for watching this video, Stu for our next tutorial. 21. Sass Selector Functions Tutorial Part 3 : Hello, guys. Good to see you back. This is our third tutorial, related Sas selector function. In this tutorial, we are going to learn selected Unify function and selector extent function. Let's jump into the Visual Studio code editor and see how we can use this function. At first, I'm going to call selected Unifi function, selector Unify. In this function, we have to pass total two parameter. Suppose in our first parameter, I use on the anchor tag, and in our second parameter, I'm going to use dot info. Basically, this function trying to create a match between the two parameter. If I set this file, as you can see, it create a match and create a new selector, at info. Let me show you more example related to this function. Suppose in our first parameter, I'm going to type ad active. And in our second parameter, I'm going to pass at info. If I set this file, as you can see, it creates a new selector, adt active dot info. Which means it's going to select on the anchor tag with active plus, otherwise info class. Then it's going to apply the CSS. But if I pass to different selector, let me show you anchor tag in our first parameter and H one tag in our second parameter. If I set this file, as you can see, it's written arrow because it did not create any combination between two parameter. This is the usage of Unify function. Let's talk about our last selector function, which is selector extend. I'm going to remove selector Unify and her I'm to type extend. This function also work like selected Unified function. Basically, this function try to extend a class and try to create a new selector. And in this function, we can use total three parameter. Suppose our first parameter is anchor dot info, and in our second parameter, I'm going to pass on the Anger tag. A, and in our third parameter, I'm going to pass a class dot link. So this function, trying to match second parameter with our first parameter. If they found a match, then it print AI, and then it tried to create combination with link class dot. If I set this file, as you can see, first, it create a combination at info. Which means it print as is because it found anger tag in our first parameter. That's why it print Asit is, then it create a combination dot info dot L. This is another selector. This function always create a strange combination. Let me show you another example. Now, in our second parameter, I'm going to pass H one tag, and in our third parameter, I'm going to pass H two tag. If I set this file, as you can see, it print our first parameter as it is, and it do not try to extend our selector. Because it did not found any match in our second parameter. That's why it cannot extend our selector. Basically, we do not use this complex selector function in our project, and most of the time we use selecto next function, selector apenFunction, and selector repress function in our project. This is it for this tutorial. In our upcoming Tutorial, we are going to start map functions. Thanks for watching this video, stay une for our next tutorial. 22. Sass Map Functions Tutorial : Hello, guys. Good to see you. Once again, I'm back with a new tutorial related says, and in this tutorial, we are going to learn map function. At first, let's try to understand what is map. In our previous tutorial, we'll learn about list function. This is the example of list function. As you can see, in a variable, we say total three el, ten, 20, and 30 pixels. As you know, we can store multiple value in list function. Similarly, in our map function, we can store multiple val. But the process is different. Let me show you. As you can see, this is the example of map function and we say total two value here, 405 hundred. But there is another value inside the inverted codes. One is regular and another one is medium. These are keys. These are map keys and these are values. It's mean regular value is 400 and medium value is 500. As you know, in our list, we have index. Example, our ten value index is one, 20 value index is two, 30 value index is three. Using index, we can specify the position of this v. Using their position, you can get the values. If you want to extract third index value, then it's return 30 pixel. But in maps, we do not use indexes. Here we use keys. Here we can set different name for our keys. This is another example. Here you can see we use a color name green and for green, we use x disial value. Similarly, for blue, use hex decimal value. Also a function in our map, similar to the list. And it has some inval function also. Here you can see, we have to six different map functions, map gate, map merge, map remove map keys, map values, and last one is map has. We are going to cover all of this one by one. Without wasting your time, let's start the practical. As you can see, I already open my Kuala application. Now you can see side by side, I open style CS file and style CSS file. At first, I'm going to create a variable and our variable name is font to it, dollar, font wait. Then colon. After colon inside the round presses, at first, I'm going to create our key and our first key is regular. With that, I'm going to pass our first value and our first value is 400. Then I'm going to create our second key, which is medium. Also, our value is 500 and our last key is bold. And the value is 700. Then Semgram to this line. This is our map, and now I'm going to use this map. For that, I'm going to create a class dot taste. Then inside the liss I'm going to use a CSS body which is font. Font wt. Now I'm going to call our first map function, which is map gate. Then inside the round dresses, we need to pass our map name and the key name. As you can see, our map name is font weight. Here I'm going to pass font weight. In our second parameter, we need to pass the key and for key, I'm going to pass bool. Inside the double course, I'm going to pass bold. If I set this file, as you can see, our font to it is 700. In Mp gate function, we need to pass to the two parameter, FontuO map name and the key. This function always written value of this key, as you know, our world key value is 700. But what happened if I pass different key which is not exist in this map function. Here I'm going to pass bones. If I set this file, as you can see, it's written nothing because there is no key name bones. If the key is exist, then map gate function written the b. Now, let's talk about our next function, which is map Key. Here I'm going to type map key. In Mp keys function, we need to pass to the one parameter, only the map name. If I set this file, as you can see, it's written all the key from this map. Our first key is regular, or second key is medium, and our third key is bold. This is the usage of Mapey function. It's written all the keys name. Let's talk about our next function, which is map ils. So here, I'm going to pass ls. It's also word like map key function. If I set this file, as you can see, its return all the values. And here we need to pass only one parameter like keys. This is it for this tutorial. In our upcoming Tutorial, I'm going to cover the remaining functions, map merge, map remove, and map hash key. Thanks for watching this video, stay tuned for our next tutorial. 23. Sass Map Functions Tutorial Part 2: Good to see you guys. In this tutorial, we are going to cover the remaining map functions, Map merge, map remove, and map haski. Let's back to the visor Studio code editor. Finally, we are in Visu Studio Code Editor, and we are going to start with map merge function. This function going to merge to differ a map and return one map. So we need to create another map. For that, I'm going to take a variable, and our variable name is lightweight. Weight. After semicolon, you said the round dresses, our first kinome is lightest, and our value is 100 and our second kinome is li and the value is 300 and semicolon to the line. Now I'm going to use map merge function. Here I'm going to type map merge. And if I pass another parameter, as you know, in this function, we need to pass to the two parameter. Here, I'm going to pass another parameter, which is another map, ie to weight. I copy the variable name and I'm going to paste it here. But there isn't problem. If I set this file, it's going to return arrow. Let me show you. If I set this file, as you can see, it's written arrow because map merge function return a new man, not a value. That's why we cannot print it directly as a value. We need to create a new variable to store this new map. Let me show you. I'm going to create a variable name merge. And now I'm going to call this function. I'm going to cut this function from this place, and I'm going to paste it here. Basically, this function merged to maps and written a new map, and now I'm going to call MapKisFunction. Here I'm going to type map keys. And here we need to pass our new variable Mug. Here I'm going to pass Mug. If I set this file, as you can see, it's return all the keys from our new map. As you can see, first it print regular medium bold from front to wet map, and then it print lightest and light from Light to wet map. This is the usage of map Merch function. Let's talk about our next function, which is map remove. We cannot call Map remove function directly. Similarly, we need to create variables, so I'm going to duplicate this line, and I'm going to change the variable name. Themve. And here I'm going to call map remove function, map, remove. In this function, we need to pass total two parameter. In our first parameter, we need to pass the map name. In our case, font to it, but in our second parameter, we need to pass the key name. Which key I want to remove? Suppose I want to remove bold key. So here I'm going to tie bold. And if I call our new variable remove in our test selector, and then set this file, as you can see, sit on regular and medium key only. I remove bold key. So this is the usage of remove function. Basically, we pass the key name which we want to remove. Now, let's talk about our last function, which is map hash key. So here, I'm going to type Map hash key. Basically, this function return to type of value falls either true. In this function, we need to pass to the two parameter. So as first parameter, I'm going to pass font weights, and as our second parameter, we need to pass the kiname I'm going to pass bold key. If the bol key in exist in our fontt map, then it's written true. So let's set the file. As you can see, it's written true. But if I pass wrong key name, bolder and then set this file, as you can see, it's written false. So this is the usage of map hash key function. So this is it for this tutorial. In our upcoming tutorial, we are going to learn says introspection function. So thanks for watching this video, stay tuned for our next tutorial. 24. Sass Introspection Functions Tutorial: Hello guys good to see you back. Once again, I'm back with a new tutorial related SAS, and in this tutorial, we are going to learn SAS introspection function. We already learn about number function, string function, color function, list function, selector function, map function. In this tutorial, we are going to cover introspection function. Let's see how many function we have in introspection function. As you can see, we have total six function in introspection. Basically, the function are using conditions. And it's always written Boolean value through other fails. Let's start the practical and try to understand how we can use these functions. Here you can see we are in visual studio code editor and side by side, I open style dot cs file and style dot css file. As you can see in our style dot CS file, we already create some variable num variable, char variable, list variable, map variable. With that, we create a mix in name border radius. Also create a function name sum. As you can see in our num variable, we save 15 pixel and in our char variable, we save a stream, roboto. In our list variable, we create a list using multiple value, 15 pixel, 25 pixel, 30 pixel, and in our map variable, we create a map. At first, I'm going to create a class where I'm going to check our introstection function dot taste. Inside the cali resis, I'm going to use a CSS property, which is padding. First, I'm going to start with variable exist function. Here I'm going to type variable exist, and here we need to pass the variable name. Basically, we use this function with p conditions and it's retten true or false. This function going to check if the variable name is exist in this file, then it's going to return true. Otherwise, it's going to return false. Let's check the variable. Here I'm going to pass dollar or variable name is map. If I set this file, you can see, oops, we need to remove the dollar sign and then set this file. Now you can see it's written true. If I pass a value which is not exist in our file, in that case, let me show you maps and then set this file, as you can see, it's written false. Let me show you one thing. As you can see, we check our map variable. But if I cut this map variable from this place and paste inside this selector, and then set this file, as you can see, it's also return true because if the variables exist anywhere in our file, in that case, it is going to return true. These are our global variable, but now map is our local variable. Let's jump into another function which is global variable exist. Let me show you. Here I'm going to type global variable exist. If I set this file, it's going to return false. Let me show you. As you can see, it's written false, but you can see our map variable is exist in our file. Then what's the matter? Because our map variable is not global variable anymore. Now it's local variable. Now our global variables are num variable, char variable and list variable. If I pass num here and then set this file, as you can see, now it's written true. Now, let's jump into another function which is mix in exist. Here I'm going to type mix in exist. In this function, we need to pass a mixing name. Here I'm going to copy the border radius mixing name, and I'm going to paste it here. If I set this file, as you can see, it's written true. But if I remove radius and then set this file, as you can see, it's written falls. Similarly, we have another function which is function exist. If the function exists in our file, in that case, is going to return true. Function If I pass the function name and our function name is sum and then set this file, as you can see, it's written true. Let's jump into our fifth function, which is type off. Here I'm going to type tip off. In this function, basically we pass a variable limb. Here we need to pass the variable lime. By mistake, I set this file, that's why it's written on this error and our variable lime is dollar list. If I pass this variable and set this file, as you can see, it's written our variable type, which is list. Similarly, if I pass char variable limb and then set this file, here you can see it written string. Our char variable type is string. This function always written variable type. Now, let's jump into our last variable which is in spat. Here I'm going to type in spat. I don't find any proper usage of this function because it's print as it is Vail. If I set this file, here you can see it sit on Roboto. We just use it for inspect purpose. If I pass last here and then set this file, as you can see it print our least as it is. I think it's not a very important function. This is it for this tutorial. Thanks for watching this video, stay tuned for our next tutorial. 25. Sass @content Directive Tutorial : Hello guys it's good to see you back. Once again, I'm back with a new tutorial related SAS, in this tutorial, we are going to learn SAS content directives. We already learn about SAS mixing in our previous tutorials. Using mixing, we can create reusable cone. We can use it as functions. As you can see, we create a mixing named BDI radius, and instead the mixing, as you can see, we use different properties for different browsers. Here we use prefix. For Chrome, we use web ket. For Mozilla, we use mose then I use the actual property border radius. As you can see, also we set the value. Whenever we need to call the mixing in our selector, then we need to pass the value as a parameter. As a result in our CSS file, it's written like this. Border radius five pixel. From here, we can pass multiple values. But from here, we cannot pass any CSS property. Suppose I want to set border style using this mixing, but it is not possible through this and to solve this problem, SAS introduce content direct trips. Basically, we use it to send extra data without mixing value. I want to say with this value, we can send extra data. Let me show you the example. As you can see, we use our same mixing, but here we use content directives. For that, we need to type at the red content. Whatever we pass it going to embed with this VLTs is the way to send data to this directive. As you can see, we call our mixing border radius and we set value five pixel. After that, we use tiss inside the caliss we need to pass the directive values Border style, dash. This is our content directives data. If I set this file, it's going to return this CSS code. After border radius, it set border style das. As you can see, it pass our extra data after border radius. Let's start the practical and see how we can use it. As you can see, we are in my user's Leo cod editor, and side by side, I open Stylod CS file and Styload CSS file. I already create a mixing named border radius, BD radius. And also, I call this mixing in our selector. And here you can see the result in our CSS file. And now I want to send extra data with this mixing for that we need to use Cali Races. And here I'm going to pass border style, so type, border style, border style, dst. As you can see, we send extra data through this mixing. But if you want to print the extra data in the mixing, for that, you need to use content directives. For that, we need to type at the red content. If I set this file, as you can see, now it's print boda style dans, we send the extra data through the content directives. Now we can send multiple property through this mixing. Let me show you another example. This time, I'm going to send complete selector through these content directives. For that, I'm going to comment out all the lines. Here I'm going to create a new mixing at the rate mixing our mixing name is taste. Inside the calicis, I'm going to use only content directives, add the rate contained. To use this mixing, I'm going to type include, add the rate, include our mixing name is taste. Then inside the calicis, at first, I'm going to take a selector and our selected name is class one. Class one, then inside the Cali resist, I'm going to use a propriety color. Color y so here you can see using this mixing, we are going to pass the complete selector with properties. If I set this value, as you can see, it create a class dot class one and inside this class one, you set a property color. And to run this extra content, we use content directives. Let me show you another example how we can use content directives. Suppose our class one selector is inside the ID one, to send this content inside the ID, we can use it this way. Let me show you. I want to set a IDH DAG and our ID name is men. Then inside the Cali resis, I'm going to pass this contain. I'm going to cut this content and I'm going to paste it here. If I set this file, as you can see, it put out directive content inside the Menu ID. That's why it print Menu first. We can use content directives this way also. Now menu become parent selector and Class one become child selector. Let me show you another example to usage of content directives. I'm going to comment out these lines. At first, I'm going to create a button selector dot button. Then inside the alyss first, I'm going to use border property. Border one pixel. I'm going to use solid border, son and I want border color. At the same time, I want to create a Hober selector for this button. Here I'm going to call a mixing, which I do not create it. At the red include. Include and our mixing name is Hober. Is the aliases, I'm going to set border with border with border with two pixel. Now I'm going to create the mixing name Her. Here I'm going to type at the red mixing. Mixing hover. Then inside the calibraces, I'm going to create a Posito selector for our class. For that, we need to use person sign in person column Hoger. Then inside the calices, I'm going to pass the content at the rate content. We use this person sign because we need to create the Her selector using button. If I set this file, as you can see, first, it creates button selector, and then it create button Her selector, and Boden with is our extra content data. This is it for this tutorial. In our upcoming tutorial, we are going to learn about it more.Thks for watching this video, stay tuned for our next tutorial. M 26. Sass @content Directive Tutorial 2 : Hello, guys, good to see you back. Once again, I'm back with a new tutorial related content directives. As you can see, we are already in my Visual Studio code editor, side by side, I open Style lot, cs file, and Styllod CSS file. Most of the time we use content directives with media query. Let me show you an example with media query. For that, I'm going to comment out all the previous codes, and here I'm going to take a body tag. Then inside the alyss, I want to set a background color. Background. Background gray. And now I'm going to create three different media query. At the red media screen, and inside the round verses, I'm going to use maxwPpty max W I want to set max 1,300 pixel. Then inside the aliases, I'm going to pass a selector and our selector name is body. I'm going to use the same selector and the same property. That's why I'm going to copy this section and paste inside the aliases here I'm going to set red background color. So when our screen resolution match with this media query, then it set our background color red, and now I'm going to create two other media query for different resolution. So I'm going to duplicate this section, and here I'm going to set 1,000 pixel. I want to say blue background color. Blue. So at 1,000 pixel Brazil wreath it set our background color blue. Again, I'm going to set another media query. So I'm going to duplicate this portion, and here I'm going to say 800. At 800 pixel, I want to say green background color. Here I'm going to type green. This is a normal CSS method. If I set this file, here you can see the result. As you can see in our CSS file, it print as it is, but now I'm going to use content directives for media quading. To use content directives, we need to create a mix in. At first, I'm going to create a mixing at the rate mix in. I want to use this mix in for media screen. That's why I'm going to set mixing name media. Then inside the round dresses, I'm going to pass a parameter, and our parameter variable is weep. Inside the alorss I'm going to pass this code, media screen. Copy this code and I'm going to paste it here. Here I'm going to pass over with variable. Dollar. Then inside the calibrss I'm going to use content directives, at the rate contained. Then semicolon two in this line. If you want to use this mixing, you need to include it. But first, I'm going to comment out lines, the media queries. I don't need this now. Now I'm going to include this mixing with Include QR, at the rate include. And our mixing name is media. Then inside the parenthesis, we need to pass the value. As you can see, our first max is 1,300 pixel. Here I'm going to pass 1,300 px. Then inside the calibraces, here I'm going to pass our additional content for content directives. Our first selected is body. Inside the Calibrass I want to say background. Background. Rate. As you can see, we use total three media screen resolution, 1,300 pixel, 1,000 pixel, and 800 pixel. I want to duplicate this section two time. Here I want to pass 1,000 pixel. At 1,000 pixel, I want to say it blue background color. Blue. In our last meteor equity, I want to pass 800 Value. Max with 800 and here I want to set background color green. If I set this file, as you can see, it sits on the same result. I print as it is. But this time we don't need to use media query word multiple time. We pass our content through content directives, and we already create a mix in for media query. From include section, you can change the screen size. Suppose I'm going to pass 700 pixel. If I set this file, as you can see it set our media query 700 pixel. Not only that not only that, you can pass multiple property. Let me show you. With background, I want to say border. Border two pixel. Solid. And our border color is white. I'm going to set this file, and here you can see the result. Now at 700 pixel, it set our background color green. Also it set a solid border with white color. This is the best usage of content directives. I hope now it's clear for you. So thanks for watching this video. Stay tuned for our next Tutorial. 27. Sass @media Directives Tutorial : Hello, guys, good to see you back. Once again, I'm back with the new tutorial related SAS. In this tutorial, we are going to learn SAS media directives and at true directives. Let's try to understand what is media directives. Here you can see a class named container, and we say container with 1,100 pixel and we center our container using margin. If we create mediaquery using CSS, in that case, we need to use mediaquery in this way. You can see, we set a breakpoint at 1,150 pixel and inside this media query, we set container width 900 pixel. When browser width achieved 1,150 pixel, they need to reduce our container width from 1,100 pixel to 900 pixel. As you know, for responsive purpose, we need to create multiple breakpoint for different screen size. You need to create a lot of media query. Also, we need to type the container width every time. Unnecessarily, we need to set container width multiple time. To resolve this kind of problem says introduce media directives. To use media directive, we can handle this situation. So let's see how we can use it and reduce our unnecessary lines. So as you can see, finally, we are in my Visual Studio code editor, and side by side, I open style Dot CS file and style dot CSS file. I already open my CSS directory in our Koala application. So first, I'm going to create a class, and our class name is container. Then inside the Cali resis, I'm going to set container week 1,100 pixel. Also, I'm going to set Margin. Margin, I want to center the container, so I'm going to use zero pixel. Also, I'm going to use Auto vile and now I want to set different media query for different breakpoints, but we are going to type less code in cease. Inside the aliases, I'm going to create the media coin at the rate media. Media screen, and inside the round process, I'm going to set the breakpoint. I'm going to type max hyphen with 1,150 pixel. So this is our first break point. So at 1,150 pixel width, I want to reduce the container width. For that, we don't need to type container again, we need to type with property. Width 900 pixel. As you can see, her use nesting meth. Similarly, I'm going to create two other break points. So I'm going to get this section two time. Here, I'm going to set max with 950 pixel. At 950 pixel browser width, I want to set container width 700 pixel. As you can see, we don't need to use container selector all the time. Similarly, at 700 pixel width, I want to set container with 500 pixel. Basically, you can see in my CS file, we work with only one selector. But if I set this file, as you can see, it's create total four different selector. As you can see, our first selector is our container, and three other selector is our breakpoints. In SAS, if we use at media inside the container section, we call it media direct names. Here you can see the difference. In our CSS file, every time inside the media screen, it create container selector. Then inside the continuer selector, it adjusts the container we. But in our cs file, if we use media directives, we don't need to use continuous selector again and again. This is the usage of media directives. Let's try to understand our next directives, which is at root directive. In our previous tutorials, we'll learn about SAS nesting. And here you can see the example of nesting. As you can see, there is a parent class inside the parent glass, we have a child class, and also we have a sub child class and cut tag. As you can see in our parent tag, we set with 1,100 pixel, and in our child tag, we set color red, and in our subchild tag, we set color pink. If I compile this file, it's going to return this CSS code. As you can see, it creates total three different selector parent selector parent and child selector, also it create parent child and subchild selector. As you can see, it's unnecessarily create parent tag in our CSS file. But I don't want parents selected every time. We can remove it using SAS. To resolve this problem, SAS introduced at root direct teams. In the next tutorial, we are going to learn how we can use it practically. Thanks for watching this video, stay tuned for our next tutorial. 28. Sass @at root Directives Tutorial : Good to see you guys. In this tutorial, we are going to learn at root directives. As you can see, side by side, I opened style dot CS file and style dot CSS file. At first, I'm going to create a nesting group. At first, I'm going to take a parent class dot and our parent class name is IM. Then inside the cali verses, I'm going to use CSS property and our CSS property name is colored, colored green. Then inside this parent class, I'm going to create another class. I want to create a subclass and our subclass name is item per item rapper. Then inside the caliss I'm going to use CSS property and our CSS property is color. Color red. Then I'm going to take another selector in our item wrapper, which is image. Image inside the coalss I'm going to take with property, we, we, 100%. Then outside this item wrapper, I'm going to take another class. I want to create another subclass of this item, and our selector name is dot item child. Then inside the calss I'm going to use a CSS property background. Background pink. If I set this file, as you can see, it automatically create to the fourth selector. Our first selector is for our item, and our second selector is for item wrapper and our third selector is for image, which is inside the item wrapper. Our last selector is item child select. Now, if you notice you can see, it's repeat item glass every time. Now you decide you don't want item class for this portion, for item rapper and for our image. To resolve this problem, SRS introduce at root directives. You need to type here at root directives. Here I'm going to type at the red at troop. Then I start Calibass we need to close this class after image tag. Here I'm going to close the cis and then I'm going to set this file. As you can see in my CSS file, it remove item from our selector. Here you can see there is no class name item. It's print item, item rapper image, but in our us selector, you can see the item class again. This is the usage of at root directives. Basically, it's unnecessary selector names. I hope you got the point. Let me show you another example of at root directives. For that, I'm going to comment out this section, I'm going to set this file. At first, I'm going to take a media at the ad media, our media name is print. Then inside the Caliss I'm going to take a class dot item Lepper. Then inside the caliss, I'm going to take another selector, and our selecting name is item. Then inside the calices, I'm going to use CSS property and our CSS property is color, color read. If I set this file, you can see it print our media. And inside this print you select item per item. Then inside the caliss it print color red. But if you notice, you can see there is no CSS property in our item wrapper class. This property is from item class, but it's also select this selector, item wrapper. But I don't want this item wrapper selector. If we want to remove this item wrapper class, then we need to use at root directives. Et me show you. After item wrapper, we need to type at the red at root directives. Then we need to start our Calibase also we need to end this Calibase after that. If I set this file, as you can see, it remove item rapper and now it's select only item class. As you can see it directly select item selector. It ignore item wrapper selector, which is completely unnecessary because there is no CSS property inside the item wrapper class. I hope now it's clear for him. One thing you need to remember at true directives come with predefined and we call it without. Let me show you the example how it's work. At first, I'm going to remove these lines, item wrapper. Then inside the media print, here I'm going to take a class and our class name is container. And inside the Cliivess here I'm going to take 22 property. Our first property is with 130 pixel. Also, I'm going to take another property which is colored, color read. We create this thesis for print purpose. If someone tried to print the page, then it going to print our container with 130 pixel and color read. But in our actual website, I don't want this color and we. For this, here I'm going to use our at root directives. At the read at root. Inside the calices here I'm going to use the same properties. But here, I'm going to change the values. For we, I'm going to use 100 pixel and for color, I'm going to use green. It's mean if someone tried to print our web page, they need to return 130 pixel with and red color. But in our website, it through 100 pixel and green color. Now I'm going to use the predefined value of at root directives. Inside the round dresses, I'm going to pass without, without and here we need to pass a value named media. It's mean, it is also part of container class, but without media. After set this file, you can see the result. As you can see, our print media work this point to this point and after that, it print without media. This is our website CSS and this is our print CSS. I hope now it's clear for you in the next tutorial, we are going to learn control directives. Thanks for watching this video, stay tuned for our next tutorial.