Skip navigation

As a fine artist and a designer visuals are very important to me. Using Adobe Spark enables me to create visual

stories on any device without any knowledge of animation, transitions or HTML.

I use Adobe Page in my classroom to deliver a tutorials. At my design studio to tell a story or create an

immediate portfolio. I am able to create and deliver engaging presentations and share creative ideas across

different devices and social media simply with a link.

 

In the following link I am sharing an extraordinary story about Charlotte Salomon. An artist that was born in

Berlin in 1917 and died in Auschwitz in 1943. Her story is unique. She did not survive the war but her art did.

“Life or Theatre” is a unique achievement of art and literature. No one who enters into Charlotte Salomon’s

world will ever forget it. The survival of Charlotte’s art transcends her own death in the gas chamber.

 

Here is Charlotte Salomon story:

 

Charlotte_Salomon small.jpg

 

Charlotte Salomon

 

Here is a link to Adobe Spark insiders Facebook page

https://www.facebook.com/groups/adobesparkinsiders/

factory-1516381_1920-thumb.jpg

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

002-Sass-004-1.png

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

002-Sass-004-11.png

  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

002-Sass-004-12.png

  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 ?

 

002-Sass-004-2.png

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.

002-Sass-004-13.png

Susy

002-Sass-004-3.png

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

002-Sass-004-4.png

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

002-Sass-004-5.png

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

002-Sass-004-6.png

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

002-Sass-004-7.png

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.

 

002-Sass-004-8.png

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:

 

  1. Creating, or resuming, a project (install or create)
  2. 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
  3. 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)
  4. The syntax used by the project (Sass or SCSS)
  5. 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.

notes-933111_1920-thumb.jpg

This article is also published in french - Déployer Sass de manière efficace

 

As we saw earlier, writing in Sass does not mean writing traditional CSS, but it is incumbent on us to produce quality CSS, and, finally, to comply with a set of good practices.

 

I therefore invite you, before I begin, to bring you closer to Principles of writing consistent, idiomatic CSS.

 

Next, it is important that we are interested in some approaches, and methodologies, in designing CSS styles.

 

Each of them explores a way of using classes and sharing descriptions.

 

It is true that, at first glance, this may run counter to a certain idea of CSS, and in particular on the abuse of class, otherwise known as acute class.

 

If you take the time to analyze them one by one, you will quickly realize that whatever the nature of your project that the single use of selector can very quickly become blocking at the level of the specificities, and is relatively heavy to manage as to its scalability.

 

OOCSS (Object Oriented CSS)

002-Sass-002-7.png

The object-oriented approach OOCSS is a revolution in the basic approach of CSS.

 

The idea is simple. Just think about distinguishing the structure and the appearance, and therefore to separate the contents of the container. Not to use strong specificities, and thus avoid the ID, to continually think flexibility first, flexibility and responsive.

 

In addition, not to hesitate to minimize the impact of a single module on an element and thus, if necessary, to multiply the modules on the same object in order to apply several objectives.

 

It is necessary to favor the transversal re-use by avoiding falling into an excessive specificity, which would limit the cases of use. Think global and non-specific.

 

A small example ... let's say that the <h1> title of an article is styled in a certain way, and that the title of a <caption> table uses a large common base with the previous title, similarly for the title < h3> of a particular module ... The CSS approach could be

 

article h1,  caption, .module h3 {}

 

An OOCSS-style revision would be equivalent to implementing a specific rendering class of this title and adding it to each of the elements directly at the HTML DOM level

 

.title_emergeant {}

 

The obvious advantage is that it will not be necessary to isolate the caption selector, in case various modifications are necessary, and the evolution will be much more flexible, even if a particularity occurs on one of the elements, to add a class to this element

 

.title_emergeant_particularity {}

 

It is true that in Sass the use of inheritance, and / or placeholder, might suggest being a rather flexible alternative of use. Attention, as we shall see later, not to fall into this apparent easiest way.

 

%title_emergeant {}
article h1,  caption, .module h3 { @extend %title_emergeant; }

 

BEM notation, or SUIT CSS, methods

002-Sass-002-8.png

BEM (Block, Element, Modifier), is a methodology, or convention, for naming, and dividing by blocks, elements of the page. This does not provide anything at a purely structural level, although this specifies it. It however, allows to quickly defining a block, each of its elements and their possible states.

 

Contrary to OOCSS, BEM will rather integrate in a verticality specific to each module and less impose itself as element of transversality between the modules.

 

