How to structure your sass within a Laravel application?

Final folder structure layout

Part of unravelling the front end series.

For those of you who don’t know sass is a post compiler for css. In this case the compiler adds all of the vendor specific prefixes so that you dont have to. As you may know there are regular updates to browser software and the pre processors take all the guess work away.

We are using a fresh installation of Laravel 5.4 and this has bootstrap-sass already installed.
If you are using Laravel Valet create a new project by opening the command prompt and typing:

php artisan laravel new sass-project

You can check to see if it is installed by taking a look at your package.json file, this is contained in the root of your project.

(Please note that the package.json listed below is not from a fresh installation of Laravel 5.4)


 “private”: true,
 “scripts”: {
 “dev”: “node node_modules/webpack/bin/webpack.js — progress — hide-modules — config=$npm_package_config_webpack”,
 “watch”: “npm run dev — -w”,
 “watch-poll”: “npm run dev — -w — watch-poll”,
 “hot”: “node node_modules/webpack-dev-server/bin/webpack-dev-server.js — inline — hot — config=$npm_package_config_webpack”,
 “production”: “npm run dev — -p”
 “config”: {
 “webpack”: “node_modules/laravel-mix/setup/webpack.config.js”
 “devDependencies”: {
 “axios”: “⁰.15.3”,
 “bootstrap-sass”: “³.3.7”,
 “jquery”: “³.1.1”,
 “laravel-mix”: “⁰.8.1”,
 “lodash”: “⁴.17.4”,
 “node-sass”: “⁴.5.1”,
 “pusher-js”: “⁴.0.0”,
 “vue”: “².1.10”
 “dependencies”: {
 “laravel-echo”: “¹.3.0”,
 “pusher-js”: “⁴.0.0”,
 “turbolinks”: “⁵.0.0”

The next stage is to create a sass directory within the resources assets folder. Create a directory called sass underneath the assets folder.

Within the sass folder create a new file called app.scss.

We can think of the app.scss file as the global file that is responsible for the preprocessing of the css.

Take a look at the screenshot listed below that shows how your directory will look

Folder structure at the start

Some developers prefer to have a large css file that they can look through in the event of a problem. This can be cumbersome and very time consuming if you are working on a large project and you want to change the colour or add margin and padding to an element on the page.

We need to think about how we are going to divide up our front end in to individual sections. The reason why we are doing this is because it is easier to manage the front end, if it is divided in to byte sized chunks.

Byte sized chunking of CSS


We will start with resets

Resets are essential tools within a web developers toolbox because they will create a blank canvas as they say in the world of art.

A css reset is a short compressed minified set of css rules that resets the styling of all HTML elements to a consistent baseline.

Create a folder called base and underneath it create a new file called _reset.scss. Notice that we name all of our sass files with an underscore.

The reason why we do this is so that sass recognises this as part of a compilation of scss files that the compiler needs to compile down in to a single file.

In our case we will add the following resets to this file



We need to manage our typography within our project and to do this we need to create a typography scss file within the same folder. We will place all of our typography within here. Create a new file called _typography.scss

Take a quick look at a snippet of our typography file:

The next stage is to further divide our sass in to a components section. This is where we will have the buttons, navigation and utility sections.



We will now move on to the navigation, go to the components folder and underneath create a new file called _navigation.scss.

The navigation area is where all of the navigation components (usually at the top or side of the page) are stored.

Take a look at our navigation file below:


BEM syntax

We will create a file called utility.scss and this is where we will place the BEM related syntax utility css classes.

What is the BEM syntax ?

If you dont already know BEM syntax is a methodology that helps you create reusable components and code sharing on the front end. It enables you to write css syntax that is easy to understand this is because it demonstrates the explicit intention of the developer in the explicit naming convention of the class.

For example

.is — beige {
 color: #f8f1dc;

As you can see from the above example the name of the class reveals the original intention and this is to set the colour to beige.


Underneath the components directory create a folder called utility.scss here is a sample of our utility.scss file listed below:

$lato: ‘Lato Regular’,’Helvetica Neue’, ‘Helvetica’, ‘Arial’,sans-serif;
$primary-color: #f8f8f8;
/* colour */
.is — beige {
 color: #f9f1dc !important;
.is — black {
 color: black;
.is — white {
 color: $primary-color;
.is — white-bottom {
 color: $primary-color;
 padding-bottom: 20px;
.is-grey {
 background-color: #bbbbbb;

We have created our first three structural folders using sass, your sass will be similar to the screenshot listed below:

Folder structure halfway through

Lets move on to the layout section.


Create a new folder called layout underneath the sass folder and create a new scss file called _footer.scss.

The layout folder will contain the footer, search, auth and front scss files.

Create a new file called auth.scss
This is the file where we have the css for the login.blade.php and the register.blade.php

We have combined the two so that we have a central area in which we can maintain and manage all the files related to authorisation.

Take a look at our authorisation file shown below:

Underneath the same directory we will create a new file called _search.scss

Take a look at the search file listed below:


We will now move on to the css for the home page we have named this file _front.scss for obvious reasons.

Take a look at the css for the front page listed below:

As you can see from the screenshot below we have completed the layout section.

Final folder structure layout


Lets move on to the last section and this is where we will place the code responsible for all of our external vendors such as bootstrap or bulma etc.

Create a new directory called vendors underneath the sass directory. Create a new file called _bulma.scss.

We use the bulma css framework here at ormrepo and we like the ease of use and the use of BEM syntax used in the declaration of css classes.

Take a look at bulma

Let us mention our little secret, we have overriden some of the css classes within our vendors bulma css text to ensure that you have a consistent feel to the code blocks.

Now the good news is that we have successfully completed our set up of our front end scss compilation files.

How do we get this to work?

The next stage is that we need to import these in to the app.scss file to ensure that sass is able to compile the files down.

Open up app.scss and add the following import statements with there:


[@import]( ‘base/reset’;
[@import]( ‘base/typography’;
[@import]( ‘components/buttons’;
[@import]( ‘components/navigation’;
[@import]( ‘components/utility’;
[@import]( ‘layout/footer’;
[@import]( ‘layout/auth’;
[@import]( ‘layout/search’;
[@import]( ‘layout/front’;
[@import]( ‘vendors/bulma’;
[@import]( ‘vendors/summernote’;
[@import]( ‘components/utility’;

The import statements listed above import all of the files in to a single stylesheet. This is then pre processed with autoprefixes and it is sent to your public/css/app.css. This is the file that will be used to display your css in your Laravel app.

Since we are using Laravel 5.4 make sure that your webpack.mix.js file has been set up similar to our snippet listed below:


const { mix } = require(‘laravel-mix’);/*
| — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
| Mix Asset Management
| — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
*/mix.js(‘resources/assets/js/app.js’, ‘public/js’)
.sass(‘resources/assets/sass/app.scss’, ‘public/css’);

Run npm run dev to compile your css.