The Jekyll documentation says:
create a file with the proper extension name (one of .sass, .scss, or .coffee) and start the file with two lines of triple dashes, like this:
---
---
// start content
.my-definition
font-size: 1.2em
Jekyll asset documentation
But... why? I don't see any explanation anywhere of why Jekyll requires this. I'm worried that this will make it improper Sass/SCSS and I won't so easily be able to migrate my stuff out of Jekyll if I need to.
Additionally, I see many examples of people using Sass on GitHub's Jekyll without this practice.
For instance:
NSHipster.com (example from screen.sass)
#import './bourbon/bourbon'
#import './neat/neat'
#import './base/base'
If you dig a little further in the documentation you can find why front matter ?
And it's only necessary for your entry scss/sass file.
Related
I want to start using #use instead of #import, since #import is going to be depreciated. I have a partial:
// _test.scss
$color1: #ee00ee;
referenced by:
// demo.scss
#use test;
html {
color: $color1;
}
If I comment out the html: $color1 line, I get no error. If I delete _test.scss I get a file not found error, so it seems the file is included.
But when everything is in place, I'm getting an undefined variable error. If I replace #use with #import, I get no error and the generated css has the expected color.
I'm on a Mac (big sur), using dart sass:
% dart --version
Dart SDK version: 2.9.3 (stable) (Tue Sep 8 11:21:00 2020 +0200) on "macos_x64"
The docs I've seen say that #use will replace #import, so I thought just changing to #use would be easy. Is there a step I'm missing?
It's a bit late, but as I understand it, #use treats the partial as modules, which more closely resembles the way JavaScript treats ES modules: In particular, the #use statement makes available a namespaced bit of external code, which changes the way you reference imported variables (and mixins and functions as well):
// demo.scss
#use test;
html {
color: test.$color1;
}
Some documentation is found in the article about #use on the SASS docs, and this article explains dart-sass' namespacing in some detail.
It's great that ParcelJS just handles sass out of the box but I'm running into a problem where it keeps throwing an exception when it encounters a url within in my scss file. I guess Parcel is trying to locate the resource and rewrite the url. I do not want Parcel to do this. Is there anyway to disable this? I just want it to compile the sass and leave any urls in there alone.
This question was posted when Parcel v1 was the latest version. For folks arriving here in the future, you can accomplish this in Parcel v2 with the parcel-resolver-ignore plugin. Here's how:
Install it (e.g. yarn add -D parcel-resolver-ignore)
Create or modify your .parcelrc file to add it to the parcel pipeline:
{
"extends": "#parcel/config-default",
"resolvers": ["parcel-resolver-ignore", "..."]
}
Add a "parcelIgnore" entry to package.json that contains regex patterns that define which resources to ignore, e.g.:
{
// An array of Regex patterns
"parcelIgnore": [
"images\/*.*",
]
}
The things you want to target your regexes to match are the urls referenced in the .scss files, not the .scss files themselves.
I just can't get it work. I have a .scss file with some basic CSS.
Now, I have installed Ruby and I installed SASS like so - gem install sass.
What do I do to get it work on sublime?
I installed "SASS" so sublime acknowledge the .SCSS extension. I also installed SASS builder, and it actually works but in an strange way.
In addition to the compiled css file, it also adds .map file and a folder name .sass-cache.
Why Is that? How to I get rid of that? I don't need a .map file.
I also get an alert every single time the build is done. ("style.css has been compiled")
And not only that but I also get this comment at the end of my compiled CSS file:
/*# sourceMappingURL=style.css.map */
Please help, I'm lost.
Thanks in advance.
The .map file is for chrome (and maybe other browsers) to MAP your CSS that is rendered in the browser back to your actual SCSS. This is very very useful when debugging.
The scss-cache is just what it says it is a cache file that Sass uses. You can delete it but it will keep coming back every time you compile.
Once you go to production you can set Sass to not add any comments to your final css output file. You do this through a config.rb file if you are using compass.
Search on YouTube for LevelUp Tuts and Sass Compass install. Scott expanse how to get stared very well.
--sourcemap=none will disable the comment as well as the .map file creation. not so hard guys.
also, --no-cache will prevent creating the .sass-cache folder and its content.
Thanks anyway.
Try using SassBuilder for ST2. And you can config not to include comments, cache,etc with True/False.
{
"output_path": "../css",
"options": {
"cache": true,
"debug": false,
"line-comments": true,
"line-numbers": true,
"style": "nested"
}
}
For further info, click here.
Newcomer to Jekyll here (previously on Hyde).
Ruby files placed in the _plugins/ directory are apparently silently ignored.
I am using version 0.11.2 of Jekyll, with ruby 1.8.7 on Ubuntu 12.04.
Should an extra config parameter be added to load these plugins? The doc doesn't say so - the sane default should be to look into _plugins, and they should be required automatically. How can one debug the loading of Jekyll plugins?
For my instance of jekyll (also 0.11.2, but with ruby 1.9.2p290 on a Mac), I don't have to add any extra configuration, but you can try adding the following line to your top level "_config.yml" file.
plugins: _plugins
or, possibly,
plugins: ./_plugins
The simplest way to test that your plugins are working is to remove all of them except for one that you know will work. I've put together the following which works as expected on my install.
Create a new file in the root of your jekyll source directory called "plugin_test.md" with the following contents:
---
layout: default
title: Plugin Test
---
the quick brown fox jumps over the lazy dog.
Testing plugin output of '_plugins/testplugin.rb': {% testplugin %}
Note that you may need to change "layout: default" to whatever you are actually using.
Create a new file at "_plugins/testplugin.rb" with the following contents:
module Jekyll
class TestPlugin < Liquid::Tag
def render(context)
"It's Working!"
end
end
end
Liquid::Template.register_tag('testplugin', Jekyll::TestPlugin)
Run jekyll on your source dir.
All that testplugin.rb does is replace instances of the liquid tag {% testplugin %} with the text "It's Working!". If your plugins are triggering, you'll see the output
Testing plugin output of '_plugins/testplugin.rb': It's Working!"
on the page "plugin_test.html" at your output site root. If you see:
Testing plugin output of '_plugins/testplugin.rb':
that means that the plugin didn't trigger. If you run into that, I think it's a sign that something is pretty out of whack and would advise reinstalling jekyll.
I know I'm little bit late but for others who still come across this question I would like to add my resolution:
Restart the server to get the newly added plugin working. So stop jekyll serve (Ctrl C) and restart it again with jekyll serve.
I can't get the Rails 3.1 asset pipeline precompilation to work in production mode. It always fails on images referenced within SCSS with an error like:
$ bundle exec rake assets:precompile RAILS_ENV=production
rake aborted!
rails.png isn't precompiled
(in /home/florian/AssetTest/app/assets/stylesheets/application.css.scss)
But when I look in the public/assets directory, the image is there, so it is precompiled:
$ ls public/assets | grep rails
rails-dd352fc2630e5f9aa5685ef1d7fe5997.png
The SCSS file in this case just contains some test code:
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require_tree .
*/
body {
background: #ffffff image-url('rails.png') no-repeat 0 center;
}
If I don't use the image-url helper in SCSS, but just url('/assets/rails.png'), precompilation works fine, and a manifest.yml file is generated in public/assets.
The interesting thing is: if I change the SCSS back to image-url('rails.png') and run another precompilation, it still works (I guess because the image is now already listed in the manifest file).
What am I doing wrong here? I don't really want to disregard the helper methods (as using them is The Way You Should Do It, right?), and I definitely don't want to create the manifest file manually...
I've run into the same problem myself. This is apparently a bug in Rails 3.1.0, and will hopefully be fixed in short order...
In any event, in production.rb, you can try this:
config.assets.compile = true
You likely have it set to false, which it should be. However, having it set to false causes issues when you use asset helpers in SCSS as you're trying to do. Setting that value to true seems to properly allow compilation while using those helpers.
Take a look at this issue on github for some details.