How to import scss file in compass only if it exists?

可紊 提交于 2019-11-28 04:30:30

问题


I need to have special scss file that is different for every installation of the project, so I don't want to include it in git archive. But everything should work even if this file doesn't exist.

Is there any way to @import scss file only if it exists, ignoring file not found error?


回答1:


You'll need to make use of the "import-path" option to do this, where the path you're importing contains the fallback files you want to import (in our case, we want an empty file).

Option 1: Vanilla Sass

File structure

├── fallback
    ├── _example.scss // <-- our blank file
├── _example.scss // <-- the file for the user to customize (optional)
├── style.scss

In style.scss:

@import "example";
/* the rest of our styles */

When you run your sass command, you would write it like this:

sass --watch ./css:./sass --load-path ./sass/fallback

Note that the fallback directory does not have to be inside your sass directory, it be anywhere on the filesystem you like.

See also: How does SCSS locate partials?

Option 2: Compass Extension

You may find that creating a Compass extension is a little more convenient if you're using this technique in multiple projects. It will automatically setup the load-path for you. You can learn more about creating extensions here: http://compass-style.org/help/tutorials/extensions/




回答2:


Maybe with sass-globbing and a naming convention for optional files follow a specific order of loading.

Consider the following tree:

stackoverflow-14975341/
├── .gitignore
├── config.rb
├── css/
│   └── screen.css
└── sass/
    ├── optionals/
    │   ├── .gitkeep
    │   ├── _01_style.scss
    │   └── _03_style.scss
    └── screen.scss

with these files:

# config.rb
require 'sass-globbing'

sass_dir   = 'sass'
css_dir    = 'css'
relative_assets = true

and

// sass/screen.scss
@import "optionals/*";

and

// sass/optionals/_01_style.scss
.optional1 {
  background-color: red;
}

and

// sass/optionals/_03_style.scss
.optional3 {
  background-color: green;
}

and, for in the .gitignore:

sass/optional/*

Finally, to keep the optional folder, create an empty file named .gitkeep (the file name is not important).

When you compile the stylesheet, Compass generates the screen.css even if the file _02_style.scss is missing.

// css/screen.css
/* line 1, ../sass/optionals/_01_style.scss */
.optional1 {
  background-color: red;
}

/* line 1, ../sass/optionals/_03_style.scss */
.optional3 {
  background-color: green;
}

It is certainly possible to improve the system based on import additional paths.



来源:https://stackoverflow.com/questions/14975341/how-to-import-scss-file-in-compass-only-if-it-exists

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!