CODEWITHSUNDEEP
csssasslessjekyll
pachadotdev
pachadotdev

Reputation: 3765

Convert LESS to CSS and use it with Jekyll

In a previous post (How do I reset all css styles for a certain div? (Jekyll blog)) I did ask about a timeline that losses its style when I use it with my Jekyll site.

I did try to us an iframe but that is not a good solution for mobile.

My timeline is based on this project: https://github.com/ybogdanov/history-timeline. That timeline uses LESS to provide styles.

The problem is that Jekyll uses SASS instead of CSS.

This is my modified less style that works perfect with an iframe:

#content {
  flex: 1;
  overflow: scroll;
  position: relative;
}

#ruler {
  top: 0px;
  height: 30px;
  padding-top: 5px;
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transition: top 0.1s linear;
}

#chart {
  margin-top: 35px;
}

svg {
  .axis path,
  .axis line {
      fill: none;
      stroke: black;
      shape-rendering: crispEdges;
  }

  .axis text {
      font-family: sans-serif;
      font-size: 18px;
  }
}

I used a LESS to CSS converter and I get this:

#content {
  flex: 1;
  overflow: scroll;
  position: relative;
}
#ruler {
  top: 0px;
  height: 30px;
  padding-top: 5px;
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transition: top 0.1s linear;
}
#chart {
  margin-top: 35px;
}
svg .axis path,
svg .axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}
svg .axis text {
  font-family: sans-serif;
  font-size: 18px;
}

But some lines give me a warning about "unknown property" and the styles are missing when I insert the timeline using a div.

What can I do? I only wonder about having a readable text.

Timeline with iframe:

enter image description here

Timeline with div:

enter image description here

Upvotes: 0

Views: 577

Answers (1)

DirtyF
DirtyF

Reputation: 681

The original file only use LESS for some indentation and should work with Sass, just rename the file and put it in the _sass folder, so that Jekyll can build it.

mv styles.less timeline.scss && mv timeline.scss _sass

Create a css/main.scss file with:

---
---

@import "timeline";

In your layout or your include file, you should link to the the generated main.css file:

<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">

Upvotes: 1

Related Questions