Installation

1. Install with Yarn or NPM

      yarn add sailorcss
    

      npm i sailorcss
    

If you are not using a Node development environment, you can download Sailor CSS from Git and manually add it to your project.

2. Create a config file

Start be creating a config.scss in your project. This config file must wrap all the configuration variables inside a @use "sailorcss" with ();

A good start is to download or take a look at the following example file :

Note : The @import rule is now depreciated in SASS. SailorCSS ^2.0 use the @use and @forward rules to make its content available.
Learn More in the SASS official documentation.

3. Add this config file to your project

In your index.scss (or main SCSS file), include with the @use rule your config file before anything else.

      // adjust path to your config file
      @use "{your-path}/config";
      // if you want to use the reset from SailorCSS, add it too
      @use "sailorcss/reset"
    

4. Use mixins and placeholders in your partials

With the SASS @use and @forward rules, you must include SailorCSS with a namespace in each partial in order to use it. Don't worry, any styles loaded this way will be included exactly once in the compiled CSS output. This is now the recommanded way to "import" in SASS.

      // @use sailorcss at the top of your file and add a shorter namespace
      @use "sailorcss" as s;

     // You will need the namespace before the mixins (not before placeholders)
     .example-class {
         @include s.fluid-font(sm, xl, 24px, 48px);
     }