-
ID:dTLf2K さんの質問

Sass、Bootstrap、Grunt初心者です。

2件目の投稿を失礼いたします。

【主な環境】

Mac OS X EL Capitan
Brackets
Chrome
を主に使用して開発をしています。

【作っているもの】

現在Bootstrapをベースにしたテーマ、
「Honoka」
http://honokak.osaka/
を利用させていただきながら、ウェブサイトを作っています。

【現状レベル】

サイトでのビルド方法や、その他検索を参照しながら、
とりあえずビルドができるようになり、編集ができる状態です。

仕組みについては理解できていません。
Node、Grunt、Rubyなどもまったくわかっていない状態で、いろいろと検索して見ているようなレベルです。

【解決したいこと】

以下のコードに強制的に-webkit-などのオートプレフィクスをつけたいです。

background-clip: text;

手書きで書くと、やはりscssファイルを編集し、ターミナルでビルドをかけると、エラーになります。

Sassは自動でオートプレフィクスをつけてくれると思うのですが、
このコードにはつかず、結果、自分の環境のChromeでは反映されず、
開発者デベロッパーツールで試しに手動で-webkit-をつけると、反映されました。

どうぞよろしくお願いいたします。

みんなの回答 5 件

ID:GD5ks9 さんの回答

sassはプレフィックスは自動でつけませんよ。
それcompassじゃない？
autoprefixer等のプラグインがあるので、使いやすいのをどうぞ
ID:dTLf2K

すでにautoprefixerが使われていそうです。
autoprefixerがプラグインだというのはこの記事に対するみなさまのコメントでやっと認識ができました。あらかじめ組み込まれているものだと思っていました。

以下Gruntfile.jsより抜粋ーーーーーーーーーー

// 本家Bootstrapのautoprefixerの設定を読み込む
grunt.task.registerTask(’getTwbsConfig’, ’Get config from bootstrap’, function() {
try {
var configBridge = grunt.file.readJSON(’bower_components/bootstrap/grunt/configBridge.json’);
var twbsPkg = grunt.file.readJSON(’bower_components/bootstrap/package.json’);
grunt.verbose.ok();
} catch (e) {
grunt.verbose.or.write("Loading Bootstrap config...").error().error(e.message);
grunt.fail.fatal(’Do you install bower component? Try "grunt bower:install"’);
}
grunt.config.merge({
twbs: twbsPkg,
autoprefixer: {
options: {
browsers: configBridge.config.autoprefixerBrowsers
}
}
});
});

// テスト
grunt.registerTask(’test’, [’scsslint’]);

// CSSビルド
grunt.registerTask(’css’, [’sass’, ’autoprefixer’]);

ID:dTLf2K

ちなみにCommpassではないと思います。
たぶんですが。

ID:xuHHoq さんの回答

cssnext でも使えばいい。grunt 用のプラグインもある。
ID:dTLf2K

すでにautoprefixが使われているようです。
cssnextをググってみましたが、すでにあるものと差し替えるのに、理解が足らず時間がかかりそうです。
それとも差し替えなくてもいいんでしょうか。
Gruntfileを見るといろいろとプラグインが導入されている？　ようなので、ちょっとわからなくなっています。

ID:GM2FLW さんの回答

ライバーはクソ
ID:dTLf2K

ライバーが何なのかググりましたが、
どんな趣味であろうと助かっているので、構いません。

ID:F3N8tu さんの回答

そーそー、プラグインをいれてやるんだよ、それ。
ID:dTLf2K

すでにautoprefixerが使われているようです。
このbackground-clip: text;に対して強制的にプレフィックスをつけるよういに設定する方法がわかればいいのですが。

ID:k.HhoN さんの回答

やり方はいろいろあるけど、postcssかな。
ID:dTLf2K

検索でcssnextと一緒に出てきました。
理解が遅く、差し替えに時間がかかりそうです。
ビルドできなくなりそうな心配があります。

最終更新日:2016-07-12 (1,525 views)

関連するトピックス

ページ上部に戻る