If we take the example of a module, BEM allows us to define various classes, having a first class to define the module itself, and, various classes which will qualify each of the elements the component, modify specifying the states, both of the module, and of its elements.

 

The classes corresponding to the various elements use a single hyphen separator, whereas the classes 'modify' use a double dash separator.

 

.module
.module-title, .module-icon, .module-bar, .module-button
.module--inactive, .module-button--inactive, module-button--on

 

Basic Approach

 

We will see that this can be improved by also using a dedicated @mixin. But, this kind of naming can be implemented quickly and easily within Sass, notably through the use of the parent's referential character, &.

 

.module {
     &-title {}
     &-button {
          &--on {}
     }
}

 

Using a name convention, BEM or SUIT CSS oriented, will give an architectural tree. Therefore, the main idea will remain to define a real BEM tree, in place of the classic tree of the DOM.

 

.module{}
.module-title{}
.module-button{}
.module-button--on{}

 

More Complex Approach

 

Since Sass 3.4, the enhancement of the parent selector (&) allows by coupling with the @at-root directive to use a real encapsulation. To highlight this point, let us support the excellent article by Marc Mintel - Pushing BEM to the next level with Sass 3.4

 

BEM and dedicated libraries

 

BEM does not stop to be just a naming convention, it can also be complemented by JavaScript libraries including i-bem.js, or component packages ready to be used, and some other works around jQuery.BEM or package like bem-js, as well as jQuery BEMHelpers.

 

If you wish, we could explore these uses in a forthcoming series of articles.

 

Suit CSS, another alternative

 

In parallel with BEM, we could also evoke SUIT CSS (Style tools for UI components), which is a method based on the same principle but which calls for a different division. We are talking this time about Component, Descendent, Modify, State and Utility.

 

SMACSS

002-Sass-002-9.png

Unlike the first two approaches, which propose a CSS implementation methodology, SMACSS (Scalable and Modular Architecture for CSS) redefine rather a methodology of work, (much of the work is free access).

 

Jonathan Snook delivers a large number of important keys that allow us to gather together to properly organize the deployment of CSS, but especially to guarantee its scalability and maintainability in a very simple way.

 

What we will retain, for our concern, is the declension of CSS into categories:

  • Base
  • Layout
  • Module
  • State
  • Theme

 

Sass, allows us to decline, and to increase, as much as possible, this granularity of cutting, because at the end everything can be very simply regrouped within a single file.

 

@import 'base';
@import 'layout';
@import 'module';
@import 'state';
@import 'theme';

 

Let us not forget that SMACSS, proposes an architecture that wants to be scalable and modular for our CSS.

 

ITCSS

002-Sass-002-10.png

ITCSS, (for Inverted Triangle CSS), proposes a distribution by degree of specificities and cascades, thus avoiding significant overloads, and often blocking.

 

002-Sass-003.png

  • Settings, allows grouping all the settings both at the level of the preprocessor (parameters, variables and map at the global level, environment ...), as well as the definition of typos and other colors used by the theme.
  • Tools
  • Generic, proposes the very first level of CSS with both the resetting of the default values of the browsers, the properties of boxes and the first definition of the different layouts specific to each device.
  • Elements
  • Objects, will group all the identifications by class, representing objects (in OOCSS philosophy), or molecules (Atomic Design).
  • Components, is a higher level of objects, also based on classes, with a BEM-oriented naming approach, and consisting mainly of organism (Atomic Design), complex objects (OOCSS) and interface components (UI)
  • Trumps, last level that can surpass previous and now mainly all utilities, helpers, states and other forces of the theme. Do not fear the use of the !important property for certain declarations.

 

Regardless of the layer, none of them must contain a selector based on the use of an id, #identifier.

 

Naming _partials.scss files can therefore use the root of these layers, for example:

 

_settings.colors.scss
_settings.sass.scss
_tools.mixing.scss
etc…

 

Do not hesitate to get closer to this github which offers a good starting tree https://github.com/mehmetkose/skeleton-itcss.

 

Moreover, if we want to go further by coupling for example BEM and ITCSS this gives BEMIT and there is an excellent article on the subject, BEMIT: Taking the BEM Naming Convention a Step Further.

 

Atomic Design

002-Sass-002-11.png

From 2013, Brad Frost, began to publish a work on a particular methodology, and close to the atomic constitution of the elements. He also gave this name to his study Atomic Web Design, quickly completed and expanded by his book Atomic Design.

 

