将 LESS 转换为 CSS 并与 Jekyll 一起使用

Question

在之前的 post () 中，我确实询问过一个时间线，当我在我的 Jekyll 网站上使用它时，它失去了它的风格。

我确实尝试过给我们一个 iframe 但这不是一个好的移动解决方案。

我的时间表基于这个项目：https://github.com/ybogdanov/history-timeline。该时间线使用 LESS 提供样式。

问题是 Jekyll 使用 SASS 而不是 CSS。

这是我修改后的 less 样式，可与 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;
  }
}

我使用了 LESS 到 CSS 转换器，我得到了这个：

#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;
}

但是当我使用 div.

插入时间轴时，有些行会给我一个关于 "unknown property" 的警告并且样式丢失

我能做什么？我只是想知道有一个可读的文本。

带 iframe 的时间轴：

时间表 div:

Answer 1

original file 仅使用 LESS 进行一些缩进，应该与 Sass 一起使用，只需重命名文件并将其放入 _sass 文件夹，以便 Jekyll 可以构建它。

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

创建 css/main.scss 文件：

---
---

@import "timeline";

在您的布局或包含文件中，您应该 link 到生成的 main.css 文件：

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

将 LESS 转换为 CSS 并与 Jekyll 一起使用

Convert LESS to CSS and use it with Jekyll

css

sass

less

jekyll