Into to SASS for Beginners - part 1 | Damiano Fusco | Skillshare

Into to SASS for Beginners - part 1

Damiano Fusco, Software Developer - Web Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (34m) View My Notes
    • 1. Intro

      2:31
    • 2. Basic CSS selectors review

      2:59
    • 3. What is SASS? (and what is not)

      3:21
    • 4. Intro to Variables

      4:19
    • 5. CSS Class Structure - part 1

      5:20
    • 6. CSS Class Structure - part 2

      6:14
    • 7. Using Multiple Files and Project description

      8:56

About This Class

Pre-requisite: Some knowledge at least of the most basic CSS selectors and how they apply styles to html elements

Things covered:

  • A brief of overview of the topics will cover and a quick teaser example of SASS
  • Quick CSS review: A quick review of the basic CSS selectors that will be used during the class
  • What is SASS? I will explain what SASS is and how it differs from CSS. Also explain the difference between the two syntaxes supported by SASS (SASS and SCSS). I’ll also introduce
  • Variables: I will introduce the concept of variables in SASS and how they are used to minimize duplication of code.
  • Styles class structure: I will explain class structure strategies that will enable the students to write code that is more easily maintainable.
  • codepen.io: I will introduce a free online tool that allows to create a project with an html page and .scss files to enable students to visually see how their code results in different styles being applied to the page. 
  • Small Project: I will provide an introduction to the project that the students will complete on codepen.io and where they will write all the SASS necessary to style a simple web page.

Transcripts

