I'm using gulp-ruby-sass to compile my css and generate source maps for a site built on Jekyll. The source maps are being generated. When I inspect a style, a Sass partial is identified as the source of that style. But when I click on the filename, I'm taken to an empty window. I need my entire scss directory copied into the _site directory when the site is generated. But Jekyll ignores all files prefixed with an underscore, so all Sass partials are automatically excluded. I've tried adding, scss, scss/_sass_partial.scss, and scss/**/*.scss to the include property of Jekyll's _config.yml. This property is supposed to force inclusion of files that would otherwise be automatically excluded such as .htaccess. But this does not work for my Sass partials. Jekyll includes the partials only if the underscore is removed. Does anyone know a way of dealing with this?
This will work :
include:
- _sass_partial.scss
But you can also add a gulp task :
gulp.task('copy_sass', function(){
gulp.src('./sass/*.scss')
.pipe(gulp.dest('./_site/sass'))
});
Related
I'm trying to make my SCSS files more modular by splitting it into individual partial files. It's all well until suddenly I have a bunch of .css and .css.map files in my partials directory because I've, naturally, saved all of them, and the Sass watcher dutifully compiled all of them too.
How do I achieve a clean structure like Bootstrap's while not having to manually delete every partial .css files? Ideal scenario is that every time I edit and save the partial files, Sass watcher compiles only the main .scss file.
I'm using VS Code on Mac with a Sass watcher plugin. Is it achievable in this environment?
https://sass-lang.com/guide
A partial is simply a Sass file named with a leading underscore. You
might name it something like _partial.scss. The underscore lets Sass
know that the file is only a partial file and that it should not be
generated into a CSS file. Sass partials are used with the #import
directive. (#import is soon to be deprecated, with a move to #use and #forward instead. https://sass-lang.com/documentation/at-rules/import)
Thanks Arkellys.
Ideally you have a main .scss file, like style.scss for example, and then the other partials exist, like _header.scss for example.
Once you have a partial like that, it's prudent to import it in the main .scss file, at the top of the file. In this case, it would be #import 'header';
Notice that we do not import the underscore...
If you don't have any errors after this, and it's still not compiling then check whether you have properly referenced the compiled css in the head of your html.
Does SASS render to an actual css file of my choosing or a newly generated style sheet?
in the case of an app with many style sheets , the most sensible thing is replace some css at a time and render to a style sheet that loads last -that would override all other style sheets until the updating is done and I would remove css.
The typical Sass workflow is to compile to a main style.css file from a style.scss file where you specify which files it should compile. You can set it to compile to a different file. If you're using the command line you can tell it what to watch and where to output a la
sass --watch input.scss:output.css
sass --watch app/sass:public/stylesheets
http://sass-lang.com/documentation/file.SASS_REFERENCE.html
Most GUIs that handle Sass have simple settings that allow you to do the same for individual files.
It renders into an actual CSS file. All of the SASS is eventually compiled into vanilla CSS
I'm moving my workflow to use sourcemaps with Sass, and it was going well, but I'm having trouble with it overwriting my main.scss every time I make a change in Chrome Devtools.
My file structure is like this:
scss - main.scss
|- inc
|-_mixins.scss
|-_typo.scss
|- etc...
and main.scss contains multiple #import "inc/mixins"; lines, obviously each with different filenames.
I created a sourcemap, using sass --sourcemap scss/main.scss css/main.css and then started watching the files using sass --sourcemap --watch scss:css, (all found in this tut).
I've also mapped working files in Chrome Devtools.
It works initially, in that if I examine the elements in DevTools, I see the code in SCSS. If I edit a value, it overwrites my scss/main.scss with the contents of css/main.css, which is massively weird.
Anyone shed any light on this?
So, I figured it out.
I followed the tut to get this working, but had mapped the local files incorrectly.
If you are manually setting up SASS sourcemapping, you must be careful to map included files to the correct locations. Somehow I had one mapped to main.scss, and so it was overwriting it on changes.
I am using sass with prepros compiler and sublime editor. I need to have each scss file complied with the same file name.
For example:
I currently have-
header.scss
content-top.scss
footer.scss
and they are all compiles into style.css to create one full style sheet.
I wish to have a style folder with
header.css
content-top.css
footer.css
which will be done automatically when saving and compiling like I normally do.
How can I accomplish this?
Thank you
Check this link out.
It states that you can adjust your project structure (in your case CSS folders) in project settings.
If I remember correctly you may have to buy it so that you can compile more than 4 or 5 Sass files, but I may be wrong.
Also check that you aren't "only" importing sass partials because of this:
Any Sass and Scss file (i.e. including partials) imported by another
file are not shown in the files list but they are still watched by Prepros.
The parent file is re-compiled whenever any of the imported files are changed.
I have a very basic rails application in which I've added compass and zurb foundation to. I've noticed an issue that now when I save changes to any stylesheet, which I'm using scss for, I also have an additional css file with the same name but .css instead of .scss added to the stylesheets directory. This causes a problem because my layout templates then try to use the application.css file instead of the application.scss file.
Has anyone had this happen and how can I get it to stop adding .css files to my stylesheets directory?
In my foundation_and_overrides.scss file the content is the standard zurb foundation content.
However, in the foundation_and_overrides.css file the contents are:
https://gist.github.com/iambca/5084463
Found the issue here: Auto compile SCSS files in Sublime Text 2
I still don't have a solution but this is the issue. Sublime Text 3 is coming so perhaps this will be resolved in the new release.