Getting Started with Sass

Bissetii develops its own CSS stylesheet in order to achieve all its design objectives across multiple languages. One of the core tool would be the Sass, a very powerful tool for compiling effective and small CSS stylesheet. This section guides you on how to get started with Sass development.

Factors To Consider

Before using Bissetii, you must consider the following Sass specific-factor with readiness in mind.

1. Mixin Grouping Based on Screen Display

Unlike other Sass implementations, Bissetii uses the grouping to reduce and to simplify mobile-first styling designs. That means that Bissetii writes Sass modules in the following code structure:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// Bissetii Code Styles
// ————————————————————————————————————————————————————————————————————————————

...

@mixin LIBRARY-amp() {
	...
}

@mixin LIBRARY-critical() {
	...
}

@mixin LIBRARY-tablet() {
	...
}

@mixin LIBRARY-desktop() {
	...
}

@mixin LIBRARY-widescreen() {
	...
}

@mixin LIBRARY-print() {
	...
}

2. Gatekeeper Sass Script

Bissetii actually uses gatekeeping techniques to control end-users chaotic requirements. The gatekeeper script is located in assets/sass/bissetii/ namely _Render.sass and _.scss. This script fills in any missing configurations in order to:

  1. Keeping the Sass modules sane and maintainable.
  2. Keeping the Sass modules modular and portable.

3. Rules for Sass Format

Bissetii set 2 STRICT rules for its Sass components:

  1. .sass - solely for end-users to configure Bissetii Sass.
  2. .scss - solely for developers to develop Bissetii Sass.

The rationale is that:

  1. the developer can re-use CSS learning curve for development
  2. keeping the configuration files simple enough for non-technical end-user to configure.

4. Dart Sass Compiler

Bissetii uses Dart Sass compiler directly from Sass Github as opposed to using Hugo Extended. The decision was made due to:

  1. Sass community is moving towards using Dart compiler.
  2. The compiler installation was surprisingly simple.
  3. Eliminate the strict dependencies with Hugo extended.

That being said, starting from version 1.12.4, Bissetii Sass scripts are no longer compatible for Hugo Extended.

5. Use Bissetii CI As Development Engine

Bissetii structured its development jobs using .scripts/bissetii-ci.sh BASH script. This includes the development flag --develop that automatically compiles all the releasing CSS files when you change Bissetii Sass codes. Hence, please avoid manual compilation for upstream compatibilities.

Install Dependencies

Bissetii would not be able to work without its dependencies. Hence, you need to install all of them into your system.

1. Sass Compiler

Starting from version 1.12.4, the Sass component depends on Dart Sass compiler available in Sass Github.

2. Git

Bissetii requires git made available for downloading the theme module and obtain pages' last-modified timestamp.

The end-result is that git command is available at terminal and git version reports the extended version. Example:

1
2

$ git version
git version XX.YY.ZZ

2. Install Bissetii Sass

There are many ways to install Bissetii into your use case. Please select the following methods based on your requirements and use cases.

At this point of time, Bissetii is still developing methods to facilitate easy installation. The dev team will be updating this section in near future.

Wrapping Up

Now that you have your Sass setup accordingly, you are ready to develop your Sass script in your project. Once ready, feel free to proceed to the next section:

COMING SOON.