1. Intro: Eluay. Welcome to my introduce s class. My name is the man of Frisco. It bean a software developer for many, many years, in particularly focusing on the front end. And the goal of this class is to keep things very simple and give you a very quick don't to hurt, introduction, to assess and try to make clear what sass is. It was not and use very simple terms. I'm I don't wanna overcomplicate ings. I don't wanna talk jargon. So this class is aimed at the very beginners. So keep in mind, if you're a little bit more advanced, they'll get offended or the, you know, the over the judge or whatever. Remember, this class is a mother. Very beginners. I tried to get you up to speed as quickly as possible. Now that say, there is a little teaser year were I'm using an electrical, says mice there where you can see immediately how sauce works. This is a two mostly that will lead. There will just the land house, us works, But then leather. We use more advanced tools in applying these also to which the male other things. But right now I want to just show you give you a little bit of it. Quick intro. A teaser. A boa Sisi's one of the most Betty features ourselves is the ability for your valuables. Here you can see we have a very book, a warning color, and it's holding this extra Merkel of value, which is some kind of orange. And then what? I can do it that, um, I can clear the couple CSS class as one called Button a one called label. You can use the valuable year in place of the value, and you can immediately see in the stool they're suss generates T assess. So this is the actual sees, says Sauce on the left panel here, it's more like a programming language. They allows you to leverage more advance features. They're not currently in circuses, so you can bet organize your coat and and keep things more encapsulated and more simple, the avoid duplication. Of course, the things like that. So this is what SERC is basically and will dig a little bit more with the additional videos , and I hope you're gonna enjoy it. Thank you for coming 2. Basic CSS selectors review: a lot going treatise us again. And my name is the mayor of Frisco, and this section will be reviewing a little bit. Um, the few basic selectors in CSS says there will be using throughout this class. This section is know about suss, but just one of my sure, even though the prerequisite is that you already know some seer says the understand will be focusing only on the very first, a few basics letters. So the week and for Guzman says functionality and no get lost in all this you assess way of doing things. Eso the men 10 years to understand that you know, in in success you can select teens by HTML element the name. When you do that, all those elements will get your style. So in this case, for example, when they say the eve, you know everything is containing the men. Diva 17 began Sarette the year Biggers get everything in there, gets applied this color red. Let's try with the label and you can see all the elements of the label. Um are being read eso This is selecting all them elements by type my name if you prefer the other, where the other one that would be using them the most is the one by class name where you start with the doctor fix So labelled one, for example, with Select on Lee My elements. They have a class our tribute. Like these one. There's a value off label. One. Now notice Labour one doesn't have the doctor fix by. Here's your says, does it to have the doctor fix to understand that he's going to select the by class. That's I works. So if a ducal right now, only this label is being applied that color because that's the only element with the class . Um, if I do this for labels to, you can see that these are there to get applied the color red because they both have a label to class. Now the names are not really the best names. Their them using is just an example. But you know, this is enough to give you a fresh These additional selectors there will be using, like, you know, by both element and in class names. Sometimes, um, I will be avoiding if you're familiar with the hash sign. You know the selecting by a D will probably be avoiding that. But you know, the most basic ones is a real bad element. A name like these. Oh, backers name using the dark graphics like these and and so on. Um, now, in the next session, we listen to give us us on. Enjoy. 3. What is SASS? (and what is not): and I welcome to introduce us again. This is the marrow, Fusco. And this is Section three here with which back a little bit to these online tool called suss meister dot com. If we're going to explain a little bit what ISS us? A. What is not. So let's put back here the card that I gave you at the video beginning, Um, when we write Sal see on the left side and you can see the output on the right side on the right panel, which is this assess generated by sauce. Yet I remember some things that you see here are nauseous, says I really like a programming language. That's what really sauces. It's a programming language that's been based on, CIA says so the syntax looks very similar to see, it says, but Suss itself is not safe. I want to make that clear because a lot off people get confused initially and then they start saying things like why this is you know. Then why should I name these or whatever you know in then that we don't care where you name these because this is use internally by sauce. Two generations says so. Name it as you like. You know, you may want a full a naming convention because they out you. But in then, this is Suss. This is no success. Um, these are on the other end. You don't have it shows this is ourselves works. Now let me take a break you and explain one more thing that even the Willem we Mellie using this centers, which is called the specific name of the syntax, is called S C SS. Now, the confusing part Able says they come to with two different syntax is one is called sauce like the framework. And then there is they sent, They neither sent. That's called S C SS, which is this one of musically now, which is very similar to CSS, which, because uses brackets, they use a semicolon on the end. The other one that's called sauce like the framework doesn't do that. And I'm not gonna get into that. I'm not even going to give an example. You are welcome to Google. It look on their official website, but will be using S C Assess, which is the most use out there. I personally like it the most, and most people like it because if it's very close, are very close to see A says. So this is was just the bomb making clarity about what sauces was. It's not, um, one final things I remember. This is more like a programming language. The ultimately there is some kind of engine that reads these and generates the success out of it. So there could have been done with a very different language like JavaScript. Anything else you know, they chose Toby, based on, says says, because it's matches for Web designers like ours to understand these than another programming language. So remember, this is a programming language that the is threat. This US changing to generate browser compliance is says, That's where we'll be using for the HTML, Um, so thank you for listening a little move onto the next list. 4. Intro to Variables: a lawyer. Welcome to introduce us. My name is the middle Fusco. And these fourth session, we're gonna the little bit more with says we review variables again and try to understand what are the advantages and disadvantages of using them or know using them. I want to make a premise here. You're always welcome to go to the official suss website, which is https columns lest slash sas dish lung the calm In this case, I'm on the guide pager, but that is your work on to explore anything. The guy that's where you have in overview have everything evolved the functionality, this sauce, some of these things can get very complicated and very advanced way are initially focusing only on the most basic stuff here. But Aziz, we proceeded. Eventually, there's gonna be also in interest. A colas, part two sas, part two. We'd be exporting some of these more advanced stuff. Um, so that's say, the let's move on. And one tool I'm gonna use a lot which already show it to your body and say what it is is another line to and again, all these online tools are great toe very quick things that two lamb and you know, they're very nd because everything is there. You don't have to set up a development environment of the night through opened a 1,000,000 windows on your own computer. So you just having one webpage area you can see and learn in the same time, So we'll keep using these. And this is, for example, is a pen that they created every er where was showing you day when we were reviewing the basics. Assess the letters Initial would be using these that nine. Well, there is also the ability to do projects here where you can have separated files. When we get a little bit more advance, we'll do that. So let's get back to two on track here with valuables. And you probably see, um, some success called like this in the past where, um, you have some value that you like, like this kind of orange, which is an html color, um, with the letters after 90 year, maybe you use it as a color for a label and maybe as a background color for button and so on in, you know, you're the beginning. These called in a lot of places. Thesis value If you leather need to change that. It's kind of painful, isn't it? Beggars yet to go throughout all your senses? It's stained. It changed it. Now the nice thing. Both saws. Um, we can write this, but by using a valuables like we side initially. So going better ourselves. My stay, for example, You really solve these? This is a more complex assemble of based on the sisters. I was showing you. Yes, you can see. You know, we have a warning color. They are also value. And then we use the valuable everywhere we need to If we follow good naming convention convention in this case, you know, I'm calling it the warning color. Um, then you know, this is the CSS produces a Saturday. The justice I was showing you in the Copan here, so I don't know if you can see it now. You know the advantages they leather. If I want to change these to be, maybe it'll be darker or something different. Go year. Change it. And now it's change everywhere. I just needed to change it in one place here. Some That's very powerful. Um, if we can create as many as designers we want and separate them in different files. And that's where using a good naming convention is gonna be very critical. That's what we'll be touching a little bit about also in the Marvin's sessions as well. So thank you again for listening and let's move on to the next session. 5. CSS Class Structure - part 1: a lawyer. Welcome going toe. Introduce us. Minimize the metaphor school. And in this session, we're going to talk about struck class structures. Um, Chris Thatcher is no feature of cells, but we need to understand one thing that says works in a certain way. You may already be aware of that. And then you may be inclined to structure your suss in a similar way because, you know, he works insights that doesn't complain about that. So let me explain what I mean here. So, for example, let's say of Ah, this button, which is my base class for all the button elements. And then I have a more specific one that say's the one. They have a class name. Ah, warning. Give them these background color of warning color. As you can see her. This is a perfectly legitimate You can structure this way. They will produce the says, a suspect that this is where we're spending respecting to generate a class one that's more genetic. It the one that's more specific. But something is wrong. Yes, in a way, you know. You know they you know when 11 a gene suss way of doing things here. So the way you're doing it correctly. Insults will be too. Um, remove this part. It bring it inside These in. In this particular case, we need to use these. Ah, um per sign prefix in front of the dot Prefix has name said which part? Iss us here. The 1% is basically Stelling is telling this us changing that when it builds here says this is gonna be is more specifics later and not is there is no space between button and dot warning. No, you're from here. We see Assessor, you should know what that means. That means that this but honest every class name warning or if this was a class itself, it should have Bean should have had both classes. Um, if you don't have the 1% there, they're still okay by look at the space. The means Something different. If you remember from Theus sense, it means that all Children elements of buttons are gonna be applied. That warning. So in this particular case, we want the ampersand because they where we're gonna apply this successor bottom elements which back here to our Ben, it's by selecting it by element, but also by class So, as you can see, I have two of them here. The 1st 1 gets apply only that the full consider says in the 2nd 1 got supply The one with the warning class Name one other thing. I want to talk about the years that they can't in Carpenter we can actually use um says it specifically in this case. Like I mentioned early in the introduction in one of the introduction session that we since we use the specific sentence call s CSS from South, you can specifically say is that's the process process so that you wanna use when you start doing that. And now you can start writing sensors the right rear. So you don't anger those which back and forth to suss meister Jocelyn sassier. If you're following me with me, um, in the way you can actually see it here. The only down side there is the year you don't see. This is says that's produced. That can be a little bit confused. Confusing. No, There is another feature in Copan where you can do that, that you can actually see the systems produce. It will touch that later because it is the ability to create projects in using different files for right now, I just wanted to show you the here, you can use both. Basically, um, Capanna doesn't really care, but if you specify a C assesses your prep process, then you can also use the valuable so we can bring, um, these valuable from here into here. So basically, you are Sasko this year now, and we can actually replace this value here. They will work. Yeah, it's against he works. It's a little bit darker because at one point we change it. Someone made a story, and they there is orange color eso here, you can mingle in immediately. See, visually what happens to your HTML if you like the work the way? Yeah, I feel more like card oriented. I'm sorry. Here, in the sense mice there you can actually focus only on the sauce and you cannot immediately see this is says that's being generated. Um, let's say for the session in the next one will start looking other things. Thank you 6. CSS Class Structure - part 2: a lawyer. Welcome to introduce us again. And this is the man of Frisco. And in this session, I wanted to talk a little bit more on the glass structure they we touch in the previous one . Um, in particulary e, I felt like I mentioned the fact that you can use these without the 1% but other one are confused, so that ties a lot and into I was here Says works in Guinea. Every now is in SC assess. So we're using sauce. But we are known seeing this excess produce with which, through the other online page there to see that in a minute. But I wanted to focus on dish demand for a second. So we have battles that may contain directly text in this case, the fault and warning. But, um, now this running about on the statue of the same but as a class attribute so it will get applied this class. Now if we didn't have the space here, I mean, if you think I have the, um, percent. I'm sorry. This is says produce, if you remember correctly from the previous session Atletico bodies and put it here just to make sure. Um, you can see the success produces a space here which insists says it means all the Children of bottom they have warning class. We left that style apply to them. So, as you can see right now, these breaks it eats and my one in class here it's useless because I'm not really selected it. Because what are the sisters produces, say with a space writer means all the Children of but on the have class warming. So in this case, for a sample this other. But, um, I have a child element called span we to contain the actual test. If I'm going to give this one a class A warning now, this taste element is being applied the orange background in the white collar area. Of course, because what we're assess yourself before just be myself one more once more. This is Waas is produced. It says, you know, element bottom all Children, because there is a space here off Children they have across warning gets applied. This he says No, that's legitimate if you're doing the way. So it really depends on your stretcher. Html um so you use the 1% basically put that sauce. They both things have to be at the same elemental level. So both but on a class have to be on the same element when you use the ampersand. Okay? Because the success producers will be without spaces. No, to complicate a little be more things that I said that actually, the one I have this letter on button. I want to have a set of that school, Actually, with a class names I'm calling. I'm gonna call it my cool button, okay? And maybe out some duchess here, so it's more readable. So no, this isn't selecting nodding right now because it's not selective element type anymore. So all my buttons, should they have, like, Lasko my call button if I wanted to let them right. And this is I'm doing these justice show you a little bit better at this works. So in this case, my element as both classes, my call button and warning, right? If I copied these and looking since my stay here for Oh, sorry. I didn't mean to do that. Sometimes I go too fast. Answer these menus up there, but I don't want to do that. You don't need to change anything here. Um, so anyway, so as you can see, this says produce again. It produces two classes. They are both called Michael Button, but one is more specific again. There is no space here. So when there is no space, we're basically saying, um, both classes have to be there all on that element. Er must be the class. If this was the element name right now again, you know, this is really more suicides than sense, but just one of my sure they understand in sounds how with structures us. So they produces. They say says that we want and both things are legitimate, right? With this without one person or with them percent. But it depends our html a structure. So as we go forward in the next sessions, isn't that we encounter things like this? I will make sure we remind your bones some of these things because the syntax intent may get confusing. Citizens like, ah hover, for example, a debt. And it gets confusing because, or even things like these are, you know, this whole sort of things that get confusing because you see the some percent sometimes and things you don't see them in the yourselves came, you know, E. That's where the line is blurry, beating south since, he says, where people get confused this again, the 1% is South is no census, and that's where the line is. It's like you know, these Ah, valuable is suss. It's no census, so let's move on a And in the next session, we'll touch a little bit on the projects future or co pain so we can circulate in multiple fights and maybe start doing some more advanced things and maybe give a little project that you can do us part off. Um, this glass where you can actually write your own insists that supply that, too, a bear bondage to Mel Page that I'll give you. And again, it's gonna be very, very simple because this glasses ain't other very beginners. So thank you again and see in the next session. 7. Using Multiple Files and Project description: a lawyer. Welcome to introduce us. My name is the middle Frisco. And this session I wanted to go over a little bit. Another feature, that song called pan dot I all. Once you're registered there from your dashboard, there is the sparkle projects and, you know, with a free account that you can only play one project. That's the downside. But you know, it's good enough to get you going, um, with working with most people files which we and not done yet. Uh, that's important because, you know, you want to play some of these things, though some HTML they want to work with an environment that's more closer to where you will be doing in a real job. So let's get going here are you Click on this care menu and select a new project. And when you first get it is asking you a few things. If you want to use a template, we're not gonna do there. We're just gonna create in your file a will croak the fire index, uh, html and again is putting some placeholder for you here if you want. You know, I don't know much. It's familiar it down. Nothing's were there. But you're working to either put some stuff yourself here or, um, Cobian pays from some other things that you may be the f or follow these video and maybe try to do what I'm doing here. Um, we are gonna also creating new the rhetoric we call it styles inside the styles we're gonna get, um, a file Coal index s C ss. Now, this is mount enough that when a hit enter, you know that amusing sauce in particular, amusing. The s assess in tax it's gonna do this is gonna show you this ghost file ear called Dorsia Says so. Basically, um, in Europe main failure, you will be writing valuables like we did in a warning color or whatever you call that color warning. I think color warning and and A knows where you want the year. I'm sorry. I was supposed to use a dish so inventing the process occurs. You don't see anything yet because it's not. Um I didn't use a tenuous anywhere. Um, let me do this for a second. Actually. Limited. Right. So So let me at the very quickly your 1st 2nd the background color using that fireball and and then save. And then the lets, you know, 70 projects giving a preview. But the most important thing is that you should be able to see these. I'm not sure why we don't see it. It'll unless I am. And I have a narrow um, so let's keep moving. Your first. I got growing up. I put some, um, it's the Mel the day from my clip boarding. And when I click save All plus around. Did you this preview here? Oh, this is a very, very simple HTML page. It doesn't have much, um, and also spent into the wrong file earlier. Yes, Department to index process. Those says That's what Well, you wanna use here because that's the final it's generated. So this is part of understanding the reverence in your HTML era is to the actual CSS find. Notice us, um, in the game. This is a night environment to land. It's Noel you're abusing for production or for your daily job, but it's very good for them because you can see things happening very quickly in one place . It's all set up for you. You don't have to do anything, so so let's go back through year for a Sagan. And in the There he goes, There is the doses says uses giving you a warning is a this following is the output off the pre process or is no added edible? But at least you can see it so you don't have to switch like we were doing before between since my sister and the pan here you have anything, Everything in one place. Now, the downside is the year two files. You have one year for the German. A one here for this us. So, um, your job is gonna be to you know, the copy. Um, the system l I will post the somewhere in the comments and put it here and clearly own styles play around and, you know, make it nice doing. Now, I know some projects are very specific sailing, and I make this red, make these order to make this blue other or give it the border things like that because they're protected City is the usual reading. No, Some say it says I'm not gonna be baby sitting you in creature like a baby, you know? Yes, this crisis for very beginners. But I don't wanna I don't want to tell you what to do. You know, there is some elements here. Some already. Every class are three boots, Some don't. Maybe you feel throughout the class. Do it and then you have to a day a problem Class selector in the in yourself says Fine. Um, but it's all right here, and I can start something for you. Like, for example, where there is this button. He was already a class warning and you can see we we put it here and they should have applied that starless somebody's no working. So there could be a really, you know, part off something the you need to fix here. And I give you a hint. I'm talking too fast and probably I don't know this initially. So about bitterly. As you know, this year forgotten the one more thing in my reference. You know, I this is going for a folder. Koncius says Why my state year are in a folder. Cost I So that's my error right there. So as you pregnant this year, you get first thing, um, experience with these, and you know, it can be painful sometimes because you may get things like this. Where is the way to know working? But it's a good learning experience because it will first toe to go it shackle these things like okay, and my pointing to the right fight. So that's the very first thing, because otherwise nothing will work. And then things like last names or selectors and so on. Um, also, right now, as you can see, my bottom doesn't really look like the one we get a year because only carry over part of of this us. So what I can do? Um, just to finish this video. And I know that I can put at least some of that back saying, Savior run. You see, Now it's starting to look, really to be better some. So go there, start playing with that, do things like that. I was doing that, you know, start doing things that they removed removed the 1% see what happens. Um, tragic. Eight additional elements that tried to see you can maybe work with the other, select all it things were dead and starving and living in these on your own. And in the next, more advanced sessions of the class. Um, probably in part two will see it will use these much more. I will do much coolest stuff with touch on on maps and doing some loops with says where we can really simplify your curled on the south side. But you are why we do that. Yet you have become a little bit more programmer than a design because their son, Scott, that we level some lopes and things like that. So machine mingle with these and And I hope you enjoyed a list this first part for the interest. If you have any questions, please doesn't don't hesitate to post comments and asked me and I'm. And also, if you don't understand my accent, which sometimes can be hard on people. Please. You know I don't get offended. Please tell me and I'm assure, answer the questions and whatever you didn't understand. And if you think I can do something better, you're welcome to tell me that as well. Please. This was my very first class on skill share. So any feedback, any suggestion is welcome. Thank you for participating and enjoy. You know everything else. Thank you.