SASSの設定、fontawesome、Atomの設定
昨日の自分の設定したscssを見て、無駄だなと思うところをちょっと調整したい。
.btn-green{
$btn-color: $green;
@include btn-hover($btn-color);
}
って、
.btn-green{
@include btn-hover($green);
}
でいいやん。
そして、これらをひとまとめにしたい。
これがすごく使えそう！
ということで、早速やってみた。
//色の指定
$member_color:(
blue: #0099cc,
orange: #daa520,
green: #008000,
red: #ff1919,
black: #4a4a4a,
purple: #8B008B
);
//それぞれのボタンの設定。$colorは$btn-colorで設定されているものを引数とする。
@mixin btn-hover($color) {
color: #fff;
background-color: lighten($color,5%);
border-color: $color;
&:hover,
&:focus,
&.focus {
color: #fff;
text-decoration: none;
background-color: darken($color,5%);
}
// .activeが追加された場合＋5%暗く
&:active,
&.active {
background-color: darken($color,10%);
&:hover,
&:focus,
&.focus {
background-color: darken($color,15%);
}
}
// .diabledが追加された場合＋5%明るくする
&.disabled,
&[disabled],
fieldset[disabled] & {
background-color: lighten($color,5%);
}
}
//ボタンの設定
@each $name, $color in $member_color {
.btn-#{$name} {
@include btn-hover($color);
}
}
バッチリ動作！！
これで、カラーの追加は、カラーコードを追加するだけでボタンをどんどん作れる。楽になるなぁ。
SASSもなんとなく理解してきたので、次に進もう。
FontawesomeをRuby on Railsに導入
<i class="fa fa-close"></i>
を動作させるようにしよう。
多分、gem入れるだけだよね。
RailsにFont Awesomeを導入するGem - Qiita
gem "font-awesome-rails"
を追加、bundle install
*= require font-awesome
を application.scssに追加。
はい、エラーが沢山でましたよっと。
couldn't find file 'font-awesome' with type 'text/css'
だってさ。
SASSだからエラーでているのかなと推測。
調べてみる。
gem 'font-awesome-sass'
にして、bundle install
requireの部分を削除して、@importに修正。
確認！！・・・エラー！！
この人と同じく俺もハマっていたようだぜ。。。
rails s を再度し直しして、表示したら・・・
ちゃんと表示された！！ヒャッハー！
これで、fontawesomeの導入も無事に完了！！
やるじゃん俺。
さて、git push。
今 atomを使ってるんだけどさぁ、fontawesomeのclassタグの候補でないのを出せるように出来ないかなぁ。
少し探したけど見つからないので、却下。
まぁいいや。
少し脱線して
ruby on rails おすすめ gem で検索してみよう。
ruby slimがなんか使いやすそう・・・
slim導入してみよう。
直感的にわかりやすい。
gem 'slim-rails'
をgemに記載。bundle install
application.htm.erbを application.html.slimに変更
doctype html html head title SampleApp = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track'=> true = javascript_include_tag 'application', 'data-turbolinks-track'=> true = csrf_meta_tags body == yield
と入力し、rails sで再起動して確認。
動作確認出来たー！
さて、slimの書き方を少し勉強して見るかのうぉ。
Bootstrap Formというのも便利そう。これは後で。
コメントは / か
li.item class=item.name
と書くと、classに直接追加されるのか。
a.btn.btn-blue.active style="font-size:25px;" アクティブボタン
とすると、styleが記載された。なんとなく理解した気がする。
slimも記載していけば、どうにかなるだろう。
slimで記載し時に、classの色分けとかしてくれないかな。
ひとまず、slim導入したので、git push
をインストールした。色がついたので、わかりやすくなったなぁ。
これで、slimでコードを書いていっても問題なさそう。
なんとなく・・・プログラマーっぽい！ｗ
スペースとか、タブとかもついでにわかるのないのかなぁ。
Atom - 半角スペース・タブ（不可視文字）を表示 - 開発メモ - Webkaru
普通に設定であった。
表示させると、全部・・・となっている。
>>となって欲しいのに。どうしたらなるの。
調べてたら、ちょっと違ったのが出てきたけど、・・・をもう少し濃く表示するといのがあったので、それを対応しよう。
Atomのスペースをはっきり見えるようにする · GitHub
見やすくなった・・・！
これはいいな。
いや、じゃなくてなんでTabを押してるのに、スペース扱いになるんだという点。
最初からここを見ればよかった。
うん、ここ素晴らしい。
show-ideographic-space
もインストールしておいた。
show indent guideにチェックをいれているんだけど、slimだとダラっと落ちてしまう。。
を導入したら、問題なく表示されたYO!!
これで、だいぶ操作しやすくなったはず。
うん、コーディング全くしてないね。設定ばっかりだね。
いや、重要だと思うんだよ。
これは。
あとで、ダラダラと書いているこの記事をまとめて、使いやすくしよう。行動記録は重要だよね。うん。
次は、Ruby on Railsで静的なページを追加しよう。
ちなみに、目標は静的なページを完璧に作り、プログラマに提供するです。はい。
