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')}";
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.
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'
I have a mixins file, which I constantly develop. I use it in every project, but sometimes I need to go back and I not always remember to copy the new file, so it causes confusion (plus, it's really counterproductive, having to copy a single file to each project).
What I thought today, that it would be great if I could import a scss file either from remote hos (a dropbox url) or an absolute path. I tried using this:
#import 'F:/XAMPP/htdocs/RATIUG/ratiug/reset';
and
#import 'http://myDropboxLink';
but neither worked. Can I solve this somehow?
When Sass encounters #import with a protocol, it assumed that is a CSS directive. So, you have to precise a shared folder.
Solution with Sass
If you uses Sass in standalone mode, you can add the --load-path argument to precise the shared folder:
$ sass --load-path F:/XAMPP/htdocs/RATIUG styles.scss
Now, you can call your reset mixin:
#import "ratiug/reset";
Solution with Compass
Simply add the shared path in your config.rb with add_import_path:
sass_dir = "sass"
css_dir = "css"
add_import_path File.expand_path("F:/XAMPP/htdocs/RATIUG")
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.