Help us understand the problem. What is going on with this article?

compassで独自フレームワークを登録する

More than 5 years have passed since last update.

フレームワーク的なものをcompassに登録するときのメモ。

ディレクトリ構成の例

scss/
    |_ extensions/
              |_ cs-framework/
                          |_ lib/
                          |      |_ cs-framework.rb
                          |_ stylesheets/
                                 |_ _cs-framework.scss
                                 |_ _some-mixin.scss
                                 |_ _some-function.scss

config.rbからフレームワークのメインのファイルを呼ぶ。

config.rb
extensions_dir = "./scss/extensions"
require "#{extensions_dir}/cs-framework/lib/cs-framework.rb"

メインのファイル内でCompass::Frameworks.registerを使って登録する。
下の場合、ひとつ上の階層がルートディレクトリになる。

cs-framework.rb
require 'compass'

#! cs-framework - v0.0.1
# http://cs-script.com/
# Copyright (c) mamoida 2013 ; MIT Licensed

extension_dir = File.expand_path(File.join(File.dirname(__FILE__), ".."))
Compass::Frameworks.register('cs-framework', :path => extension_dir)

module CsFramework
  VERSION = "0.0.1"
  DATE = "2012-08-13"
end

module Sass::Script::Functions
    def replaceToUnderscore(string)
        assert_type string, :String
        Sass::Script::String.new(string.value.gsub(/\-/,'_'))
    end
    declare :replaceToUnderscore,:args=>[:string]
end

module Sass::Script::Functions
    def replaceToHyphen(string)
        assert_type string, :String
        Sass::Script::String.new(string.value.gsub(/\_/,'-'))
    end
    declare :replaceToHyphen,:args=>[:string]
end

ついでに、ヘルパー系の関数も書いておくと便利。

imj
デジタルマーケティングやWebインテグレーションを行っているアイ・エム・ジェイのフロントエンドエンジニアチームです。
http://www.imjp.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away