How to structure your sass within a Laravel application?

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)

package.json

{
“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

Resets

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

resources\assets\base\_reset.scss

{
margin: 0;
padding: 0;
}
*, *:before, *:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}

Typography

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:

resources/assets/base/_typography.scss

@import url(“https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic");
@import url(“https://fonts.googleapis.com/css?family=Montserrat:300,400,700,300italic,400italic,700italic");
@font-face {
font-family: ‘FiraSans’;
src: url(‘fonts/FiraSans-LightItalic.otf’);
src: url(‘fonts/FiraSans-Regular.otf’);
src: url(‘fonts/FiraSans-SemiBold.otf’);
font-weight: normal;
font-style: normal;
}
$fira-sans: ‘FiraSansSemiBold’,’Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif;
$lato: ‘Lato Regular’,’Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif;
$lato-bold: “Lato Bold”, ‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif;
$montserrat: ‘Montserrat Regular’, ‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif;
$montserrat-bold: ‘Montserrat Bold’, ‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif;
$primary-color: #f8f8f8;
$secondary-color: #003434;
$beige: #f9f1dc;
$black-color: black;
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $lato;
font-weight: 700;
}
h1 {
font-family: $lato;
font-weight: 700;
text-transform: none !important;
color: black;
font-size: 2em;
line-height: 45px;
padding-top: 10px;
}
h2 {
font-family: “Georgia Italic”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 1.5em;
line-height: 36px;
text-transform: uppercase;
color: #f9f1dc;
margin: 0;
padding-top: 10px;
}
h3 {
font-family: “Georgia Italic”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 1.17em;
line-height: 29px;
color: $beige;
margin: 0;
padding-bottom: 10px;
padding-top: 10px;
}
h4 {
font-family: $lato;
font-weight: 700;
font-size: 1.875em;
line-height: 49px;
text-transform: none !important;
color: $black-color;
padding-top: 10px;
}

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.


Components

$montserrat: ‘Montserrat Regular’, ‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif;
$montserrat-bold: ‘Montserrat Bold’, ‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif;
.btn-primary,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
background-color: #F9F1DC;
outline: 0;
border: 0;
padding: 10px 15px;
color: black;
font-family: ‘Lato Regular’, sans-serif;
font-size: 14px;
text-transform: capitalize;
height: 50px;
width: 200px;
cursor: pointer;
}
.btn-primary:hover {
background-color: #808080 !important;
color: whitesmoke !important;
}
.btn-secondary,
.btn-secondary:active,
.btn-secondary:visited,
.btn-secondary:focus {
background-color: #003434;
outline: 0;
border: 0;
padding: 10px 15px;
color: white;
font-family: ‘Lato Regular’, sans-serif;
font-size: 14px;
text-transform: uppercase;
height: 50px;
width: 250px;
cursor: pointer;
}
.btn-secondary:hover {
background-color: #bbbbbb !important;
color: white !important;
}
.btn-small,
.btn-small:active,
.btn-small:visited,
.btn-small:focus {
background-color: #F9F1DC;
color: #003434;
border: 0;
outline: 0;
font-family: $lato;
font-size: 14px;
height: 25px;
width: 50px;
cursor: pointer;
}
.btn-small:hover {
background-color: #808080;
color: #f8f8f8;
text-decoration: none;
}

Navigation

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:

resources\assets\components\_navigation.scss

.navigation {
background-color: #003434;
display: flex;
}
.navigation-left ul {
list-style: none;
margin: 0;
padding-top: 10px;
display: flex;
justify-content: space-between;
}
.navigation-left a.home {
background-image: url(http://theblog/images/logo_medium.png);
background-repeat: no-repeat;
text-indent: -9999px;
max-height: 60px;
width: 100px;
}
.nav_logo {
max-width: 100%;
max-height: 50px;
margin-top: 10px;
}
.menuIcon {
display: none;
}
.centered_logo {
display: none;
}
.nav-search {
padding-left: 250px;
display: flex;
flex-wrap: wrap;
}

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.


Utility

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.


Layout

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

resources/assets/sass/layout/_footer.scss

$fira-sans: ‘FiraSansSemiBold’,”Helvetica Neue”,Helvetica,Arial,sans-serif;
footer {
padding: 50px 0;
background-color: #003434;
}
.middle-logo {
display: flex;
align-content: center;
justify-content: center;
}
.foot-links {
color: #F9F1DC;
font-family: $fira-sans;
font-size: 14px;
text-transform: capitalize;
font-weight: 400;
}
.foot-links:hover {
color: #F9F1DC;
text-decoration: none;
border-bottom: 2px solid #F9F1DC;
}
p.copyright {
color: #F9F1DC;
font-family: $fira-sans;
font-size: 12px;
margin: 15px 0 0;
}

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:

resources/assets/layout/_auth.scss

form-page {
background-color: #003434;
padding-top: 100px;
padding-bottom: 100px;
display: flex;
align-content: center;
justify-content: center;
}
.register-fluid {
min-height: 900px;
overflow: hidden;
padding-top: 50px;
padding-bottom: 20px;
background-color: white;
box-shadow: 0 8px 6px -6px white;
flex: 0 0 60%;
}
.login-fluid {
min-height: 700px;
overflow: hidden;
padding-top: 50px;
background-color: white;
box-shadow: 0 8px 6px -6px white;
flex: 0 0 60%;
}
.logo-container {
display: flex;
align-content: center;
justify-content: center;
padding-bottom: 100px;
}

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

Take a look at the search file listed below:

resources/assets/layout/_search.scss

.section {
background: #003434;
padding: 0;
}
.has-columns {
column-count: 3;
column-rule: 1px solid #e3e3e3;
column-gap: 200px;
text-align: center;
}
.letter-group {
margin: 2em 0 4em;
}
.letter-group:first-child {
margin-top: 0;
}
.letter-group:last-child {
margin-bottom: 0;
}
.letter-group .letter {
background: black;
color: white;
text-transform: uppercase;
padding: 10px 0;
}
.title {
color: white;
}
.title a {
color: #f9f1dc;
}

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:

resources/assets/layout/_front.scss

.hero {
background-color: #003434;
background-size: cover;
}
.first-container {
min-height: 300px;
width: 1200px;
margin: auto;
padding-bottom: 100px;
}
.container {
min-height: 300px;
width: 100%;
margin: auto;
padding-bottom: 100px;
}
.row {
display: flex;
align-content: center;
justify-content: center;
padding-top: 30px;
margin-right: -25px;
margin-left: -30px;
}
.collection {
padding-bottom: 50px;
}
.columns {
//min-height: 750px;
height: 550px !important;
}

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

Final folder structure layout

Vendors

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 
[Bulma](http://bulma.io)

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.

resources/assets/sass/vendors/_bulma.scss

strong {
color: #E5E338;
font-weight: 700;
}
pre {
background-color: whitesmoke;
color: #4a4a4a;
white-space: pre;
word-wrap: normal;
margin-top: 5px;
}
code {
text-transform: none;
}

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:

resources/sass/app.scss
@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:

webpack.mix.js

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.

In this tutorial we have shown how you can structure your sass in a helpful way to prevent the build up of redundant css code in your Laravel applications.

Over the next few months we will be unravelling the front end further so stay tuned to ormrepo.co.uk

Like what you read? Give Sehinde Raji a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.