In Middleman, I can specify that I want to yield a partial located in a specific directory by using
= partial "partials/imports/js"
I'd like Middleman to know in which directory my partials reside. How do I modify config.rb so that I can just use = partial "js"?
You can change the default partials directory by using set in your config.rb like this:
set :partials_dir, 'partials/imports'
Related
Im my project I have a main SASS file in the root. I also have a folder with _other.sass and icon.png in it.
main.sass
folder/_other.sass
folder/icon.png
My main SASS file includes my other SASS file:
In main.sass:
#include 'folder/other'
In _other.sass:
div {
background: url(icon.png);
}
Should the path to the image resolve correctly in this case? From the point of view of _other.sass the path is correct, but its not correct relative to main.sass.
Since all the compiled code will be included in your final *.css file, all urls must be relative to that resulting *.css file. In the code you have posted, the url is assigned as regular css code, so it wont be transformed in any way.
If you would use compass, what is a great extension to sass, you can use the provided functions, f. i. those to generate the needed urls. With compass you can configure all the base paths and the stuff alike, sass itself wont do that for you.
I am trying to do :
#if (debug)
.crazyClass {}
And I would like the debug variable to come from the console when I compile my sass, is this possible?
You can't inject variables into SASS or set variables via the command line. I really wish we could because it would simplify issues like this.
I know of only two ways of doing conditional compiles.
Use Different Entry Points
Use different SASS files as the entry points for compile. Your project might look something like this.
/www
/css
_styles.scss
dev.scss
prod.scss
The dev.scss file would set debug to true, and import _style.scss, but the prod.scss would set debug to false, and import _style.scss. Both produce the output CSS file but for different environments.
Use Different Import Paths
You can configure SASS to use different import paths and setup your project files like this.
/www
/css
/dev
_config.scss
/prod
_config.scss
styles.scss
The styles.scss would just do a #import "config" at the top, and depending on which path is set the corresponding _config.scss file would be imported.
Each bit of my project is a separate component, with its own hierarchy. To include them in my file, I just need to include the app.jsand inject it to whatever I want. So for each component, I have a separate config.rb file to run the compass for it.
Now, say I have the following hierarchy:
/app
config.rb
/assets
/sass
_functions.scss
/css
/components
/login
/assets
/sass
app.scss
/css
config.rb
Say I want to #import _functions.scss into app.scss. Right now, I have to use the relative path , and basically keep on going back the root folder, and then go into the folder for the file.
Is there a way to define the path inside the login's config.rb file?
You can uses the add_import_path directive in your config.rbfile, like I do in a project to access vendors mixins:
add_import_path "#{File.expand_path(sass_dir)}/vendors";
In your case, it would be:
add_import_path "#{File.expand_path('./assets/sass')}";
I have a project where the basic asset folder structure looks like this:
/css
/css/sass
/js
/images
When I compile the SASS files, it places them into the css folder above. I do it this way to try and keep my directory structure logical and simple.
I'm using relative paths in my SASS files to link to images:
background: url(../images/foobar.png);
However, since the path is relative from the CSS directory, PHPStorm flags it as an error.
Is there any way to configure PHPStorm to be able to recognise assets from a destination path, and not just directly from the SASS file?
Replace:
background: url(../images/foobar.png);
With:
background: image-url('foobar.png');
To use the compass image-url() function. The inspection errors from PHPStorm will then disappear, and compass will automatically generate the correct path based on the image resource root.
I have a whole MESS of javascripts in vendor/assets/javascripts. In my app/assets/javascripts/application.js file, I have the directive:
//= require_tree .
Does that only reference the current app/assets/javascripts directory, and not lib/assets or vendor/assets?
If I explicitly include the javascripts, it works. I just don't really want to do that if I don't have to.
Is there something I am missing that will allow the assets pipeline to be able to serve up assets from outside the app directory (lib and vendor) automatically?
require_tree only pulls in assets that are under the application.js file.
lib/assets and vendor/assets are already included in the lookup paths for the pipeline (refer this code).
You can include these vendored files by using a second manifest.
Go to vendor/assets/javascripts and create a file called misc_vendor.js
Inside that add put a require_tree directive.
Then refer to that file from your application.js manifest:
require misc_vendor
If you have any issues because of loading order you can manually require the vendor files in the order you need instead of using require_tree.
As part of the conversion to the pipeline it may be a good chance to clean up things! :-)
Also, you can do it without a second manifest like this:
//= require_tree ../../../vendor/assets/javascripts/.
The path should be relative to the 'app/assets/javascripts/application.js' manifest file.
You need to extend path in application.rb file like this.
config.assets.paths << "#{Rails.root}/vendor/assets/some file name"
Refer this Guide for more details