Marfeel Docs

# Sass

Sass (opens new window) is a CSS pre-processor that supports the indented syntax and SCSS. Marfeel uses SCSS to standardize the usage of styles.

When the scaffolding of a Tenant is done, it includes a custom.scss file, which can be edited to code the custom styles of the site.

There are also global SCSS files that establish the common styling shared by all Tenants. These are created in Pixie (opens new window).

When setting up your local environment, Sass will be installed and you will be able to edit SCSS files.

These are the main features to be used:

# Selector nesting

Selectors can be nested to avoid repetition. Therefore, child selectors can be added as siblings of their parent rules.

It is also possible to use the & character to specify the parent selector.

.related-articles {
  border: 1px solid #858D94;
  margin: 20px 0;
  padding: 5px;
  box-sizing: border-box;

  .type_2 article {
    figure {
      width: 100%;
      overflow: hidden;

      &__label {
          color
      }

      a img {
        padding: 0px 4px;
      }
    }
  }
}

TIP

To use selectors in a more organized way, it is recommended to use the BEM (opens new window) methodology.

# Variables

It is common to see Sass variables (opens new window) in Marfeel. Every time you see a name beginning with $ in an SCSS file, that is a variable. They can refer to CSS properties and values.

.art {
    margin-bottom: $trailingMargin;
    $color: $secondaryTextColor;
}

To create one of them, you just need to add a name starting with $ and assign a value to it. Then you will be able to reuse it.

$premium-color: #e4b618;

# Mixins

Sass mixins (opens new window) help us to create CSS code once and reuse it as many times as needed.

Marfeel mixins (opens new window) are created in Pixie by using the @mixin at-rule. However, we use @include to apply them in SCSS files.

For example, this is the way the imageResizer mixin is configured to change the size of an image:

@mixin imageResizer($width, $height) {
	img {
		width: $width;
		height: $height;
	}

	amp-img {
		max-width: $width;
		max-height: $height;
	}
}

This is how the custom.scss file of a Tenant is used:

@include imageResizer(78px, 78px);

# Imports

If one SCSS file is using the code from another one, it is possible to use the @import at-rule (opens new window) to avoid duplication.

For example, if example.com, example.es and example.it are in the same Media Group and have the same author box element, one of them could have an _authorBox.scss file to style it in a common/src/scss folder. Then, the others could import it by adding this line in their index/src/_custom.scss file:

@import "../../../../example.com/common/src/scss/_authorBox.scss";

This is an example of the directory structure they would follow:

.
├─ example.com
│  ├─ common
│  │  └─ src
│  │     └─ scss
│  │        └─_authorBox.scss
│  └─ index
│     └─ src
│        └─ scss
│           └─_custom.scss
├─ example.es
│  └─ index
│     └─ src
│        └─ scss
│           └─_custom.scss
└─ example.it
    └─ index
       └─ src
          └─ scss
             └─_custom.scss

# Compile SCSS to CSS

To run styles changes in your local environment, you need to compile the SCSS files to CSS by executing one of the following commands in the Terminal:

  • Jinks --customstyles: compiles the SCSS files of a Tenant.
  • Jinks --corestyles: compiles only the core styles.
  • Jinks --styles: compiles the SCSS files from both core and the Tenant.

← Implement Search bar →