A Super Simple Introduction to Sass | Clyde D'Souza | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

A Super Simple Introduction to Sass

teacher avatar Clyde D'Souza, Software Developer and Author

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

6 Lessons (10m)
    • 1. Class Intro

      1:26
    • 2. Introduction to Sass

      2:19
    • 3. Compiling Sass

      1:36
    • 4. Using Variables

      1:39
    • 5. Using Partial Views

      1:33
    • 6. Conclusion

      1:31
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

16

Students

--

Projects

About This Class

Hello and welcome to a Super Simple Introduction to Sass! My name is Clyde D'Souza and in this class I'll aim to make it very easy for you to take the first step using Sass. 

This class is divided into 4 easy to digest parts:

  1. An introduction to Sass. I'll keep it brief and cover when you might use Sass and when you might not use Sass.
  2. We'll look at compiling a Sass file into a CSS file. I'll show you an easy-to-use tool to do the same.
  3. Next, we'll start making use of some features of Sass and start by using variables.
  4. Finally, we'll take it a step further with partial files and I'll explain a bit more on that.

c81a7cb2

That's it! I've kept the scope of the class small and super simple so you're not overwhelmed when you start learning Sass. I look forward to seeing you all complete this class.

Meet Your Teacher

Teacher Profile Image

Clyde D'Souza

Software Developer and Author

Teacher

Hi,

I'm Clyde. I'm a full-stack software developer. I've also published a book titled Mama, Tell Me a Story which is available on these platforms. It's a collection of twelve short bedtime stories that parents will love reading to their kids over and over again.

In my spare time, I like to explore other interests like writing, teaching and I've also created many other projects in my spare time.

Check out my Skillshare classes below and let me know what you think. Happy learning!

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Class Intro: hello and welcome to a super simple interaction to sense. My name is slight, Sosa. And in this class I'll aim to make it very easy for you to take the first steps using cess . This class is divided into four easy to digest spots. Number one, an introduction dis s keep it brief, and I'll cover when you might want to use sense and when you might not want to. You sense number two. Compiling a sense file into CS is on. Show you exactly the tool that I'll be using and how you would go about it. Number three. We'll start making use off some sense features and start by using variables on Finally, number four will take it a step further by using partial files and I'll show you how to use them. And I'll explain a bit more on that. On the end of this class, you're free to explore creating a website, using says and then sharing it with the rest of the class. So that begin. All appreciate the efforts that you have put in. That's it for the intro. I look forward to seeing you all complete this less 2. Introduction to Sass: all right. So before we get into practically using says, Let's have a look at what says Actually is and says Stands for syntactic, Really awesome style sheets. Success is a pre processor that means a says file needs to be compiled into a CSS file on. Only then can your browser understand. The CS is rules written, so browser cannot directly support a satisfy. It has to be combined into a cease fire. SAS is very feature rich, and and in this class we will have a look at just just a couple of features, not more. But of course, there's a whole list of features available in san slang that you can learn and use in your satisfied. The second point I like to make is that every valid ceases file is a valid satisfy. All right, so right now what we have in front of us is an extremely filed with the linked CSS file, and on the right, you can see the output a valid some colors to just just make sure that we see the output. So what will Right now? What we do is we look at adding a SAS file that is the dot s CSS file. And then we'll see how we can compile that into a CSS file and then see the output off the file. Now, since SESS is a pre processor for CS is the easiest way to convert your existence. Years file into says it's to just rename this he ss file too dot SCS is just renamed the extension on, then where I'm going to is just drag and drop into my cess folder. And now, obviously, you're thing that we'll just rename the link of the extra after the SAS file on. It should all work. But if you notice it does not work, and the reason it does not work is because the browser does not actually support the sense while it has to become pile into a CSS file, and only then will the browser understand the these ceases rules that are returning it 3. Compiling Sass: now to compile yourselves, file into a CSS file, we need a compiler. And for this class, we're going to use scout APP rights will down or the stool from this particular website scout hyphen Abdullah Io and will download the stool. And we look at how to compile ourselves file indices for using the stool. All right, let's open Scout app and quickly important project to scout up. So let's search for our demo website will add this folder and now you'll see the screen where the fold is ended. And now, which is to configure the style she directory. So in in Bordeaux, you obviously have to give the import directory, which is what? Which is the cess ful that we created. And in the Output folder you will give it the CSS folder where we can where all the compiles yeses will be stored so important in the sense output is the CSS folder. Okay, now that we have configured our style, she directories lead us, let us compile them. So observe these dirges carefully click on the play button to compile the sense folders and you can see that in our CSS folder we now have this year's is finally compile, sees his file. And now that we have our ceases file, that is gored index html file and change the reference to the actual CSS file. The moment we change that you've seen the output. We already have our color changes. 4. Using Variables: next up, we're going to use some of the cess features in our esus file, and the first thing we're gonna do is make use off variables. Right? So the baby defined Babel's is we have a dollar symbol, followed by the variable name followed by a colon and then the actual value. And then, of course, a cynical and golden at the very end. So right now what I've done is I've just replaced. I've just replaced the colors with the variable names. And and the good thing about variable names is that having read labels, you can also uses variables not just in one place, but in multiple places. So let's say if I had to If I have to change the foreign color, right? If there to change the phone Kala from red to blue, I don't have to rename all the references to read in this particular file to Blue. What I just need to do is it's just change the edge. One hyphen color. That variable has changed that value from red to blue, and it will automatically take effect in all these years. Is seizes rules that African. Okay, so now you know, the drill off how you were. Compile, Assess file to its CSS file. So let's bring up Scout EP and we just give this a quick compile. And now if we have a look at our seas, where you can see that the colors change to blue and is giving a quick refresh to the output changes the color from red to blue as well. 5. Using Partial Views: take it a step further. Let's make use off a partial fights. Let's add a partial file named underscore variables. Dot s CSS Now, partial files is basically used to split your SI score. So it's rewriting it all in one file, all in one cess file. You split it into multiple sense files. A partials SAS file is just like any other sense file rights. You can pretty much right all record that you were right in the normal sense file. The difference is all files prefixed with an underscore. So all partial files do not get compiled into its own ceases file. So a partial file has to be imported by the main says file. So what we're gonna do year is move all our variables into this partial file, and then we will import the partial file into the main dot CSS while the main file so very important the partial file. You do not need to write an underscore. You can just reference it by its name and you don't even have to use the daughter sees his extension. Now let's give ourselves file a quick compiled by using scout at, and we will see that as thesis filed remains unchanged. But the good part is that our colors have come through in the CSS file. 6. Conclusion: the website that I was using for this demonstration for this class is available on Get Hub So it's right in front of your screen and I will also give a link to the get up repository in the notes off this class. The best way to learn something is to try it out. And if you use says for your website, please share it with this class just posted in the comments below. And we can all appreciate the work you have done to help you on your journey with says I have built in Newgate package that adds a basic cess scaffolding to your project in case you don't have enough time to plan. I've also built a cess snippet back for visual studio to help you write Sasko. Both these resources are absolutely free that you can download right now. Finally, I encourage you to follow my teacher profile on skill shared fall immune, medium and on various social media platforms to stay up to date with what I'm doing. And I also encourage you to please leave some feedback and rate this class so that I can grow and improve. That's it for this class well done. And I hope you enjoyed learning a super simple introduction to assess