Like BEM and SUIT CSS, Atomic Web Design offers a cutting starting from the atom, molecule, organism, model and page.

 

The metaphor is quite appropriate, and if we replace it with elements of content, we end up with:

 

  • A label, a button or a title (in the role of atoms),
  • A search tool component (on the molecule side)
  • A fairly comprehensive menu bar (at the organism level),
  • A filling template (to embody the model, and, bring together all the organisms)
  • Finally, a site page (being an instance from the previous template).

 

To support this principle of establishment and construction, Create atomic design systems with Pattern Lab proposes a set of tools (Node and PHP).

 

This approach allows us to encompass all the previous methods, namely OOCSS, SMACSS, ITCSS and BEM.

 

One can therefore resort to partials,

 

@import 'atomic';
@import 'molecule';
@import 'organism';
@import 'template';
@import 'page';

 

Conclusions

 

Through these various methodologies, we have seen that using a class notation work is therefore a solution, certainly a matter of debate among the most purist of us, but oh so adapted to the maintenance of a great flexibility in the daily management of our projects.

 

The modular approach and the cutting into several files _partials.scss quickly brings a great flexibility to the maintenance of the sites.

 

In conclusion, we can retain three key words,

 

  • Modules
  • Naming
  • Divided

 

In addition, it is well on these three points that we will have to focus our use of preprocessors.

eclosion-329085_1920-thumb.jpg

This article is also published in french - Sass – La compilation et les outils disponibles

 

In order to get traditional CSS, irrespective of whether the Sass syntax used Sass or SCSS, you have to compile them. For this, we have various possibilities that we will explore in the course of this article.

 

Note that when we are in the experimental phase, or, in development mode, it is sometimes very practical to have a standalone compiler on hand, and online.

 

The platform Sassmeister, allows us to quickly and simply test a combination. To highlight it, open the previous link, and in the left part paste the following code fragment;

 

$couleur: #363;
.uneclasse {
  color: $couleur;
}

 

See what happens in the right hand side. Do not hesitate to refine the parameters of use, according to your needs, from the Options menu.

You can also employ other similar tools that will directly integrate into your workflow. Depending on your needs, you will have access to various solutions.

 

Under Ruby

 

002-Sass-002-2.png

 

Because Sass is being written in Ruby, it may seem natural to use it with this environment.

 

On Mac, Ruby is already present natively. On Windows, it must be installed, and you will find all the versions, and necessary packages, from the site Ruby Installer.

 

Once you have installed Ruby, on Mac OSx everything happens from the Terminal, and, under Windows, you now have access to a new command prompt from the Start menu, which is Start Command Prompt with Ruby.

 

002-Sass-002-3.png

 

Then, whatever your environment, to install Sass, it happens in the command line, and in the same way:

 

gem install sass

 

In Mac, you will need to use a sudo. Nevertheless, that is all ... there is no need for more steps or installation.

 

You will find videos showing these facilities; On Windows Installation et prise en main de Sass et Compass and under MacOsx Installation de Compass sous Mac OS X.

 

After installation, it is simple to test the functionality.

 

Move your command line by pointing to the working folder you want.

 

In this folder, create a test.scss file that contains the following code fragment and save it.

 

$couleur: #363;
.uneclasse {
  color: $couleur;
}

 

From the command line, enter the following statement;

 

sass test.scss styles.css

 

Once validated, the styles.css file should be generated and contain standard CSS.

 

In order not to continually launch the compilation instruction, it is better to ask Sass, or compass if you have installed it, to monitor the work file in question, and to compile each time you save any *.scss document.

 

To do this, simply enter this command and validate it;

 

sass --watch sourcesfolder/sass:destinationfolder/css

 

On the Sass side, the first path, sourcesfolder/sass, corresponds to the location of the source files (.scss or .sass) and the second destinationfolder/css path, specifying the destination folder of the compiled files (.css ). Two points must separate the two paths:

 

Although this is not mandatory, if you work under Ruby, the installation of compass can be very interesting, would be only for the management of projects, and especially through its configuration file config.rb

 

http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "libs"
fonts_dir = "fonts"
relative_assets = true
line_comments = false
output_style = :compressed

 

So if you work with Compass, because the source folder (sass_dir) and the destination folder (css_dir) are already defined, you can simply request monitoring of the current folder from the command console

 

compass watch

 

LibSass

 

002-Sass-002-4.png

If you do not want to install Sass under Ruby, you can use LibSass, which is a library developed in C / C ++ and you can use the environment of your choice through a wrapper.

 

