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:
|
|
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:
- Keeping the Sass modules sane and maintainable.
- Keeping the Sass modules modular and portable.
3. Rules for Sass Format
Bissetii set 2 STRICT rules for its Sass components:
.sass
- solely for end-users to configure Bissetii Sass..scss
- solely for developers to develop Bissetii Sass.
The rationale is that:
- the developer can re-use CSS learning curve for development
- 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:
- Sass community is moving towards using Dart compiler.
- The compiler installation was surprisingly simple.
- 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:
|
|
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.