In Less I can do something like this
#basePath:"../../some_crazy_project_path_to_repeat/less/";
#import "#{basePath}less.less";
So I tried to do the same thing in Sass
$basePath:"../../some_crazy_project_path_to_repeat/less/";
#import "${basePath}less.scss";
// Syntax error: File to import not found or unreadable: ${basePath}less.scss.
and
#import "#{basePath}less.scss";
// Syntax error: File to import not found or unreadable: #{basePath}less.scss.
Is there a way to do this in Sass?
You can't use conditional stuff for imports in SASS.
Consider creating a Compass extension out of your project.
You cannot use variables in import paths as already mentioned. What you can do is use the -I or --load-path option to specify a directory to search from.
sass --watch sass/:css/ --load-path ../../path/to/library/
Let's say you have a directory structure like this:
themes
hotdog
_variables.scss
classic
_variables.scss
styles.scss
Your styles.scss should have import paths that are relative to the provided load-path(s):
// note the import here doesn't contain themes, hotdog, or classic
#import "variables";
#debug $foo;
Your commands would look something like this:
# hotdog
sass styles.scss hotdog.css --load-path ./themes/hotdog/
# classic
sass styles.scss classic.css --load-path ./themes/classic/
See the Sass options documentation for more information.
Related
I have a folder with all my .scss files that I want to compile into .css files using gulp. My gulpfile.js looks like this:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass',
function (){
return gulp.src('css/modules/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'))
}
);
When I run the gulp sass command, I get the error that a variable ($med-green) is not defined in blocks.scss. It is defined in base.scss, which gets compiled first because it compiled in alphabetical order (and I do end up with a base.css file). The main.scss file is in the css directory and all the other files are in the css/modules directory, so I know the paths are correct. The How do I get the variables to be visible to all the .scss files? What am I missing?
I also have a main.scss file that imports all my .scss files. If I could use that to compile them into 1 .css file (which is the ultimate goal), then that would be great. When I try to do that, I get the error "Error: File not found with singular glob". The main.scss file looks like this, where modules is a subfolder of css, where my main.scss file is.
#import "./modules/_reset.scss";
#import "./modules/_base.scss";
#import "./modules/_header.scss";
#import "./modules/_footer.scss";
#import "./modules/_blocks.scss";
#import "./modules/_interviews.scss";
#import "./modules/_search.scss";
in your case, there is two things to tell >>>
first: to solve your problem, you need to compile only one file (main.scss) that already imports all other scss files
second: scss files starting with ( _ ), get ignored when compiling in gulp-sass,
it is like telling the gulp-sass compiler that these files are for import only.
Try with this:
return gulp.src('css/main.scss')
in your sass task. You don't want individual css files for each of your modules/*.scss files, that is the point of partials and imports - you just want the one, main.scss, which imports them all. Individually, one file will not see the other's variables because each of them do not import all the others.
You want just main.css at the end to include in your html file.
i'm using grunt-sass/node-sass for compiling my scss files.
i have a lot of scss-files like btn.scss, panel.scss etc. component like.
i'm NOT mergin all scss files in one big css file (styles.css) - instead I compile like all separated css files (btn.css, panel.css etc.)
because I have globals scss files like variables.scss, mixins.scss etc. I have to import these files in every single scss file. for example in btn.scss I need to write everytime the #import directive (ex. #import 'variables, #import mixing etc.'). of course I could merge all globals files in one file and the just import that file.
is there a more elegant way to precomile or to inject these global files before or while compiling with grunt-sass?
thx!
I'm working on a project with webpack to load all my assets.
I load my assets like that in app.js and concat them with ExtractTextPlugin:
import 'foundation-sites/scss/normalize.scss';
import 'foundation-sites/scss/foundation.scss';
import './../sass/app.scss';
I read somewhere that webpack will read each line and one by one compile to CSS and append them to my dist file.
My problem is that I want to access the variables and mixins in foundation from the app.scss, but since they are compile one after the other and appended, it doesn't seem possible to access those mixins and variables. Any one has a solution?
You need to load your dependent .scss files within app.scss.
To do this with webpack. I've configured my app.scss like so:
#import '~foundation-sites/scss/foundation';
#import 'settings';
#include foundation-everything($flex: true);
// the rest of my imports now have access to Foundation mixins
#import 'mycomponent.scss'
The ~ tells sass-loader to tell webpack to look in the modules directory for those files.
I used https://github.com/Swiip/generator-gulp-angular to boilerplate my angularjs application.
I discover bootswatch theme flatly and want to use it and downloaded from [http://bootswatch.com/flatly/][2] two files, _variables.scss and _bootswatch.scss.
I added these two files to my vendor.scss
$icon-font-path: "../../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
#import '../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';
#import "flatly/variables";
#import "flatly/bootswatch";
and with gulp serve, I build my application and on console it shows me.
project developer$ gulp serve
[21:28:41] Using gulpfile /Volumes/Developer/angularjs/project/gulpfile.js
[21:28:41] Starting 'styles'...
[21:28:42] gulp-inject 2 files into index.scss.
stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error: /Volumes/Developer/angularjs/project/src/app/flatly/_bootswatch.scss:16: error: unbound variable $navbar-default-bg
[1]: https://github.com/Swiip/generator-gulp-angular
[2]: http://bootswatch.com/flatly/
Why unbound variable $navbar-default-bg but the $navbar-default-bg exists in _variables.scss file.
$navbar-default-bg: $brand-primary;
My project structure:
Import the _variables.scss file at the beginning of your custom index.scss:
#import '../../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables';
Another way around could be following these instructions >> https://github.com/Swiip/generator-gulp-angular/issues/379. I haven't tried this, though.
Try importing in this order variables, bootstrap, bootswatch as per
https://github.com/thomaspark/bootswatch/blob/gh-pages/global/build.scss
#import "flatly/variables";
#import '../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';
#import "flatly/bootswatch";
The boilerplate attempts to compile all .scss files in the src folder (When it should ignore scss files starting with _).
Moving flaty outside of /src makes it behave eg
#import "../../flatly/variables";
#import '../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';
#import "../../flatly/bootswatch";
When I run sass --watch app.sass:app.css terminal shows that changes have been detected to sass but won't compile to css. I am using Bourbon so all my .scss and .sass files are imported via mixins.
ex.
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> Change detected to: css/2-modules/top-nav.scss
Make sure the file you are saving with an _filename.scss has been properly imported into the mainfile.scss. if you have not imported the _filename.scss it will detect a change but not compile.
I had the same issue! In my case, it was caused by having several #imports listed like this:
#import 'colors';
#import 'fonts';
#import 'size';
When i changed it to this it all started working again:
#import 'colors', 'fonts', 'size';
Although it should not be needed:
"Sass imports have the same syntax as CSS imports, except that they allow multiple imports to be separated by commas rather than requiring each one to have its own #import." - sass-lang.com/documentation
check for the Config.rb file in your folder.
without it you have to Ctr c every time and pass this command sass --watch scssname:cssname
then You can find your code in css.
Are you sure all of your partials are being imported into app.scss? I had the same issue, only to realize the partial file I was modifying (_custom.scss) wasn't actually being imported by the main.scss.
Create scss file by correct naming (make sure there is underscore "_")
_custom.scss
Import _custom.scss in main.scss (no underscore required)
// main.scss
#import "custom";
Compile the code
sass --watch main.scss main.css
This will compile the code properly.
In your style folder create a file.scss with "_" in the beginning. For example: _fileName.scss
Import it at the start of your principal scss file. For example:
// in **mystyle.scss**
do : **#import "fileName"** (without the underscore )
Run your sass in the terminal. For example:
sass mystyle.scss:mystyle.css --watch