使 SASS 的速度与 Sinatra 中的 CSS 一样快

Question

你好，我们先看一下代码。

我在 Sinatra 中使用 slim 作为视图模板。

Snippet 1 ：模板文件，index.slim

doctype html
html
    head
        title = @title
        link rel='stylesheet' type='text/css' href='css/origin.css'
        link rel='stylesheet' type='text/css' href='css/sass.css'
    body
        div This is a test for SASS

Snippet 2 ：控制文件，route.rb，它是 sinatra 应用程序文件

require "sass"

configure do
    set :sass, :cache => true, :cache_location => './tmp/sass-cache', :style => :compressed
end

get '/' do
    @title = 'default page'
    slim :index
end

get '/css/sass.css' do
    sass :index
end

Snippet 3 ： 我的视图文件夹中的样式文件

index.sass是

div
    color: white
    background: green

/public/css/orgin.css中的模板路径origin.css，它是默认样式路径

div {padding: 10px;margin: 10px;}

Snippet 4： 这是服务器的日志，显示了原始css文件和sass文件的速度

[coolesting@localhost ds]$ rackup 
[2011-11-23 00:02:36] INFO  WEBrick 1.3.1
[2011-11-23 00:02:36] INFO  ruby 1.9.2 (2011-07-09) [i686-linux]
[2011-11-23 00:02:36] INFO  WEBrick::HTTPServer#start: pid=5285 port=9292
127.0.0.1 - - [23/Nov/2011 00:02:38] "GET / HTTP/1.1" 200 283 0.0261
127.0.0.1 - - [23/Nov/2011 00:02:38] "GET /css/origin.css HTTP/1.1" 304 - 0.0005
127.0.0.1 - - [23/Nov/2011 00:02:38] "GET /css/sass.css HTTP/1.1" 200 64 0.0060
127.0.0.1 - - [23/Nov/2011 00:02:38] "GET / HTTP/1.1" 200 283 0.0029
127.0.0.1 - - [23/Nov/2011 00:02:38] "GET /css/origin.css HTTP/1.1" 304 - 0.0005
127.0.0.1 - - [23/Nov/2011 00:02:38] "GET /css/sass.css HTTP/1.1" 200 64 0.0029
127.0.0.1 - - [23/Nov/2011 00:02:38] "GET / HTTP/1.1" 200 283 0.0190
127.0.0.1 - - [23/Nov/2011 00:02:38] "GET /css/origin.css HTTP/1.1" 304 - 0.0005
127.0.0.1 - - [23/Nov/2011 00:02:38] "GET /css/sass.css HTTP/1.1" 200 64 0.0043
127.0.0.1 - - [23/Nov/2011 00:02:38] "GET / HTTP/1.1" 200 283 0.0029
127.0.0.1 - - [23/Nov/2011 00:02:38] "GET /css/origin.css HTTP/1.1" 304 - 0.0005
127.0.0.1 - - [23/Nov/2011 00:02:38] "GET /css/sass.css HTTP/1.1" 200 64 0.0012
127.0.0.1 - - [23/Nov/2011 00:02:39] "GET / HTTP/1.1" 200 283 0.0056
127.0.0.1 - - [23/Nov/2011 00:02:39] "GET /css/sass.css HTTP/1.1" 200 64 0.0016
127.0.0.1 - - [23/Nov/2011 00:02:39] "GET /css/origin.css HTTP/1.1" 304 - 0.0187
127.0.0.1 - - [23/Nov/2011 00:02:39] "GET / HTTP/1.1" 200 283 0.0028
127.0.0.1 - - [23/Nov/2011 00:02:39] "GET /css/origin.css HTTP/1.1" 304 - 0.0005
127.0.0.1 - - [23/Nov/2011 00:02:39] "GET /css/sass.css HTTP/1.1" 200 64 0.0011

那么，如何使sass文件运行得与原始css文件一样快，我启用了缓存，但它比原始css慢。

或者什么解决方案让Web服务器直接读取从sass文件渲染的css文件。

Answer 1

<代码>：缓存=> true, :cache_location => '...' 用于配置内部 SASS 缓存（它创建 .sassc 文件以节省编译为 css 的时间）。因此，此缓存不会阻止您的 Sinatra 应用程序在每次浏览器请求 /css/sass.css 时运行 SASS。

你真正想要的是SASS将css（从index.sass编译）渲染到文件public/css/sass.css。然后它会被静态加载机制拾取，就像 public/css/original.css 文件一样。要实现此目的，请查看

http://sass-lang.com /docs/yardoc/file.SASS_REFERENCE.html#options

特别针对选项 :template_location 和 :css_location

Answer 2

您始终可以从 scss 手动创建 css 文件并将它们放入您的公共目录中。否则 sass 缓存已经相当快了。