Import SASS Partial Over Http Instead of Filesystem

import SASS partial over http instead of filesystem

This documentation is discussing the fact that you can implement your own importer; HTTP is being used as an example. Fortunately, it is not too difficult to do so.

Here, I've implemented a simple HTTP importer: https://gist.github.com/1111803

It doesn't cache as aggressively as it could, and you should be aware that Sass will use it in addition to the filesystem to look for all imports (if you use a framework like Compass, there are many of these). If you need more performance, you should probably cache the failures in this case. Still, it seems to work in my testing.

You can use it simply by requiring the sass_http.rb file and then adding it to the load path:

require 'sass_http'
Sass::Plugin.options[:load_paths] ||= []
Sass::Plugin.options[:load_paths] << Sass::Importers::HTTP.new("http://stylesheets.example.com/")

The path currently must refer to a directory (i.e. end in a slash). You should get all of the usual debugging information (with HTTP, rather than filesystem, paths).

Import SASS file from database instead of filesystem

Since you're using Compass to compile, you can add a custom Sass importers in the Compass config file. For example, compiling using compass compile -c config.rb, you would include something like this in your config.rb file:

require File.join(File.dirname(__FILE__), 'importer.rb')
Sass.load_paths << Sass::Importers::Custom.new()

Then in importer.rb in the same directory, you would include your importer definition:

module Sass
    module Importers
        class Custom < Base
            def find(name, options)
                if name == '[globals]'
                    options[:syntax] = :scss
                    options[:filename] = 'globals'
                    options[:importer] = self
                    return Sass::Engine.new("$imported-variable: blue;", options)
                else
                    return nil
                end
            end

            def find_relative(uri, base, options)
                nil
            end

            def key(uri, options)
                [self.class.name + ":" + uri, uri]
            end

            def mtime(uri, options)
                nil
            end

            def to_s
                '[custom]'
            end
        end
    end
end

Then in your Sass file you can use the importer:

@import '[globals]';
p {
    color: $imported-variable;
}

Of course, this is just a dummy implementation that only accepts a URI matching "[globals]". You'll need to supply your own implementation that accesses your MySQL database, as I don't have any experience with database access in Ruby. Hopefully this should get you a little closer, though, in addition to the links that @Sean has provided.

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

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/

Import regular CSS file in SCSS file?

Looks like this is unimplemented, as of the time of this writing:

https://github.com/sass/sass/issues/193

For libsass (C/C++ implementation), import works for *.css the same way as for *.scss files - just omit the extension:

@import "path/to/file";

This will import path/to/file.css.

See this answer for further details.

See this answer for Ruby implementation (sass gem)

How do I add custom functions to Sass (via Sass::Script::Functions)?

Try following the instructions from your second link, but specify an absolute path to your ruby file. On my machine, it looks like SASS has issues finding the file if it's given a relative path.

sass nested reset with import

Here's how an import looks in Sass:

@import "_reset";

The file can be either .scss, .sass or .css. It must be on your local file system; the @import must point to a location relative to the file you are using it in. The underscore is a partial, which means that it will only be included in other files, and won't output its own reset.css file.

You'll probably find it easiest to save a local copy of that reset file. Consider making changes to your reset copy - there's little sense to resetting #wrapper body.

Also note that if you want to affect just #wrapper, you'll do this:

#wrapper {
    @import "_reset";
}

But if you want to affect everything inside #wrapper, you'll do this:

#wrapper * {
    @import "_reset";
}

Apply multiple styles with SASS

Is this not simply a case of doing:-

.one,
.two,
.three {
 max-width: 960px;
 margin: auto;
}

Or, better:-

.thing {
 max-width: 960px;
 margin: auto;
}

and apply the class 'thing' where needed. This doesn't really appear to need a Sass specific solution. Unless you wanted to extend the latter example as:-

.one { @extend .thing; }

and so on.

---

Related Topics