tamlog

主にwebのフロント回り たまに登山

a-blog cmsのsassを使う

スポンサーリンク

a-blog cmsでベースのCSSをカスタマイズしたい場合ですが、 lessを使っている方はthemes/system/lessを使うとカスタマイズ可能です。 sassを使いたい方はダウンロード時に付いてくるomake/scssフォルダを使うとカスタマイズ可能です。

less,sassファイルが同封されてるのは助かりますね。 ちなみにこんな感じで使っています。

手順 ・ダウンロードしたa-blog cmsの中にomake/scssフォルダがあることを確認 ・フォルダ名scssをacmsへリネーム ・テーマディレクトリのsassフォルダへコピー ・scss/acms/acms.scssを一つ上の階層にだす ・scss/acmsフォルダ内のファイルの頭に(アンダースコア)を付けてパーシャルファイルへ ・scss/acms/variable.scss33行目あたりのファイルパスを修正 ・scss/acms.scss内のパスを修正



// ------------------------------
//  ファイルのパス
// ------------------------------
$acms-path-marker: '../acms-images/marker/';
$acms-form-select : '../acms-images/marker/arrow_black03.png';
$acms-font: '../acms-fonts/';


scss
    ├── acms.scss
    ├── acms
    |    ├── _acms-admin.scss
    |    ├── _acms-field.scss
    |    ├── _acms-fonts.scss
    |    ├── _acms-system.scss
    |    ├── _alert.scss
    |    ├── _animation.scss
    |    ├── _badge.scss
    |    ├── _button.scss
・・・

acms.scss
@charset "utf-8";

// Base
@import "acms/variable.scss";
@import "acms/mixins.scss";

// Core CSS
@import "acms/grid.scss";
@import "acms/button.scss";
@import "acms/type.scss";
@import "acms/code.scss";
@import "acms/form.scss";
@import "acms/table.scss";
@import "acms/title.scss";
@import "acms/list-group.scss";
@import "acms/label.scss";
@import "acms/badge.scss";
@import "acms/panel.scss";
・・・


css
  ├── acms.css
・・・