This article is also published in french - Installer et préparer Sass pour la production
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
- 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.
MacOS
- 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
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
.
GitHub - ianrose/typesettings: A Sass or Stylus toolkit that sets type in Ems based on modular scale, vertical rhythm, a…
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
Commissioning and use
Once the environment is installed, and in order to work, we will have to create a project (if you do not have a project in progress), or to monitor it (if you are working on a project already created).
If Compass has been installed, it is possible to use its services to manage the various projects. We will see that there are various possibilities.
Creating a project
On its site, Compass offers a command line generator Tell us about your project and we'll help you get it set up.
This service generates the necessary commands directly, that we will only have to copy, paste in order to use them.
Whatever your needs, the mini form, put in place, goes to make it possible to define each of the necessary parameters, namely:
- Creating, or resuming, a project (install or create)
- If you choose New, you will have to enter the name of the project, which is the name of the folder that will be created to contain all the necessary files
- The acceptance, or not, of the implementation of a default startup template, (except in some cases, we will often opt for No and we will create a custom tree, see point 5)
- The syntax used by the project (Sass or SCSS)
- Customizing the tree to use, defining the naming of source folders, CSS destination, Javascript and images
On a traditional creation basis, the command line should look like:
compass create the_name_of_the_project_folder --bare --sass-dir "scss" --css-dir "css" --javascripts-dir "js" --images-dir "imgs"
Copy this command line and switch to the command console, or the terminal.
By default you should be in the home directory, that is your user session.
Move this pointer to your production folder. If you do not usually work with the console, or the terminal, rest assured, what we have to do is really not complicated.
Whichever directory you are in, enter
If you are on MacOs
cd
And if you are under Windows
cd /d
Then,
In one case, as in the other, drag and drop just these prevous instructions, the folder in which you wish to create your project folder.
Let's say you have a folder called Production located at the root of your main hard drive.
If, therefore, you drag the Production folder following the previous instructions, this should give one of the following two lines
cd /Production
cd /d C:\Production
Make sure to give the focus to the command console, by clicking on it, and validate by pressing the enter key.
You will move the pointer of your console to the new location. The result should be, depending on your environment, one of the following two lines
YourSession :Production YourSession$
C:\Production>
It is then enough to paste, afterwards, the command line proposed previously by the site of Compass and to validate.
compass create the_name_of_the_project_folder --bare --sass-dir "scss" --css-dir "css" --javascripts-dir "js" --images-dir "imgs"
A series of information will then appear in the control console informing you of what has been achieved. Open the Production folder, where you will find your project folder, the_name_of_the_project_folder, which should contain :
- A scss folder; which will be the source folder containing the various scss files
- A config.rb file, which contains all of the configuration parameters defined through the command line
We will return later to this configuration file, let us continue for the moment, this first approach of commissioning and use.
Monitoring of a project, and compilation
Once the project is in place we will have to ask to compile our source files, *.scss and/or *.sass, into *.css file(s).
This is possible on a one-by-one basis
Using the command
compass compile [path of the project file]
Or by placing the command prompt pointer in the project folder and simply using the command
compass compile
This is also possible to automatically handle it
When working on a project, it is often much more flexible to ask Sass to monitor the working folder and compile each time that a source file is saved.
For this purpose, and in the same way as an ad hoc shot, it is possible to use one of the following two commands
compass watch [path of the project file]
Or if the command prompt already points to the project folder
compass watch
Alternatives through a system file
Whatever your environment, it is possible to create, compile, monitor your projects using files *.bat (under Windows) or *.command (under MacOS).
These files can be prepared in advance and reused across projects. They allow us to directly launch create, compile or watch instructions without having to go through command lines.
To use them, simply place them in the project folder (or upstream of the project folder to be created) and launch them by double-clicking them.
Under Windows
Two .bat files can be created, for example create.bat et watch.bat (the names used here are purely arbitrary). These files will then be used to manage the creation and monitoring of a project.
Their content is quite explicit since they are in fact the command lines used previously:
compass create
and
compass watch
Under MacOs
Like Windows, just create two .command files, for example create.command and watch.command, which will be set up and used as the previous two.
However, these two files will contain an additional instruction, cd `dirname $ 0`, which will allow to explicitly position the command line on the folder containing the whole script.
cd `dirname $0`
compass create
and
cd `dirname $0`
compass watch --force
The --force statement, as its name implies, forces the system to save the new file, overwriting the old file already present.
Then, and regardless of the operating system,
You can, of course, complete the command lines with any corrections you want to make, for example:
compass create --bare --sass-dir "scss" --css-dir "css" --javascripts-dir "js" --images-dir "imgs"
Then, in order to use these files, simply put the desired file in the project folder, (or upstream of the project folder to be created, if it is a creation and the project name is defined), and double click on it ... the magic of the command line will take care of the rest.
So in summary, if you create a project, use the file that contains create, if the project exists and you want to compile on demand, use the second.
The configuration file, config.rb
As soon as you work with compass, a configuration file, config.rb, is automatically created, (of course, if it is not already present in the project file).
By default, various configuration values appear with the values defined, either by the parameters of the command line (as we saw in the previous example), or data that is specified in the default values file located in the installation folder of compass :
{C:|Applications}\Ruby22-x64\lib\ruby\gems\2.2.0\gems\compass-1.0.3\lib\compass\app_integration\stand_alone\configuration_defaults.rb
In any case, and if necessary, the config.rb file can be reconfigured as required.
So by default, the config.rb file contains
require 'compass/import-once/activate' # Require any additional compass plugins here. # Set this to the root of your project when deployed: http_path = "/" css_dir = "stylesheets" sass_dir = "sass" images_dir = "images" javascripts_dir = "javascripts" # You can select your preferred output style here (can be overridden via the command line): … # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
Plus a number of lines preceded by the # sign. These are comments and can be deleted if you wish.
Depending on your needs, you can reset these values to
require 'compass/import-once/activate'
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "imgs"
javascripts_dir = "js"
As well as adding other values, drawing inspiration from the article Ruby-based Configuration Reference.
If you have installed plugins and want to use them in your project, you will also have to specify them by adding the appropriate commands to the file header. Based on the installations carried out in the previous article, here are the additions:
require 'susy'
require 'breakpoint'
require 'scut'
require "normalize-scss"
require 'compass/import-once/activate'
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "imgs"
javascripts_dir = "js"
Except for Typesettings which function differently, you will find the necessary instructions in the Github plugin.
GitHub - ianrose/typesettings: A Sass or Stylus toolkit that sets type in Ems based on modular scale, vertical rhythm, a…
However, we will also discuss this in a future article.
Performance tests
Everything is ready ... launch the observation command, either on the command line compass watch, either from the file watch.bat or watch.command create previously.
Create a file test.scss, that you save in the folder scss and add the following content.
$couleur: #363;
.uneclasse {
color: $couleur;
}
As soon as you save this file, you should see the file test.css in the css folder. This file should contain
.uneclasse {
color: #363;
}
If this works, perfect ... so you can delete these two files, if not, go through the installation steps and see where it was possible to hook.
Loading...
