Gem bootstrape-sass 如何快速开发

bluesky0318 · 2019年07月05日 · 最后由 oatw 回复于 2019年07月08日 · 3337 次阅读

有几个问题想请教一下各位

  1. bootstrape -sass 这个 gem 跟 bootstrape 有啥关系呢?
  2. 之前都是一步步的按 bootstrape 文档说得布局,控件去填,开发速度很慢,然后看了一下几个 bootstrape ui 编辑器,例如 bootstrape magic 就想请教一下,各位大神是如何开发的呢?也是抄 UI 还是自己慢慢的写呢?

bootstrap4 的 gem 是 [https://github.com/twbs/bootstrap-rubygem], 2,3 的 gem 是 bootstrap-sass,但是原理上差不多。

  1. 看源码可以发现核心内容主要有两大部分构成。

对于 bootstrap 的 sass 文件还有 js 文件等其他静态文件,是通过 http 请求从官方 repo 上抓取到 gem 的 assets 目录里。

 # 部分源码

def initialize(repo: 'twbs/bootstrap', branch: 'master', save_to: {}, cache_path: 'tmp/converter-cache-bootstrap')
  @logger     = Logger.new
  @repo       = repo
  @branch     = branch || 'master'
  @branch_sha = get_branch_sha
  @cache_path = cache_path
  @repo_url   = "https://github.com/#@repo"
  @save_to    = {
      js:    'assets/javascripts/bootstrap',
      scss:  'assets/stylesheets/bootstrap',
      fonts: 'assets/fonts/bootstrap'}.merge(save_to)
end

  def get_file(url)
    uri = URI(url)
    cache_path = "./#@cache_path#{uri.path}#{uri.query.tr('?&=', '-') if uri.query}"
    FileUtils.mkdir_p File.dirname(cache_path)
    if File.exist?(cache_path)
      log_http_get_file url, true
      File.read(cache_path, mode: 'rb')
    else
      log_http_get_file url, false
      content = open(url).read
      File.open(cache_path, 'wb') { |f| f.write content }
      content
    end
  end

另外一部分其实最主要的就是bootstrap-sass.rb这个文件,里面定义了在不同环境下(Rails,Hanami, Sprokets,Sass)自动添加静态资源 load path 的方法。

 # 部分源码
if rails?
  register_rails_engine
elsif hanami?
  register_hanami
elsif sprockets?
  register_sprockets
elsif defined?(::Sass) && ::Sass.respond_to?(:load_paths)
  # The deprecated `sass` gem:
  ::Sass.load_paths << stylesheets_path
end

所以,第一个问题简单来说:bootstrap-sass = bootstrap 资源文件 + 自动添加资源 load path

2.umm..其实一步一步对着文档开发挺慢的,最好还是把文档好好熟悉一遍,常用的组件怎么组合标签,常用的 class 都是什么作用,这些要很熟悉,这样就可以自己按需使用了。至于可视化 UIi 编辑器生成的代码如果要修改,还是要熟悉 bootstrap 的,要不然也不知道咋改。图快的话还可以买theme...

oatw 回复

谢谢,那我懂了,我是说怎么 gem 里面又有 bootstrap-sass,还有 bootstrap-ruby 等,您这解释的很清楚了。另外多问一个问题,就是可视化 UIi 编辑器产生的 html,css 文件,html 可以直接放入 erb 文件下,css 文件我是直接放入 scss 文件么?还是将 scss 文件改为 css.scss 文件呢?然后 scss 文件和 css.scss 文件有啥区别啊,记得看过一篇文章说后者可以兼容 css 文件。

不客气。

如果大量依赖 UI 编辑器生成的 css,那可以武断点讲,已经失去了使用 bootstrap-sass 这类 gem 的意义了,个人认为之所以要用这类 gem,更多的就是要使用 sass 的特性。所以,如果用 UI 编辑器的话,建议只用在一些不会怎么变化,可复用的 partial 上。

关于后续的问题有点混乱(我的理解力不太行),我感觉不太好回答呀大兄弟!更多的还是你自己的思路,想用什么方式来组织前端的资源?更愿意写 scss 还是 sass 还是 css?这些得先考虑清楚。我的建议是:

scss 语法兼容 css 语法,而且很多资源管理工具会对文件后缀名进行解析并串联不同的 processor,但从资源管理的角度来看,大多数情况下理智的选择是什么类型的文件就用什么样的后缀,然后从引入方式上来区分,这样不至于以后维护的时候被自己绕晕。具体的可以复习一下 sass lang,Rails asset pipeline 或者 webpack 之类的文档,回忆起工作原理后就清晰了。

oatw 回复

谢谢您的耐心回答,我是一个人独立学习 rails 中,所以有些不知所以然,以前都是写.net wpf,设备通讯软件的,公司也是芯片设计厂商,所以不熟悉网络编程。一直都在看 rails 感觉不入门,所以过来打扰一下大佬门了

bluesky0318 回复

大兄弟别客气,每个人都有自己擅长和不擅长的领域,我也是个 Rails 小白人,Ruby China 的绝大多数前辈都很友好,祝你学的开心,找到乐趣。

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册