Now we had a look at operators and variables and so on,
let's now dive into better imports and partials in this video. What does this mean?
We already got an import in place pointing to a CSS file
and if you import from a CSS, not a .scss or a SASS file, then SASS will leave this import as it
is,
if you check out the compiled file, you'll see it wrapped it in this URL function provided by default
CSS but it still works like default CSS
and let's have a look at how this import works.
If we open the developer tools on our page and we go to the network tab there and reload the page, you'll
see, we get three requests:
the index.html file and then main.css and the typography file.
This is how it works,
these are simply requested because we're importing typography in the main.css file.
Now sometimes you want to generate one big CSS file but still split it up during development,
so that you have an easier time managing it but still that you can spit out one big file.
And for our case here, this would make sense because in typography, we're again using our color, so it would
be nice if we could also use our variables in there.
So for that, I will create a so-called partial. Now a partial starts with an underscore in the file name
and then you can name it whatever you want, here I'll name it
variables.scss.
The idea behind a partial is that you can include it in many other files and behind the scenes, SASS will
ensure that it only gets included once or that its values are only used once.
So what we can do now is, we can go back to the main.scss file and take all our variables we have
in there and put them into our variables partial file.
Now we just need to import from that file to make sure that our code works again.
So back in the main.css file,
we again add an import statement and now we import from variables.scss,
like this.
If you save this, it successfully compiles the main.css file again,
it also successfully uses our colors and the other variables,
so this seems to work but you don't see the import statement pointing to the variables.scss file
because it only included this during the compilation step,
looked up the values and took it into account while compiling our code but it didn't add it.
How would I have added this anyways?
These variables are not supported by normal CSS.
So we're using a partial and we can also use the typography file of course.
Let's copy the import statement from the main.scss file,
let's add it to our typography file here, like this
and let's also now use our map then, so map-get
and now it's the
colors map and the main color.
Now this is not supported by the editor because this still is a CSS file,
we should turn it into an SCSS file too.
So now we turn this into SCSS file, which is now also using our variables.
What we can now do is we can save that file, go back to the main.scss file and adjust this import
too and import the typography.scss file.
If we save this and we go back to the main.css, you now see something different.
Now there no longer is an import statement but instead the code from the typography file was simply copied
into the main.css file and the values from the colors were replaced because it still understands this
import here in the typography file.
So now, we only have one big file and as a developer, we still work with multiple files which is typically
what we want because it makes our life easier.
If we go back to the running page and we reload it, we no longer see the typography request here hence
because this is now included in the main.css file.
So this is a cool way of creating one file which leads to less HTTP requests to be made, whilst still
ensuring that we have a comfortable of way working with these files because we still work with our files,
we now even have a separate file for the variables but we get one file as a result.
And this is with the help of partials for the variables file and the better import statement which will
actually include the content, as it does here
for this import instead of really making a separate request.