So if I have an aggregate file with imports in it:
#import "global"
#import "menus"
#import "datepicker"
#import "index"
#import "drawers"
Is there a way to have that file compile when any of the things it is importing change?
Yes can make it possible with grunt
http://gruntjs.com/
Here is complete workflow of grunt + compass
http://matthew-jackson.com/notes/development/grunt-workflow-for-sass-compass-and-js/
Related
I am now creating html project using sass and client requested to use material.io web component. My sass is working fine. I included material.io component through node_modeules folder. But when I tried to access material-components-web.scss like below code
//style.scss file
#import 'layout';
#import 'typo';
#import 'image';
#import 'overwrite';
#import "~material-components-web";
I got this error message in style.css file.
/*
Error: File to import not found or unreadable: ~material-components-web.
Load paths:
/Users/kenvsi/www/static/mycondo/assets/sass
/Applications/Koala.app/Contents/Resources/app.nw/rubygems/gems/compass-core-1.0.1/stylesheets
Compass::SpriteImporter
on line 5 of /Users/kenvsi/www/static/mycondo/assets/sass/style.scss
1: #import 'layout';
2: #import 'typo';
3: #import 'image';
4: #import 'overwrite';
5: #import "~material-components-web";
My question is that I would like to assess all material scss components, variable and function to my custom scss file. Is there any ways to access those material scss options in html project?
i think you miss to include the scss file.
I am using this with webpack for sass compiling.
#import "~material-components-web/material-components-web";
First "material-components-web" is a folder and second is a scss file.
Trying to build custom workflow with gulp, panini, mustache, sass and one of my problem is including partials from node_modules, here is example from main.scss file:
#import "node_modules/bootstrap/scss/mixins";
#import "settings";
How to avoid typing full path to _mixins.scss?
Your question is similar to this: Sass import not crawling node_modules to find appropriate package
You can include paths by passing the includePaths argument to gulp sass. e.g
.pipe($.sass({
includePaths: ['node_modules/bootstrap/scss/', 'another/path']
})
You can include node_modules in sass pathes:
.pipe(sass({
includePaths: ['node_modules']
})
Then you can import library's sass like this:
#import "bootstrap/scss/bootstrap";
Or, in case of material-components-web:
#import "#material/top-app-bar/mdc-top-app-bar";
This way:
you don't need to add each lib to path
the sub-dependencies imports will work seamlessly, e.g. mdc-top-app-bar in MDC example imports "#material/elevation/mixins".
Use includePaths or you could resolve NPM modules like this:
#import "~bootstrap/scss/mixins";
#import "settings";
There are some libraries for this sass-globbing, but I personally don't like this approach, because in CSS matters on import order.
Best practice is IMHO create some file vendor.scss;
#import "~bootstrap/scss/mixins";
#import "~bourbon/...";
and then import this vendor.scss:
#import "vendor.scss"
#import "partials/..."
For anyone else that stumbles here, if you're using gulp-ruby-sass instead of node-sass you would use
loadPath: ['node_modules/bootstrap/scss/']
instead of
includePaths: ['node_modules/bootstrap/scss/']
I want to use Bootstrap with SASS, but I can't find any tutorials or explanation how one can use Bootstrap with SASS. The only thing I find is installatio trough a ruby gem:
compass create my-new-project -r bootstrap-sass --using bootstrap
Which creates the following tree in my folder:
Is this enough for Bootstrap to use its own Grid, because I don't see the bootstrap.scss file, neither any Grid related files. However, I find the grid classes and all in a styles.css file. Isn't there a bootstrap.scss file that has all the mixins and everything else? And where can I find a more extended use of SASS's Bootstrap mixins, which are described here briefly:
http://www.hongkiat.com/blog/bootstrap-and-sass/
Thank You all in advance! I really can't find nothing on my problem.
(I'm using .sass files in my answer, but it should apply to .scss files, too)
Isn't there a bootstrap.scss file that has all the mixins and everything else?
Yes, there is. Here's the generated styles.sass file:
// Import Bootstrap Compass integration
#import "bootstrap-compass"
// Import custom Bootstrap variables
#import "bootstrap-variables"
// Import Bootstrap for Sass
#import "bootstrap"
bootstap_variables refers to the generated _bootstrap-variables.sass file in your project tree, whereas bootstrap-compass and bootstrap are imported from the gem's stylesheets directory.
The latter imports all other Bootstrap files, including the grid:
// Core variables and mixins
#import "bootstrap/variables";
#import "bootstrap/mixins";
// Reset and dependencies
#import "bootstrap/normalize";
#import "bootstrap/print";
#import "bootstrap/glyphicons";
// Core CSS
#import "bootstrap/scaffolding";
#import "bootstrap/type";
#import "bootstrap/code";
#import "bootstrap/grid"; # <-- here it is
...
I just recently downloaded a ready made project and it has scss files on it too. when I tried to compile main.scss file using koala-app it gives me this error.
C:\Users\1\Desktop\agency\sass\main.scss Syntax error: File to import not found or unreadable: compass/css3.
Load paths:
C:/Program Files (x86)/Koala (DEPRECATED)
C:/Users/1/Desktop/agency/sass
on line 2 of C:\Users\1\Desktop\agency\sass\partials\_base.scss
from line 4 of C:\Users\1\Desktop\agency\sass\main.scss Use --trace for backtrace.
by the way line 4 : #import "compass/css3";
I already installed:
ruby 1.9.3p545
gem 1.8.28
main.scss
// MAIN
// all modules, general styles and variables
#import "partials/base";
#import "partials/general";
// third-party
#import "vendors/supersized";
#import "vendors/font-awesome.min";
#import "vendors/brankic-icon";
#import "vendors/flexslider";
#import "vendors/animate";
#import "vendors/jpreloader";
#import "vendors/magnific-popup";
// web elements/components
#import "partials/hero-unit";
#import "partials/about";
#import "partials/services";
#import "partials/works";
#import "partials/call-to-action";
#import "partials/team";
#import "partials/testimonial";
#import "partials/contact";
#import "partials/twitter-stream";
#import "partials/footer";
_base.scss
/* ------------------ BASE STYLES ------------------ */
// import compass
#import "compass/css3";
// all variables
any suggestions would really be appreciated.. thanks ( note: newbie on sass :)
what I did was create a new sass project using ruby's command prompt "compass create newproject" then transfer the files there. then it worked.. I really did not solve the problem, thought but somehow I found a way to make it work. heres the link for reference.
I have _header.scss, _footer.scss and _main.scss and I want to combine them all into one and generate style.css.
I know it has to do with file watchers, but I haven't been able to figure out how to combine multiple files into one.
Create file styles.scss that contain this code
#import 'header';
#import 'main';
#import 'footer';
It's not a PHPStorm feature, it's a SASS feature.
In style.scss it should start out with:
#import "_header";
#import "_footer";
#import "_main";
PHPStorm doesn't have to combine the files, Scss does.
#SlawaEremkin above is correct.
Be sure that the import file is named without an underscore (not a SASS partial) otherwise there won't be an output CSS file.
Correct
styles.scss
Incorrect
_styles.scss