百科.dev
全部条目AI 编程趋势榜开源项目技术资讯提交条目
登录
< 返回工具列表
B

bootswatch-rails

> 编程语言
开源

将 Bootswatch 样式转换为 SCSS 格式,可在 Rails 资源管道中使用。

480 stars0 点赞2 次浏览
访问官网GitHub

工具介绍

将 Bootswatch 样式转换为 SCSS 格式,可在 Rails 资源管道中使用。

Looking for contributors

If you'd like to try your hand at maintaining this project, I'm happy to give you commit access.

bootswatch-rails

This gem is meant to be used with bootstrap-sass. It gives you complete scss versions of bootswatches for use in your Rails asset pipeline, just like bootstrap-sass gives you scss version of bootstrap itself.

Installation

Add this line to your application's Gemfile, in assets group:

gem 'bootswatch-rails'

And then execute:

$ bundle

Usage

When using bootstrap-sass, it's recommended to avoid sprockets in your stylesheets. In order to do that you simply rename your application.css file to application.css.scss, remove all sprockets comments, and instead use sass @import commands. These commands are smart enough to fully support asset pipeline load paths, thanks to sass-rails gem.

Here's approximately how your application.css.scss file should look like, considering that you're using bootstrap-sass.

// Example using 'Cerulean' bootswatch

//Import bootstrap-sprockets
@import "bootstrap-sprockets";

// Import cerulean variables
@import "bootswatch/cerulean/variables";

// Then bootstrap itself
@import "bootstrap";

// Bootstrap body padding for fixed navbar
body { padding-top: 60px; }

// And finally bootswatch style itself
@import "bootswatch/cerulean/bootswatch";

// Whatever application styles you have go last
@import "base";

Overriding bootswatch variables

Since version 3.1 it's possible to override variables.

// First set or import your overrides
$textColor: #000;

// Then load variables
@import "bootswatch/journal/variables";

// Then the rest as shown above...

Bootswatches

Included bootswatches

  • Amelia
  • Cerulean
  • Cosmo
  • Cyborg
  • Darkly
  • Flatly
  • Journal
  • Lumen
  • Paper
  • Readable
  • Sandstone
  • Simplex
  • Slate
  • Spacelab
  • Superhero
  • United
  • Yeti

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Added some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Please see CONTRIBUTING for more detail. (Dont change the scss files by hand, use the converter and rearranger first, and make your changes in those if possible)

Note about converter

I am trying to automate this project as much as possible, so I wrote a script that does most of the work converting less to scss. If you want to contribute a fix that's easily automatable and you know ruby, please add a processor to the converter.

Credits

Big thanks to these guys.

  • Thomas Park for bootswatch
  • Thomas McDonald for bootstrap-sass

Issues· 7 开放

查看全部 Issues在 GitHub 打开

暂无开放 Issues,或尚未同步最近议题。

> 标签

Rubybootstrap-sassbootswatchtemplates

暂无评论,来聊聊你的看法吧

> 工具信息

发布日期2026年8月1日
最后更新2026年9月17日
分类编程语言
定价开源

> 相关工具

T
TypeScript
JavaScript 的超集,为前端与全栈提供静态类型
P
Python
通用编程语言,广泛用于 Web、数据与 AI
G
Go
Google 推出的简洁高效系统语言