How can i create SASS mixins and use in every proj

2019-09-12 05:37发布

问题:

I want to create a scss file with different mixins that I want to use in any project by simply using @import "mixinfile" and not to copy that file in every project. Similar to adding a folder to path in windows. How can I do that?

回答1:

Compass is Sass framework that not only provides a great deal of useful functions and mixins, but it allows you to easily create your own extensions. If you bundle your extension as a gem (which I personally recommend doing), you won't have to remember where you put it on the filesystem.

http://compass-style.org/help/tutorials/extensions/

When an extension is installed as a Ruby gem (which is easy to do, even if you don't know a thing about Ruby), all you need to do is add a line like this to your config.rb file:

require "extension-name"

And it will make all of your stylesheets from within your extension accessible just like you had a copy of them in your project directory:

@import "extension-name/widgets";

The author of Compass has a screencast of how to write your own extension here (doesn't cover creating a gem out of the extension):

http://chriseppstein.github.com/blog/2010/08/01/building-a-personal-framework/



回答2:

If you are on a mac, I would recommend you to use Codekit as a pre-compilator, it offer you the opportunity to import your own framework for every our your projects. Good stuff.

Look for @import Statements there http://incident57.com/codekit/help.php



回答3:

let's say the name of your mixin would be "example". So you would write "@import example" in your .scss files. In order for it to work, you'd have to have a file called "_example.scss" in your stylesheets path.

Now, you say you want to share this mixin across projects. For that you'll have to load your mixin through a lib, and if we're talking about rails, the best way is to do it using rails engines (see bourbon gem source code). Then add it as a dependency in your gemfile (you can use the git uri or other types of source).



标签: ruby sass