Sass @import giving unexpected results in style.css

[prodport]

I’m learning Sass on Windows with a local site on my PC. I’m trying to convert my WordPress theme’s CSS. I created a folder under my theme called “sass”. In it, I have my partials like _reset.css

My Windows command prompt reads:
C:\Users\Anne\Documents\Websites\www.test.dev\wp-content\themes\enterprise-pro>

I’ve entered the following watch command
sass --watch style.scss:style.css

Before trying to add the partials, the watch and compile produced the correct changes in my style.css.

However, if I add these @import lines after the WordPress theme info block to my style.scss file I see:

@import "/sass/reset.css";

// Variables and Placeholders
$safari-color1:	 #f2b538;
$safari-color2:  #A69D57;
$safari-color3:  #322215;
$basefont:	'ITC Berkeley Old Style W01', sans-serif;
$background:     #fef8ec;

@import "/sass/setup.css";

/* Defaults */

My output in style.css comes out as:

@import url(/sass/reset.css);
@import url(/sass/setup.css);
/* Defaults */

The contents for each of the import files shows as @import URL and the section where I defined my variables and placeholders is missing.

I did install Ruby with the path option. In Windows, I can see a path variable:
C:\Ruby22-x64\bin;C:\Users\Anne\AppData\Roaming\npm

Initially, when I did the @import, I didn’t use a file extension. However, it seems the only way I get Sass to compile is to use the .css extension. If I leave blank or use .scss, I get an error saying file can’t be found or is unreadable.

I tried removing the variable section but that didn’t help either.

I’ve also tried putting all the files in the same folder. In fact, I could put in a bogus file name and so long as I have it as a .css file, I don’t get any errors. But, I’ll see that bogus file in my style.css file.

And when I do save my style.scss file, I can see that changes were detected and I have:
write style.css
write style.css.map

What am I missing?

[computerbarry]

I sometimes us Scout as my compiler, though not so much nowadays once I started using Gulp task runner. You can download Scout which also works for windows - Scout SASS

All my sass files go inside:

/sass
main.scss
_variables.scss
_header.scss
…

All you need to watch is main.scss which includes all the partials and updates accordingly:

main.scss
@import ‘variables’;
@import ‘header’;
@import ‘base’;
@import ‘fonts’;
…
html {padding:0;}
body {background-color: $color-bg}

And have scout running in the background, everything seems to work for me. Sorry don’t use wordpress.

Hope this helps.

And remember that the ordering of your partials can sometimes affect what variables are available to other partials.

Update
I’ve also just realised that you are importing css files, you should be importing partials like I have above without the file extension.

Barry

[prodport]

Thanks Barry.

I’ll check out Scout. I was able to get it to work by renaming the extensions back to .scss and moving them up a folder level. Right now, all the files are in the theme’s folder. I’ll see if I can work out the /sass folder issue later

[computerbarry]

Cool, use what you’re comfortable with, everybody has their own personal preference, though Scout is a good candidate if you don’t like using the terminal.

My folder structure includes .scss in one folder and compiled .css files in another as below:

/sass
/css

You can set theses very easily within Scout.
I usually have one main.css file which is compressed and compiled from all the scss files.

Barry