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!
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.
Liferay 6.2
Maven 3.3.9
I'm using liferay-maven-plugin:6.2.10.13:build-css to compile scss files to css.
my main.css is :
#import url(base.css);
#import url(application.css);
#import url(layout.css);
#import url(dockbar.css);
#import url(navigation.css);
#import url(portlet.css);
#import url(extras.css);
#import url(custom.css);
#import "wip/main";
which is a normal Liferay main.css file. I just added the wip/main import (which is a scss file).
My wip/main.scss file is :
#charset "UTF-8";
/////////////////////////////
// variables
#import "app-var";
#import "app-mixins";
/////////////////////////////
// maincontent
#import "slider-banner";
#import "membership-box";
// more #imports...
And it works ! Great :)
Now I want to prefix all my wip/main.scss rules (which are imported from different files) with a :
.aui {
So something like :
#charset "UTF-8";
.aui {
/////////////////////////////
// variables
#import "app-var";
#import "app-mixins";
// maincontent
#import "slider-banner";
#import "membership-box";
}
But then I've got the exception :
Failed to execute goal com.liferay.maven.plugins:liferay-maven-plugin:6.2.10.13:build-css (default) on project wip-theme: null: MojoExecutionException: InvocationTargetException: (SyntaxError) #charset may only be used at the root of a document. -> [Help 1]
So just adding .aui { - AFTER - the #charset "UTF-8"; crashes the build.
I bet #charset is copied to all #import files and thus .aui { is containing a #charset... but I don't know if this is the problem, and how to avoid it.
Anyone knows a workaround ? Thanks
I ended up removing the #charset from my scss files and setting directly the file encoding through my IDE.
So far so good.
Btw it seems it is a maven problem (configuration or so) as doing the same with grunt (grunt build) won't cause any problems.
Anyway working under maven if I remove the #charset. Not the best, but until finding better...
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
For example:
app.scss
#import url('orange.css');
#import 'navel.scss';
orange.css
.orange {
color: orange;
}
navel.scss
.navel {
#extend .orange;
}
In SASS if you add
#import "test.css";
or
#import url("test.css");
it is compiled to pure css #import directive. Because the file has a .css extension, the SASS preprocessor thinks that this is pure CSS and the code inside is not involved in the SASS language operations. In your example, if you try to extend .orange you will get:
The selector ".orange" was not found.
Shortly: the extending is possible only if you use SASS files.
#extend is not possible by importing a CSS file. You have to
convert your css into an SCSS partial (or file)
#import this partial
#extend CSS classes
The downside to this is you would be left with duplication. Supposed this import is a 7000 line long CSS file (like bootstrap), then you are going to be in trouble