# SCSS to CSS conversion from existing template

**URL:** <https://talk.jekyllrb.com/t/scss-to-css-conversion-from-existing-template/5955>\
**Category:** Help\
**Created:** [April 27, 2021, 9:53pm UTC](https://talk.jekyllrb.com/t/scss-to-css-conversion-from-existing-template/5955 "2021-04-27T21:53:50Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![elmussol](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/elmussol/32/3497_2.png) [@elmussol](https://talk.jekyllrb.com/u/elmussol)\
**Post date:** [April 27, 2021, 9:53pm UTC](https://talk.jekyllrb.com/t/scss-to-css-conversion-from-existing-template/5955/1 "2021-04-27T21:53:50Z")

</div>

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

I chose [SinglePaged](https://github.com/t413/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:

```auto
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:

```auto
/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:

```auto
/* ----- 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](https://git.feneas.org/elmussol/topcat-radio/-/tree/topcatradio.eu) on Feneas GitLab.

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [April 27, 2021, 11:35pm UTC](https://talk.jekyllrb.com/t/scss-to-css-conversion-from-existing-template/5955/2 "2021-04-27T23:35:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![elmussol](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/elmussol/32/3497_2.png) [@elmussol](https://talk.jekyllrb.com/u/elmussol)\
**Post date:** [April 28, 2021, 12:06am UTC](https://talk.jekyllrb.com/t/scss-to-css-conversion-from-existing-template/5955/3 "2021-04-28T00:06:58Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![BillRaymond](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/billraymond/32/5963_2.png) [@BillRaymond](https://talk.jekyllrb.com/u/BillRaymond)\
**Post date:** [April 28, 2021, 2:06am UTC](https://talk.jekyllrb.com/t/scss-to-css-conversion-from-existing-template/5955/4 "2021-04-28T02:06:39Z")

</div>

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](https://sass-lang.com/documentation/variables)

---

<div class="post-metadata">

**Author:** ![elmussol](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/elmussol/32/3497_2.png) [@elmussol](https://talk.jekyllrb.com/u/elmussol)\
**Post date:** [April 28, 2021, 1:53pm UTC](https://talk.jekyllrb.com/t/scss-to-css-conversion-from-existing-template/5955/5 "2021-04-28T13:53:07Z")

</div>

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](https://talk.jekyllrb.com/t/install-a-specific-version-of-jekyll/700).

---

<div class="post-metadata">

**Author:** ![elmussol](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/elmussol/32/3497_2.png) [@elmussol](https://talk.jekyllrb.com/u/elmussol)\
**Post date:** [May 1, 2021, 11:47pm UTC](https://talk.jekyllrb.com/t/scss-to-css-conversion-from-existing-template/5955/6 "2021-05-01T23:47:34Z")

</div>

I am making progress on this. Close but no cigar at this point. I have made [branch for 3.9](https://git.feneas.org/elmussol/topcat-radio/-/tree/tcr-3). 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:

```auto
<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:

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

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [May 3, 2021, 7:46am UTC](https://talk.jekyllrb.com/t/scss-to-css-conversion-from-existing-template/5955/7 "2021-05-03T07:46:34Z")

</div>

I ran the site locally and found the issue.

There is a hacky part in your config.

```auto
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.

```auto
<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](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/4/4a35993e719b28d2f88aeff40f70b4daa4ff924b.png)

* * *

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](https://jekyllrb.com/docs/configuration/default/) as:

```auto
collections:
  posts:
    output : false

```

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

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.

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [May 3, 2021, 8:00am UTC](https://talk.jekyllrb.com/t/scss-to-css-conversion-from-existing-template/5955/8 "2021-05-03T08:00:21Z")

</div>

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`

```auto
.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

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

```

Rather

```auto
---
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](https://github.com/MichaelCurrin/jekyll-blog-demo/blob/v0.8.0/_config.yml).

* * *

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.

> **[MichaelCurrin/jekyll-blog-demo](https://github.com/MichaelCurrin/jekyll-blog-demo)**
>
> Base for a static website blog - built with Jekyll and the default theme

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [May 3, 2021, 8:11am UTC](https://talk.jekyllrb.com/t/scss-to-css-conversion-from-existing-template/5955/9 "2021-05-03T08:11:23Z")

</div>

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:

```auto
--- 
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.

```auto
</html>

{% include footer.md %}

```

---

<div class="post-metadata">

**Author:** ![elmussol](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/elmussol/32/3497_2.png) [@elmussol](https://talk.jekyllrb.com/u/elmussol)\
**Post date:** [May 3, 2021, 12:41pm UTC](https://talk.jekyllrb.com/t/scss-to-css-conversion-from-existing-template/5955/10 "2021-05-03T12:41:17Z")

</div>

@MichaelCurrin I owe you a 🍺 or ☕ . 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.

---

<div class="post-metadata">

**Author:** ![elmussol](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/elmussol/32/3497_2.png) [@elmussol](https://talk.jekyllrb.com/u/elmussol)\
**Post date:** [May 4, 2021, 1:25pm UTC](https://talk.jekyllrb.com/t/scss-to-css-conversion-from-existing-template/5955/11 "2021-05-04T13:25:00Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [May 4, 2021, 8:49pm UTC](https://talk.jekyllrb.com/t/scss-to-css-conversion-from-existing-template/5955/12 "2021-05-04T20:49:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![elmussol](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/elmussol/32/3497_2.png) [@elmussol](https://talk.jekyllrb.com/u/elmussol)\
**Post date:** [May 6, 2021, 10:57pm UTC](https://talk.jekyllrb.com/t/scss-to-css-conversion-from-existing-template/5955/13 "2021-05-06T22:57:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [May 7, 2021, 6:50am UTC](https://talk.jekyllrb.com/t/scss-to-css-conversion-from-existing-template/5955/14 "2021-05-07T06:50:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![elmussol](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/elmussol/32/3497_2.png) [@elmussol](https://talk.jekyllrb.com/u/elmussol)\
**Post date:** [May 19, 2021, 9:21pm UTC](https://talk.jekyllrb.com/t/scss-to-css-conversion-from-existing-template/5955/15 "2021-05-19T21:21:56Z")

</div>

@MichaelCurrin I have DMed you.