【问题标题】:Convert a single Scss file to CSS using compass-watch使用 compass-watch 将单个 Scss 文件转换为 CSS
【发布时间】:2021-09-25 02:28:01
【问题描述】:

我厌倦了手动将 Scss 模块一个一个转换为 CSS。我只想从许多模块转换我的个人 Scss 文件。我正在使用基于命令行的 compass watch 通过 ruby on rails 服务为 compass 编译 CSS。

在这里你可以看到我是如何通过 ror cli 管理 Scss 到 CSS 的转换。

【问题讨论】:

    标签: html css ruby-on-rails sass compass


    【解决方案1】:

    您可以创建一个 scss 或 sass 文件,您将在其中导入所有部分。

    示例:在您的 sass 目录中创建一个 sass 文件并根据需要命名,可能是 app.sass

    app.sass 中,像这样导入所有部分:@import 'partials/button-actions'

    在您启动观察者的目录中创建config.rb。我更喜欢使用项目根目录。

    config.rb 内插入:

    require 'compass/import-once/activate'
    # Require any additional compass plugins here.
    
    # Set this to the root of your project when deployed:
    # Change paths to yours. css_dir is css output directory, sass_dir is your sass file directory
    http_path = "/"
    css_dir = "css"
    sass_dir = "sass"
    images_dir = "i"
    javascripts_dir = "js"
    
    # You can select your preferred output style here (can be overridden via the command line):
    # output_style = :expanded or :nested or :compact or :compressed
    output_style = :compressed
    
    # To enable relative paths to assets via compass helper functions. Uncomment:
    # relative_assets = true
    
    # To disable debugging comments that display the original location of your selectors. Uncomment:
    # line_comments = false
    
    
    # If you prefer the indented syntax, you might want to regenerate this
    # project again passing --syntax sass, or you can uncomment this:
    preferred_syntax = :sass
    # and then run:
    # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
    

    并启动观察者。您将获得一个app.css 文件,其中包含导入文件中的所有代码作为结果。将其导入您的 HTML。

    【讨论】:

    • 我已经在使用这个方法了。我说我不想转换整个项目我只想转换项目中的任何单个文件
    • @Muzamil301 将部分文件从 _button-action.scss 重命名为 button-action.scss
    • 感谢兄弟它的工作,但忽略所有变量:-)
    • @Muzamil301 变量仅在开发中需要,因此您可以将它们导入到您需要的每个文件中。但是变量文件应该像_vars.scss,因为它不应该被编译成css。 (CSS3 不支持变量)
    猜你喜欢
    • 2020-03-12
    • 1970-01-01
    • 1970-01-01
    • 2017-04-19
    • 2015-07-13
    • 2018-12-02
    • 1970-01-01
    • 1970-01-01
    • 2017-01-19
    相关资源
    最近更新 更多