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.
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.
I would like to use the feature "Mapping network resource" to see my .scss files. So I mapped my main.css file to my main.scss.
The issue I have is that my main.scss contains only #import instructions :
// Utils
#import 'utils/colors';
#import 'utils/bootstrap-variables';
#import 'utils/functions';
#import 'utils/variables';
#import 'utils/mixins';
// Vendors
#import 'vendors/bootstap';
#import 'font-awesome';
// Base
#import 'base/reset';
#import 'base/typography';
// Components
#import 'components/state';
#import 'components/panel-dashboard';
#import 'components/modal';
So when I inspect my DOW elements, I don't see the real .scss ressources, but only the main.scss ressource.
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
...
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/
I'm in the initial stages of setting up a project and wanted to structure my sass files appropriately.
This is my structure:
/css
style.scss
/partials
_colors.scss
In style.scss
#import 'partials/_colors';
body {
background-color: $mainBgColor;
}
In _colors.scss
$mainBgColor: #eee;
When I attempt save style.scss, I get error on save... check file for syntax or something to that effect.
In fact, each of these #import directives produce errors:
#import 'partials/_colors.scss';
#import '_colors.scss';
#import '_colors';
#import _colors;
What am I doing wrong?
Try removing the underline and the extension on the file name, like this:
#import "partials/support";
#import "colors";
That should do it, good luck!