Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Sass importing without compiling

In sass, the way one imports is by using the import command. I will use Zurb Foundation as an example:

@import "foundation";

This will then import the whole foundation.scss file and all it's relative imports to the top of the current file. This means that the entire foundation.scss file will be compiled and outputted along with the contents of the file to the final <name here>.css file.

Though this is good for customisation, such as custom colors and spacing, it becomes a pain when creating libraries and distributing these libraries as individual droplets for other people to slot into their existing projects.

Is there a way to import files as "references", so that mixins and other variables become available in the scope of the current file, but other css statements are ignored? The LESS css preprocessor has a newly implemented import tag similar to this (appropriately named a reference).

like image 590
user3030670 Avatar asked Nov 25 '13 09:11

user3030670


People also ask

Is Sass import deprecated?

As of October 2021 @import will be deprecated, along with global built-in functions, and one year after that (no later than October 2022) @import support will be dropped.

Can you import SCSS into Sass?

Tip: You do not need to specify a file extension, Sass automatically assumes that you mean a .sass or .scss file. You can also import CSS files. The @import directive imports the file and any variables or mixins defined in the imported file can then be used in the main file.

How do I import variables in Sass?

To use variables across multiple files in SASS is carried out by @import rule of SASS. @import rule which import Sass and CSS stylesheets for providing variables, @mixins and functions. Such that combine all stylesheets together for compiled css.

What is difference between @USE and @import?

The new @use is similar to @import . but has some notable differences: The file is only imported once, no matter how many times you @use it in a project. Variables, mixins, and functions (what Sass calls "members") that start with an underscore (_) or hyphen (-) are considered private, and not imported.


1 Answers

Taking a look at Foundation demonstrates a good approach to this:

https://github.com/zurb/bower-foundation/blob/master/scss/foundation/components/_breadcrumbs.scss

Here they have one @import "global"; at the top of the file.

That is followed by a bunch of mixins

At the bottom they have:

@include exports("breadcrumbs") {
  @if $include-html-nav-classes {
    .breadcrumbs {
      @include crumb-container;
      @include radius($crumb-radius);

      &>* {
        @include crumbs;
      }
    }
  }
}

The $include-html-nav-classes is set to true by default in the _global.scss file. It can be overridden in any other file by changing it to false. This allows you to both use the mixins and generate html.

If you don't need to generate any css just include mixins only and it will simplify your situation. I believe that they do this to allow for fast customization and optimization of the outputted css.

like image 162
JAMESSTONEco Avatar answered Sep 24 '22 14:09

JAMESSTONEco