Install and prepare Sass for production

This entry is part 6 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.

• 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.

• 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.

• 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.

• 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.

• 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.

• 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.

• 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.

• 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.

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.

Compass

 

Compass, is often controversial, especially since the emergence of post-processor management, prefixing, as well as in the opinion of authors like Hugo Giraudel – Why I Don’t Use Compass Anymore.

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.

Windows

1. Make sure you have run Ruby Installer,
2. Once Ruby is installed, from the Start menu, launch Start Command Prompt with Ruby.
3. We will use this command dialog to track and install the various necessary tools.

MacOS

1. Ruby is present by default.
2. Launch the Terminal.
3. 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

Password:

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

sass –v

If Sass is not present please install it

gem install sass

2 – Check if Compass is installed by typing

compass –v

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

gem list

The list of already installed gems appears in your command palette.

Susy

 

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

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

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

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.

https://github.com/ianrose/typesettings.git

Normalize

normalize-scss or compass-normalize… Before any intervention on the CSS, it is always strongly recommended to ensure the reset of the default values of interpretation for each browser.

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

And more…

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

gem list