Using Compass

Compass is an open-source Sass framework. It offers:

Installation

Compass (and Sass) require the installation of the Ruby language on your machine.

Here are some installers:

Once Ruby is installed on your machine, install Compass – which will in turn install Sass. Go to your Ruby command line and type "gem install compass".

Starting a project project

You are now ready to create your first project:

  1. Go to the /themes folder of your local installation of PrestaShop.
  2. Open a Ruby command line window for this folder, and type "compass create".
    Compass will automatically detect or create the config.rb configuration file that is necessary for the compilation of your project.

To make sure that .scss files are automatically compiled, you can type this Ruby command: "compass watch".

To use Compass, you must import it within your theme's main CSS file:

@import "compass";

This will also import the following libraries:

Not a command line fan?

If you would rather not spend your time in the command line, Scout is the cross-platform application for you: it is a self-contained Ruby environment that gives you easy access to Compass and Sass.

Download it here: http://mhs.github.io/scout-app/

After you have installed it, you must:

  1. Create your project at the root of your theme's folder.
  2. Indicate the folder of your .scss files (Input folder).
  3. Indicate the folder for your CSS files (Output folder).

Compass helpers

Colors / Color Stops

These color functions are useful for creating generic libraries that have to accept a range of inputs.

The color-stops helper provides a way to pass an arbitrary number of colors stops to the gradient mixins.

Any number of comma-delimited color stops can be passed, each color stop should take the form of a color followed by an optional stopping point (separated by a space).

Where stop values are not provided they will be inferred by assuming an equal distribution of colors between any specified locations.

Examples:

Constants

These helpers manipulate CSS Constants.

  • opposite-position(left) => right

  • opposite-position(top) => bottom

  • opposite-position(center) => center

  • opposite-position(top left) => bottom right

  • opposite-position(center right) => center left

Cross Browser 

Function: prefixed($prefix, $arg, ...)


Returns true if any of the arguments require the given prefix. 

Function: prefix($prefix, $arg, ...)

Transforms the argument(s) into a representation for the rendering engine indicated by $prefix.

Usually this means just adding a prefix, but in some cases, this may result in entirely different representations for the given rendering engine (E.g. linear-gradient).

Values that do not have a specific representation are passed through without being transformed. 

Function shortcut
  • -webkit($arg, ...) : This is a shortcut for calling prefix(-webkit, $arg, ...).
  • -moz($arg, ...) :This is a shortcut for calling prefix(-moz, $arg, ...).
  • -o($arg, ...) : This is a shortcut for calling prefix(-o, $arg, ...).
  • -ms($arg, ...) : This is a shortcut for calling prefix(-ms, $arg, ...).
  • -svg($arg, ...) : This is a shortcut for calling prefix(-svg, $arg, ...). Instead of adding a prefix, it returns a representation of the arguments using SVG to render them where it can.
  • -pie($arg, ...) : It it used to get CSS3 PIE support where necessary.

  • -css2($arg, ...) : This is a shortcut for calling prefix(-css2, $arg, ...). It is a kind of hack to sanitize the output of experimental code into a form that can be parsed by a css2.1 compliant parser. Usually this results in causing some functions to be omitted.

  • css2-fallback($value, $css2-value) : This function returns a value that is normally $value, but is $css2-value when passed through the -css2() helper function. Many of the compass css3 mixins will create a css2 fallback value if the arguments have a css2 representation (gradients have a null css2 representation).

 

Font Files

The font-files function takes a list of arguments containing the path to each font files relative to your project's font directory.

@import "compass/css3";
@include font-face("Blooming Grove", font-files("examples/bgrove.ttf", "examples/bgrove.otf"));
.example {
  font-family: "Blooming Grove";
  font-size: 1.5em;
}

Image Dimension

Inline Data

Math

Available functions:

Sprite

URL

Managing sprite with Compass

Compass makes it really easy to create sprites from a bunch of images.

See the online tutorial here: http://compass-style.org/help/tutorials/spriting/

The CSS library

This library provides cross-browser mixins for CSS properties introduced in CSS3, for example border-radius and text-shadow.

It is automatically imported with Compass, but you can import that specific part of Compass with this line:

@import "compass/css3";

It has many available imports:

You can learn more about each on the official site: http://compass-style.org/reference/compass/css3/

The Typography library

This library provides some basic mixins for common text styling patterns.

It is automatically imported with Compass, but you can import that specific part of Compass with this line:

@import "compass/typography";

It has four available imports:

You can learn more about each on the official site: http://compass-style.org/reference/compass/typography/

The Utilities library

This module provides some basic mixins for common styling patterns.

It is automatically imported with Compass, but you can import that specific part of Compass with this line:

@import "compass/utilities";

It has five available imports:

You can learn more about each on the official site: http://compass-style.org/reference/compass/utilities/

The Layout module

This module provides tools to help you with page layout.

To use this library, you must explicitly import that part of Compass with this line:

@import "compass/layout";

It has three available imports:

You can learn more about each on the official site: http://compass-style.org/reference/compass/layout/

The Reset library

This module applies the global reset to your stylesheet by simply importing it.

To use this library, you must explicitly import that part of Compass with this line:

@import "compass/reset";

It has one available import: Compass Reset Utilities, which adds a reset CSS to your stylesheets.

It is based on Eric Meyer's Reset 2.0 code: http://meyerweb.com/eric/tools/css/reset/index.html

You can learn more about each on the official site: http://compass-style.org/reference/compass/reset/