Gem bootstrape-sass 如何快速开发

bluesky0318 · July 05, 2019 · Last by Yukiolsa replied at January 25, 2024 · 6447 hits

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

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

Reply to 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 之类的文档,回忆起工作原理后就清晰了。

Reply to oatw

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

Reply to bluesky0318

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

谢谢您的我是一个,所以有些知所以然,basket random

You need to Sign in before reply, if you don't have an account, please Sign up first.