Gem bootstrape-sass 如何快速开发

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

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

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

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的绝大多数前辈都很友好,祝你学的开心,找到乐趣。

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