SCSS to CSS conversion from existing template

Help
1

Greetings. First post in this place and am making progress on building my first site.

I chose SinglePaged as a template as it ticks all the boxes in what I’m looking for. Looking at the commit history development, stopped at v3.x. I have rearranged files using the things I learned in the Step By Step guide. So I have:

assets/css/styles.scss
_sass/base.css
_sass/main.css
_sass/skeleton.css

My styles.scss has the correct @import "foo"; statements. The three css files are as git pulled.

When I run bundle exec jekyll serve it chokes with the following error:

/home/pault/gems/gems/jekyll-sass-converter-2.1.0/lib/jekyll/converters/scss.rb:190:in `rescue in convert': Error: Invalid CSS after "...ig.yml)----- */": expected 1 selector or at-rule, was "{% for c in site.co" (Jekyll::Converters::Scss::SyntaxError)
        on line 8:57 of _sass/main.css

Line 8 of the relevant file and its proceeding comment:

/* ----- colors (autogenerated from _config.yml)----- */
{% for c in site.colors %}

There are colour definitions in _config.yml.

I suspect the for statement needs writing in a different way but am unsure how to do so. Guidance would be appreciated. I am also in the Matrix/Gitter room with the same username.

edit If anyone want to poke further, the git repo for this project is Topcat Radio on Feneas GitLab.

2

You can’t have liquid code (for loop) in the files in the _sass directory as jekyll does not process them - it only runs them thru the sass/css stuff. So to do that part you need to be outside the _sass folder and have front matter to tell jekyll to process it.

I think I have also had trouble with comments causing errors.

I would try removing all the liquid stuff and any variables it is setting and get it to work, then try and add the stuff you need back into the styles.scss file at the top, then import the rest below that.

1 Like
3

Thanks @rdyar . Uff, seems a bit of work, but no matter. Has this changed for 4.x as the git commits explicitly talk about making it 3.x compliant?

Perhaps I should just use the straight css files as a stopgap while I sort the sass stuff out. Thanks for the pointers.

4

From what you are saying, I think you created a bunch of style variables in your config file. Is that correct?

The proper (SCSS/SASS-EY) way to do this is to use sass variables. Check out this site page for some examples: SASS variables

2 Likes
5

Thank you @BillRaymond. I didn’t actually create anything – I forked an existing template. I will work my way through the site you mentioned.

I think I have a plan of action though. From the git commits, it seems that this template worked in 3.x, so I can create a dev branch while I work through making it work in 4.x and do a separate 3.latest install while I work on the content. I will ask how to do this in a separate thread.

edit Add: and of course the separate thread already exists: Install a specific version of jekyll.

1 Like
6

I am making progress on this. Close but no cigar at this point. I have made branch for 3.9. I have created two files in _posts.

When I run bundle exec jekyll serve I see an unstyled version of the top post, not index.html as I expect. I think there is something wrong in the following section of index.html, but can’t for the life of me work out what it is:

<nav><ul>
      {% for node in site.posts reversed %}
        {% capture id %}{{ node.id | remove:'/' | downcase }}{% endcapture %}
        <li class="p-{{id}}"><a href="#{{id}}">{{node.title}}</a></li>
      {% endfor %}
    </ul></nav>


    {% for page in site.posts reversed %}
      {% capture id %}{{ page.id | remove:'/' | downcase }}{% endcapture %}
      <div id="{{id}}" class="section p-{{id}}">
        {% if page.icon %}
        <div class="subtlecircle sectiondivider imaged">
          <img src="{{page.icon}}" alt="section icon" />
          <h5 class="icon-title">{{ page.title }}</h5>
        </div>
        {% elsif page.fa-icon %}
        <div class="subtlecircle sectiondivider faicon">
          <span class="fa-stack">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-{{ page.fa-icon }} fa-stack-1x"></i>
          </span>
          <h5 class="icon-title">{{ page.title }}</h5>
        </div>
        {% endif %}
        <div class="container {{ page.style }}">
          {{ page.content }}
        </div>
      </div>
    {% endfor %}

addition: The only error I get on bundle exec jekyll serve is:

/home/pault/gems/gems/pathutil-0.16.2/lib/pathutil.rb:502: warning: Using the last argument as keyword parameters is deprecated```
7

