SCSS
【CSS】複数読み込んでいたCSSを１つにまとめる
PageSpeedさんに「読み込むリソース多いよ！」と怒られた？ので、CSSを雑に１つにまとめてみました。 纏めたCSS bootstrap.min.css bootstrap-responsive.min.css od…【CSS】他の値と計算する
$headerHeight : 100px; $menuHeight : 40px; #wrapper { padding-top : $headerHeight + $menuHeight; } こうすることで高さが変…Font Awesomeを少しだけ使いやすくするTips
Font Awesomeは使用する時に2つクラスを指定しないといけません。 一つは「.fa」、もう一つは「.fa-◯◯」というアイコン指定のクラスです。 ただ、毎回HTMLで「.fa」も入れるのは手間だし忘れてしまいます…@extendと@mixinの違い
@extend /*ベースとなるクラス例*/ .red{ color:red; } /*記述方法*/ a{ @extend .red; } /*出力内容*/ a{ color:red; } @mixin /…Scssで＆を使って記述を短縮する
通常時は a{ text-decoration:none; } a:hover{ text-decoration:underline; } と別々に記述しているところも、 a{ text-decoration:none;…
Sass（SCSS）のmixinを利用して角丸指定を楽にする
Sassを利用してcssを記述する場合あらかじめ下記のようにmixinを設定しておくと、後で指定が楽になります。 @mixin border-radius($radius) { -webkit-border-radius…【SASS】partialのパスは相対パスであれば辿れる
@import "mixins"; と書いていたパスも @import "../../themes/default/sass/mixins"; と相対パスで記述することで、別階層に…