Name: 初心者のためのSassチュートリアル - 超大国のCSS (Sass Tutorial for Beginners - CSS With Superpowers)
Uploaded: 2021-01-14T10:24:08.000Z
Duration: 2 h 2 min 59 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

様態の副詞

We're going to cover the basics of Sass, and then we'll create a project from scratch and deploy it, and I'll show you how you can easily include sass in your workflow.

転換語

And I want to give a big thanks to Bo and free code camp dot org's for publishing this video free code camp is an awesome resource.

And on behalf of the community, thank you for all that you do.

So before we get into this video, I'd like to quickly let you know who I am.

I'm a husband, a father and a programmer.

I've got over two decades of I t experience.

I recently decided to create a YouTube channel, and initially I just wanted to help people.

But after my first couple of videos, I realized that it's actually helping me to become a better programmer.

I do research for every video, and a lot of times I come across things that I didn't know or a better way of doing things.

So I'm learning and teaching at the same time.

So when win, my channel is new, but I upload new videos every week had greatly appreciate it.

If you check out my channel and subscribe and that's enough of this, let's get into the video.

So we're gonna go over the basics of sass and set up our environment, and then we'll go through a project from beginning to end using SAS.

There's time stamps in the description if you'd like to skip through certain parts.

It's a CSS extension language and gives your CSS superpowers.

Once you see how easy it is to write and how logical and organized it can be, you'll never write Plane CSS again.

Let's look at what you need to write CSS.

First, you'll need a code editor, and I recommend V s code because it's open source and has great extensions and awesome community support.

Now your browser can't read SAS, so it has to be compiled into plain CSS.

There's several ways that we could go about this.

We could use no j s to run a compiler that will watch our SAS files and compiled them automatically for us.

But we could use Gope to do the same thing or we could use an extension in V s code.

And for this video, that's what we're going to do.

Another extension that we're going to use is live server.

If you're unfamiliar with V s code and how to set it up for Web development, I do have a video on that.

I'll have a link in the description below.

All right, I'm gonna quickly walk you through installing the live SAS extension so N V s code will go to extensions and we will search for live sass.

Go ahead and click on that and then click install.

And after that's installed, we're going to look at some settings.

So let's go to our settings, and then we'll search for sass and then click on Life's Ass compiler there and then you'll see in the format settings.

We're gonna want to change the save location.

Now these settings are a personal preference.

By default, it will compile your CSS and put it into the same directory.

And I prefer for the compiled file to go into my distribution folder.

It's a little click on edit in settings, Jason.

And then here we're going to add some settings.

So the default is at the top here, format is expanded, so there's no compression going on.

The extension name is dot CSS and then the safe path is no.

So that means it's going to go into the same directory as your SAS files.

So you could also change the formats who compressed if you want, and it will go ahead and compress.

And men, if I your CSS all in one shot and then you could change the extension name to dot men dot CSS and then you see what they're where we can put it into our distribution folder.

So I'm actually gonna do just a combination of the two for this video.

We're gonna keep the format at expanded and the extension as Nazi SS, and we're just gonna change the safe path.

Thio slash dest slash CSS and then we'll save that and we're good to go.

All right, now that we have all of that set up, let's create a standard folder structure here.

So I have a new project folder that I've created and opened it in V s code.

And let's go and create a folder here called Dist.

And then within our dissed folder will create in html file index dot html.

We'll use Emmett Will use exclamation enter, get a template here.

And we'll just name this says tutorial that will add a link here to our CSS.

So currently, we don't have one, but we will be adding it noticed the extension here is CSS not sass or S C.

So this CSS file is what's going to be compiled eventually once we've created our SAS files.

Now, before we create our SAS files, it's important to understand that there are two syntax is supported by SAS.

S s syntax and it uses the file extension s C S s.

CSS is basically a super set of CSS, which means essentially that all valid CSS is valid.

SCS ESAs Well, I'll show you that in a minute.

But because of this similarity, it's the easiest syntax to get used to and the most popular and the other syntax is the indented syntax And this was the original sin tax Versace.

The indented syntax supports all of the same features as S CSS, but it uses indentation instead of curly braces and semi colons.

There are a few other minor differences, but we're not going to be using S a s s in this video, so we're not gonna go over those, All right, so we'll be using the S C.

And so let's go ahead and create that structure.

So be sure you're in the root of your project.

And then within here, we're going to create a main dot F C.

Now that we have that file open, we've got our extension installed.

So go ahead and click on that and you're going to see an output here.

We'll see here that it's watching for our SAS files now, and it is compiling and generating them automatically.

And now it's watching for us to save the file again.

And when we save it, it's gonna automatically re compile and create that CSS file every single time that we saved the document.

And so we didn't add this CSS folder here, but now we have a folder in dist.

And so that extension created the folder and created our CSS file.

And of course, we don't have anything in our SAS file and so I don't expect to have anything in our CSS file either.

So remember we said that any valid CSS is also valid sas So let me show you what I mean by that store here in our SAS file, we can ad let's just do something generic here will say body fat ground and we'll set it to blue and I'll hit save and it automatically compiled or CSS for us.

So now if we go to the CSS file, we'll see body background blue just the same as we see it here So we can write plane CSS in our SAS file and it will work just fine.

So I also have a live server installed, so I'm gonna go ahead and hit that Go live and here you see, we have a blue website So an important note here is that we should never modify the CSS file on Lee modify the S CSS file every time the compiler runs is going to overwrite the CSS file.

So the first SAS feature that we're going to look at is variables.

Now, you might say CSS has variables to, and that's true.

CSS does have variables now, but SAS has had variables long before CSS.

Currently CSS variables compatibility across browsers is about 90%.

And I don't see any reason not to use the SS variables.

字幕リスト動画再生

初心者のためのSassチュートリアル - 超大国のCSS (Sass Tutorial for Beginners - CSS With Superpowers)

content

present

bold

position