I ran the site locally and found the issue.

There is a hacky part in your config.

permalink: / ## disables post output

This means that all HTML pages becomes the exact /index.html path. If a post is processed after your index.md then the post will override index.html.

In _site directory I see that is that the output file is only these lines.

<h1>home</h1>

<h2>Powered By Passion</h2>

<p>What makes us different? A desire to produce an entertaining, unique music platform for independent artists, while delivering a personal approach to programming.</p>

So definitely change the permalink field - I’d say delete it from the config.

Result:

Screen Shot 2021-05-03 at 9.47.27 am
Screen Shot 2021-05-03 at 9.47.27 am2488×1594 212 KB

If you do not want to output posts as pages, there are more appropriate ways to do that.

The simplest is to override the defaults as:

collections:
  posts:
    output          : false

That didn’t work for me - the pages still got rendered :frowning:

You can also consider moving your content to a collection not bound by the date restrictions posts.

Or move to a single data YAML file (not separate files) like _data/content.yml which you can iterate over.

8

I know you said you used an existing site, but anyway there are a couple of things that can be improved on in your site to match the Jekyll conventions.

Setup your project to work with Bundler (I did, because I don’t want to install your gems globally for my user).

.gitignore

.jekyll-cache/
.sass-cache/
.jekyll-metadata

.bundle/
vendor/

_site/

This line serves no purpose in Gemfile
git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

Don’t indent your post YAML

---
  title: "home"
  bg: white     #defined in _config.yml, can use html color like '#010101'
  color: black  #text color
  style: center
---

Rather

---
title: "home"
bg: white     #defined in _config.yml, can use html color like '#010101'
color: black  #text color
style: center
---

For excludes.

  • You probably want to keep CNAME in production.
  • There is no point in excluding README.md because index.html or index.md will take preference.
  • There is no point in excluding .gitignore because all dirs and files starting with dot or underscore will be excluded already.

Also, by overriding the field with 3 values, you also have also lost the original setup, such as to ignore vendor for Bundle gems.

So take out excludes from your config.

If you use it, make sure to put everything from the default setup in excludes before adding your own fields.

Here is mine.

You don’t need to start your config with triple dash and don’t need to set what is already default like port of 4000, or markdown as kramdown.

Don’t put page in your for loop in index.html. It overrides the existing page variable and prevents you from accessing page.title etc. on the index.html page.

You can use my demo site based on the jekyll new command to see Gemfile etc. that is set up for Jekyll 3.9 and GH Pages use.

9

If you can avoid using markdownify on your footer if you change things up.

Put your DOCTYPE and html and head in a layout.

Convert index.html to index.html

Then do:

--- 
layout: default
---

## My content

My for loop

My footer

{% include footer.md %}

Then your index.md page can still have HTML in it if you want, but you can use markdown in places. And your index.md will be easier to deal with as it won’t have stuff outside of body distracting you.

Without doing a restructure, as a test i was able to get your footer markdown to render as markdown by moving it outside an element at the end of the page and using index.md. Just to show it works.

</html>

{% include footer.md %}
10

@MichaelCurrin I owe you a :beer: or :coffee: . This and the posts following are exactly the kind of help I needed to get into the Jekyll way of thinking. I will move through these and report back… Many many thanks.

1 Like
11

@MichaelCurrin wrote:

Don’t page in your for loop in index.html . It overrides the existing page variable and prevents you from accessing page.title etc. on the index.html page.

This would explain why the colour info is not being picked up for the various posts, right? I take onboard the need for restructuring the index.html and plan to do this when I refactor to make ready for v4.x. However I need a quick fix for making it work in 3.9 for now.

1 Like
12

I don’t know what the color issue is but home the suggestions fix that too.

I’m glad those are helpful. Send me direct message on the forum or tag me in a new forum post if you need help with your next round of refactors and bugs.

13

This is a generous offer which I will take you up on. Are you also on the Gitter/Matrix channel?

14

Okay great. Yeah I’m happy to help.

No I’m not on those. I’m on this forum daily and a couple of other blogs and social media. But I’m cautious of joining more things and getting overwhelmed by options and feeds.

15

@MichaelCurrin I have DMed you.

1 Like