Install and prepare Sass for production
This entry is part 5 of 9 in the series: Understanding and using Sass
- Working our mockup with Sass and Susy
In order to better understand the implementation of everything we have seen so far, including the use of Sass, we are going to deploy a real workflow by really relying on the implementation of a site.
- First steps and first files
After having seen all the concepts that are interesting to discuss at the same time as Sass, it is important to start to draw up our first files and our first lines of code in order to put all this in activity.
- How to distribute partial files
SassScript goes well beyond the simple use of variables or mixin, we will explore an approach to work with a much more successful template to design our site or application development.
- Setting Sass with Compass
Although Compass is no longer maintained, we will see an approach that uses it and allows us to continue to benefit without compromising our productions.
- Install and prepare Sass for production
Working under Ruby is a real panoply that we have under the mouse. Let’s see how to install all the facets that can be very useful to us.
- Deploy Sass effectively
Since democratization and the use of preprocessors, various concepts, mainly based on object-oriented programming, have emerged and allow us to approach Sass in a very modular way.
- Sass – The compilation and tools available
Although Ruby is a very open and scalable approach, there are various ways to compile Sass in CSS, all of which can present their interests and benefits.
- What is Sass – Introduction and presentation
What is a preprocessor and what is Sass? This post will introduce those basic concepts and what can be expected from such a technology.
- Understanding and using Sass
This present series will not cover Sass syntax, but will look at how to use Sass and develop concepts allowing us to exploit the best of the possibilities Sass has to offers.
Let us take a step back, and then gradually, let us run all the installations … Attention: If you wish, you can install only Sass and Compass in order to follow this series of articles.
However, Compass provides flexibility in the management of projects and especially through its famous config.rb configuration file. We will install it for this series of tests.
Installation of Sass and Compass under Ruby
Regarding the illustration of this series of articles, we will work under Ruby. Although in the previous article, at the chapter The compilation and tools available; Under Ruby, everything is already discussed, I suggest you quickly go around here and resume from scratch.
- Make sure you have run Ruby Installer,
- Once Ruby is installed, from the Start menu, launch Start Command Prompt with Ruby.
- We will use this command dialog to track and install the various necessary tools.
- Ruby is present by default.
- Launch the Terminal.
- In the following commands, you may get a type error message « …ERROR : While executing gem … (Gem ::FilePermissionError) You don’t have write permissions for … ». You will need to use the command sudo.
In fact, you must precede the commands indicated by the command sudo.
For example, if the command is
gem install sass
It will then be necessary to type
sudo gem install sass
Your administrator password will then be requested, to confirm the installation process
Enter it (be careful you will not see the cursor move, it’s normal) and validate. The installation process should then continue normally.
Verify if Sass is installed (Windows and Mac OS)
Now whatever your operating system,
1 – Check if Sass is installed by typing
If Sass is not present please install it
gem install sass
2 – Check if Compass is installed by typing
If Compass is not present please install it
gem install compass
3 – Sass and Compass should be installed
Would there be any unavoidable extensions ?
Irrespective of the type of project, are there any libraries are extensions that will have to be installed to complement Sass?
There is no one answer to this question. It all depends on the needs and the approach taken towards the project.
Let’s quickly go around the main plugins available. (The following set of installations is provided for illustrative purposes only).
4 – Check if the extensions that follow are already installed
The list of already installed gems appears in your command palette.
Susy is recommended if you are approaching grid mode positioning. This plugin remains an indispensable tool to match your highest requirements.
It is true that from premium premises, it may seem a labyrinth, but think again, it is very easy to use and brings enough capacities under the hood in order to respond to the most complex layouts.
5 – If Susy is not listed in the gem list, please install it
gem install susy
Breakpoint is an indispensable complement for a more flexible management of the break points between each display mode. This extension, which is often confused with certain possibilities integrated into the various grid modes, remains truly complementary and relaxes the writing of media requests.
6 – If breakpoint is not present in the list, please install it
gem install Breakpoint
Scut This SCUT library for Sass-CSS Utilities brings a lot of shortcuts and simplification of writing in general, both on the display and on typography.
7 – If scut is not present in the list, please install it
gem install scut
During this installation, you may receive an error message of type « … ERROR : Could not find a valid gem … ». No worries, default Ruby automatically adds https://rubygems.org, but not the unsecured version.
It is therefore possible to do it manually, taking the risk of course not to draw on a secure server.
gem sources --add http://rubygems.org/ Do you want to add this insecure source ? [yn]
You will have to explicitly validate this addition, confirming by y or refusing by typing n.
Typesettings is a plugin that manages typography in an almost intuitive way, respecting the ratios according to the device model, and, by bringing an integrated vertical rhythm.
Simple to use, this library becomes indispensable to who wants to work the text as well as the layout.
Unlike other plugins, it will be necessary to clone the github at the time of import. We will see this later at the time of the configuration.
You have the choice of two gems, knowing that the second has not been updated for nearly 6 years, and that Necolas offers you an alternative under Node, Normalize.css – A modern, HTML5-ready alternative to CSS resets.
In this workflow, we opt for the first proposed gem.
8 – If normalize-scss is not present in the list, please install it
gem install normalize-scss
If you work under Ruby, do not hesitate to visit the hosting platform of the Ruby Community, RubyGems, to find the various gems available, and, possibly supplement your work environment according to your own needs.
9 – Quickly redo a check of the gems that are installed in your environment