There are a large number of ready-to-use wrappers Ruby, Perl, PHP, Python, .NET, Java, JavaScript. But you can also develop a custom wrapper in order to implement your needs to the best of your ability, using libsass directly.

 

Due to the large number of wrappers available, we will not discuss here their installations or their uses. However, be aware that this library is used by code editors like brackets-sass.

 

Pay attention because notepad ++ only code coloring the scss syntax, and Dreamweaver is directly based under Ruby.

 

However, for each of the previous implementations, note that the ad hoc github offers you a topic, Getting Started, which allows you to quickly take charge of setting up the compiler of your choice.

 

Using PHP

 

Although this comes out of the Node approach, it is possible to opt for an alternative that consists of not generating the client side compilation.

 

One places, therefore, directly the entire necessary source files on the server, which will compile them on demand when the pages are distributed.

 

Several possibilities:

 

scssphp

 

To implement this type of use, and workflow, we will only address the approach made by scssphp.

 

First step, download the necessary files, and unpack the archive.

 

Among the recovered files, only the file scss.inc.php will be useful for this test.

 

Let us start by creating the base-1.php file that will contain the HTML structure. For this, two simple paragraphs of 'lorem ipsum' will do the trick. Let us add a class to each, respectively styles-tags and styles-link.

 

base-1.php

 

!doctype html>        

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quidem nulla nam dolorem nobis impedit harum autem, odio praesentium qui iusto perspiciatis. Animi ex atque tenetur accusamus numquam earum quas.

    

Repellendus voluptatibus praesentium, quaerat doloremque, non placeat. Assumenda facilis sint repellendus similique porro nihil quae explicabo eius, distinctio ea expedita, rerum sed nulla, tempora ut maiores a corporis minus deserunt.

 

There are various ways to use the compiler; we will approach two of them.

 

For the first one, we will compile CSS directly within the <script> tag of the page, the second will be to link, in a classic way, an external style sheet through a <link>.

 

styles-tags.php

 

  Let us put a <script> tag and quite simply, lets a PHP file that will compile the SCSS and return from the CSS

.

 

Then, just write PHP, you cannot do more classic.

 

compile('      $coul: blue;      .test-tags {         color: $coul;      }   '); ?>

 

  1. Import the previously downloaded file,
  2. We need to create an instance of the scssc class, which will allow us to compile the scss into css,
  3. Finally, through a simple echo instruction, we write the result of the compilation. Certainly, this compilation is very basic but it allows, by using a variable, to verify that everything works well.

 

styles-link.php

 

For this option, we will use a <link> tag, which we usually use to link CSS files.

 

This time, we will have to compile, on the fly, scss to css and the compilation being server side, we will have to create the CSS style sheet in PHP.

 

<link rel="stylesheet" href="styles-link.php">

 

On the PHP side, the source file will resemble the one used previously, except that the browser must interpret the PHP document as CSS. We must take care to modify the header of the file before compiling and returning it.

 

< ?php   header("Content-Type: text/css");   require "scss.inc.php";   $scss = new scssc();   echo $scss->compile('       $couleur: orange;       .test-link {           color: $couleur;       }   '); ?>

 

Go further

 

For more information on using this compilation method, please refer to the online documentation.

 

Grunt, Gulp or NPM

 

002-Sass-002-5.png

 

In our projects, we often use task automation to optimize certain mechanics such as concatenation, image optimization, sprite generation, file minimization, and many others potential.

We can therefore also entrust these compilers with the task of compilation. Whether we use Gulp, Grunt, NPM or directly Node, solutions are not missing.

There is even a parser SCSS for PostCSS.

In order not to deviate too far from the objective of this article, I propose that you bring us closer to a next series of articles concerning the task automation machines and, therefore, not to address their use in this this present article.

 

Visual applications

 

002-Sass-002-6.png

 

Finally, for the most recalcitrant of us to the code, there are solutions embedded in application form, which can sometimes be more transparent of use.

Thus we find Koala, Scout, CodeKit, LiveReload, Hammer, Prepros, Compass.app, Crunch… which offer user-friendly, intuitive interfaces, to quickly include some libraries, and compile a source folder to an output folder.

Of course, their extensibility is sometimes reduced, but in some cases, it can be a more flexible solution than to go through command lines.

Attention also to the maintenance of the application in time, some solutions can disappear as quickly as they have appeared, or often no longer be maintained.

 

Sometimes, even if they are based on LibSass, they can simply not keep up with developments as quickly as those that are directly available under Sass.

