Sass

Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

How to build

If you have never used SCSS before, check out the language features. When working with the Gameforest SCSS sources, I have a few recommendations.

A lot of customization is possible by simply overwriting the values of already declared variables. You can find all variables for each component inside their SCSS files of the variables.scss file and override them in your theme. You can also add your own custom variables by adding it to custom.scss

Sass folder structure:

build
- scss
  - mixins
    - _alerts.scss
    - _badges.scss
    - _breakpoints.scss
    - _buttons.scss
    - _forms.scss
    - _grid.scss
    - _grid-framework.scss
    - _utilities.scss
  - _accordion.scss
  - _alerts.scss
  - _animation.scss
  - _badge.scss
  - _buttons.scss
  - _cards.scss
  - _carousel.scss
  - _comments.scss
  - _custom.scss
  - _demo.scss
  - _dropdown.scss
  - _footer.scss
  - _forms.scss
  - _forums.scss
  - _gallery.scss
  - _grid.scss
  - _header.scss
  - _heading.scss
  - _hero.scss
  - _layouts.scss
  - _lightbox.scss
  - _mixins.scss
  - _modals.scss
  - _notification.scss
  - _pagination.scss
  - _plugins.scss
  - _popover.scss
  - _posts.scss
  - _progress.scss
  - _responsive.scss
  - _section.scss
  - _tables.scss
  - _tabs.scss
  - _type.scss
  - _utilities.scss
  - _variables.scss
  - _widgets.scss
  - theme.scss

Custom Variables:

First, find a SCSS variable you want to change inside the Gameforest source. For example, the primary color is defined in /build/scss/_variables.scss

// Text Colors
$theme-primary: #2575dc !default;

Then, overwrite the default by setting a custom value inside your own file, i.e. to custom.scss as described above:

// Text Colors
$theme-primary: #6db124;

The compiled CSS will then have your custom value. But not only has the primary color changed. Many components make use of the $theme-primary variables to infer their own colors, and just adapt them slightly.

Custom Components

In the examples above, I have added custom rules directly to custom.scss. When you change a few variables but are happy with the rest, this is perfectly fine. However, for larger customizations, I recommend to only use this file as an entry point for the Sass compiler.

// Custom button
$btn-custom-bg:      #fff;
$btn-custom-border:  #fff;

.btn-custom {
  @include button($btn-custom-bg, $btn-custom-border);
}

The entry point for the Sass compiler is theme.scss. Here you compile all source files in the following order:

/*!
 * Gameforest 4.0 (https://yakuthemes.com)
 * Copyright 2011-2017 yakuthemes.com
 * Theme URL: https://themeforest.net/item/gameforest-responsive-gaming-html-theme/5007730
 * Licensed under Themeforest Standard (https://themeforest.net/licenses/standard)
 */

// Core variables and mixins
@import "variables";
@import "custom";
@import "mixins";

// Core CSS
@import "type";
@import "header";
@import "footer";
@import "layouts";
@import "section";

// Components
@import "hero";
@import "buttons";
@import "dropdown";
@import "forms";
@import "alerts";
@import "notification";
@import "progress";
@import "pagination";
@import "modals";
@import "lightbox";
@import "badge";
@import "carousel";
@import "cards";
@import "accordion";
@import "tabs";
@import "popover";
@import "heading";
@import "tables";
@import "forums";
@import "comments";
@import "posts";
@import "gallery";
@import "widgets";
@import "plugins";
@import "grid";
@import "animation";
@import "demo";

// Utility classes
@import "utilities";
@import "responsive";

Now you can compile theme.scss and the resulting CSS will include all your customizations.

Autoprefixer