We are currently getting ten posts on our Sapper homepage, however in the real world that number would most probably be much higher, our WordPress site might have even hundreds or thousands of posts, and of course, we don't want to show all of those posts on our homepage. So, best way to handle that would be pagination, and that is what we are going to be doing in this episode of creating Svelte, Sapper and WordPress site.

Also I'm going to show you how you can add Scss/Sass support to your Sapper project.

In this episode we are going to learn how to paginate our post list and how to add Sass support to our Svelte, Sapper and WordPress application.

Pagination And Sass Support

First I'm going to show you how to enable Sass in your Nuxt static site, after that we are going to learn how to create a global CSS file for all your global stylings. 

I'm also going to show you how to make your mixins, variables and functions available throughout your site and all of your components, and lastly we are going to learn how to extract all that CSS into CSS files instead of having all our CSS inlined at the head of our pages.

In this episode we are going to learn how to handle CSS and SCSS in Nuxt.

Handling CSS

In this episode we are going to install Sage, check out what the theme structure looks like, and what specific files and directories do. And then I'm also going to show you how to make compilation of SCSS a little bit faster. Because Sage is using Webpack for SCSS compilation, and that is unfortunate because Webpack is not very fast when dealing with SCSS.

In this miniseries we are going to take a look at Sage WordPress starter theme, and how it can make our lives as theme developers much  easier.

Install and Overview

Webpack is used to bundle your .js modules into a single file, and you can think of modules as files. 

JavaScript does not natively support file includes like some other languages. So that is where Webpack comes in, it will bundle your files so that almost all browsers can read them.

It also helps us organise our JavaScript app into multiple files. Which we can then import and use them when needed. 

Webpack is also much more than just module bundler, it could also be used as task runner, and some developers are using it exactly like that. Although in this video we are not going to go into detail about Webpacks capabilities,  I will show you an example of how you can compile scss files with Webpack, so that you can get a taste of what Webpack can do.

In this episode we are going to cover basics of Webpack module bundler.

Webpack

Sass is a CSS extension language that shares some similarities with "normal" programming languages in that you can use variables, arrays (which are called maps in Sass), functions, mixins etc. of course since the browsers can't interpret SCSS files you have to compile them down to normal CSS. We have set up our task runner to do just that in the [previous episode](http://watch-learn.com/video-tutorials/basic-frontend-tools-gulp) so be sure to check that out.

In this episode I'm going to go over the basics of Sass and what it can do, this is in no way, shape or form everything the Sass can do, because I would need to create a whole series of videos to cover everything. But I think I covered most used things for Sass that you would find in th wild and they are a good starting point for you to start learnig Sass for yourself.

In this episode I'm going to show you how you can supercharge your CSS development by using CSS extension language called Sass.

Sass

We already learned about [Command Line](http://watch-learn.com/video-tutorials/basic-frontend-tools-command-line) and [npm](http://watch-learn.com/video-tutorials/basic-frontend-tools-npm-node-package-manager) so now we are going to use that knowledge to install a task runner called Gulp.  

Gulp is one of the most popular task runners and in this episode I will show you how to setup some basic tasks for your project. 

Tasks that will be covered in this episode are: 

* Setting up autoprefixer
* Setting up SCSS compilation of files
* Watching our files
* Setting up BrowserSync

In this episode we are going to go through the basics of creating tasks that are going to be used by our task runner called Gulp.

Tutorials tagged with: scss

Get in touch