002-Sass-0002.png

This article is also published in french - Qu’est ce que Sass – Introduction et présentation

 

Presentation and state of play

 

Since the appearance of CSS stylesheets, it has always been frustrating not to be able to code like some other languages such as JavaScript or PHP (to name but a few), and therefore, to remain confined to a description language of properties / values.

 

Although W3C has thought about adopting certain notions such as CSS variables, or, functional notations. The browser companies have been slow in their implementation of these features.

 

It is somewhere in response to these few proposals that various families of CSS preprocessors, such as, Sass, Less, Stylus, PostCSS, CSSNext, Closure Stylesheets, CSS Preprocessor or Rework have appeared.

 

The principle of preprocessors

002-Sass-001.png

The principle of the preprocessor is simple; it is to write stylesheets through a syntax closer to a real programming language, than a description language.

This can be achieved by using variables, directives that are conditional, loop or control, functions, and sometimes even relying on structures specific to object programming, inheritance, encapsulation or polymorphism.

 

The goal is to be able to quickly compile all this, whether server-side, or client-side, into standard CSS stylesheets, which will be directly interpretable by browsers, and other devices, or user-agents.

 

This approach offers more flexibility for development, deployment, maintenance and evolution. Depending on our production environment, we can choose a preprocessor so that it can best respond to the context and to our situation.

 

There are many preprocessors to choose from, but this series of articles will discuss and illustrate the use of SASS, one of the more popular and powerful pre-processors.

 

However, whatever preprocessor you choose, it should be portable and adaptable to your situation.

 

Sass vs Sass

 

We not only often hear about Sass, but also about Sass or SCSS. What is it? Moreover, is there a difference between these three different names?

 

So, it's quite simple, on the one hand when talking about Sass (Syntactically Awesome Stylesheets), we speak of the language itself.

 

This language is based on two writing syntaxes. The first syntax writes in Sass, which is closer to the one used by Ruby. The second, SCSS (Sassy CSS), is closer to traditional CSS writing.

 

The first written in Sass

 

$couleur: #363
.uneclasse
    color: $couleur

 

or using SCSS

 

$couleur: #363;
.uneclasse {
  color: $couleur;
}

 

both will always compile to

 

.uneclasse {
 color: #363;
}

 

Then, it is only a question of personal choice and context of use ... Clearly, if we develop in Ruby On Rails, we will opt for Sass which is easier. If instead we work on the web in traditional HTML / CSS, or if we work frequently on already existing sites, one will then be more easily oriented towards SCSS.

 

Although both can be used together in the same project, the two syntaxes can’t coexist within the same file. SCSS files have to be saved with the .scss extension and Sass files with .sass extension.

 

Capabilities of Sass can be extended

 

002-Sass-002.png

 

The working environment, as well as the tools used, will inevitably differ as we work in PHP applications, for example Symphony, Laravel, Zend, Cake or others, or in a customer-oriented framework, with purely HTML & JavaScript.

 

In general, and whatever the working environment, we can add a set of add-ins, called extensions, plugins or libraries that will extend the native capabilities of Sass.

 

Some of the most popular Add-ins include Compass, Bourbon, Sprite factory, Breakpoint, Susy, CSS Sprite, Typesettings, Scut, Buttons, Saffron, Andy

 

These additions are very easy to use, generally by installing them under the production environment, and, then importing them into the main document used by Sass.

 

@import "compass";
@import "susy";
@import "breakpoint";

 

We will dig deeper, and demonstrate how to install and use them, in the next article.

002-Sass-000.png

This article is also published in french - Comprendre et utiliser Sass

 

This series of articles on Sass is designed to increase your understanding of Sass and how to use it in your web development. This article will cover Sass methodology and implementation that will assist you in developing a workflow process.

 

If you want to start with Sass syntax, it is strongly recommended that you read some online articles in order to understand and take into account the basics of writing syntax. Do not hesitate to explore the examples provided by official websites such as the links below:

 

Going deeper

 

In addition, you will find on the web a plethora of sites go to further with your understanding of Sass:

 

 

Let's go back to our series of articles on Sass

 

002-Sass-0001.png

 

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 me begin with a summary of the articles that it contains and follow :

 

  1. What is Sass? Introduction and presentation
  2. The compilation and tools available
  3. Deploy Sass effectively
  4. Install and prepare Sass for production
  5. How to distribute partial files
  6. First steps and files
  7. Working with your mock-up