The Compass Core Framework

27th May 2017

The Compass core framework contains functionality that can be re-used within your CSS project without the need of duplicating code. The code Compass provides includes predefined variables, functions and mixins.

This code comes in the form of support files that Compass provides. These files can then be imported into your project using the @import keyword.

Some examples of variables, functions and mixins that Compass provides can be seen below.

Compass Variables

Use the $browser-minimum-versions variable to specify the minimum browser versions that must be supported within your project.

$browser-minimum-versions: (
  "chrome":  "35",
  "firefox": "28",
  "ie":      "9",
  "safari":  "6",
  "opera":   "20"
);

You can import the Compass browser support using @import "compass/support".

The $base-font-size and $base-line-height are configurable variables used as part of the Vertical Rhythm library.

$base-font-size 16px

$base-line-height 24px

Import the Vertical Rhythm library using @import "compass/typography/vertical_rhythm".

Compass Functions

brightness() returns the brightness of a colour. It returns a number between 0% and 100%, where 100% is fully bright and 0% is fully dark.

brightness($color)

box-shadow() allows you to specify custom box shadow settings, passing in a colour and the shadow.

@import "compass/css3";

// Box shadow with custom settings
#box-shadow-custom {
  @include box-shadow(red 2px 2px 10px);
}

Compass Mixins

Mixins can be included in your project using the @include keyword.

@include transform(rotate(-135deg) skew(-10deg, -10deg));

The float-left and float-right mixins contain fixes for the double-margin bug in IE5/6. These mixins can be included as long as the Compass float file has been imported.

@import "compass/utilities/general/float"

@include float-left;
@include float-right;