2017年5月6日
【Sass(SCSS)】よく使う便利なコード
Dreamweaver CC 2017でSassにも対応し、ますます広がっていくのかなというSass。
よく使う便利なコードをメモメモ。
▼変数
//set $dark_grey:#333; $lv_max:10; $size_half:50%; $margin_center:0 auto; //usage .sample{ background: $dark_grey; z-index: $lv_max; width: $size_half; margin: $margin_center; }
▼インターポレーション
//set $img_path:'../common/images/'; //usage .sample{ background: url(#{$img_path}bg_img.png) 0 0 no-repeat; }
▼Compassで「引数を使った@mixin」を駆使する
@import 'compass'; //usage .sample{ @include border-radius(3px 3px 0 0); @include box-shadow(#000 1px 1px 1px 1px inset); @include text-shadow(#000 1px 1px 1px); @include inline-block; @include opacity(0.7); @include background-size(100px 50px); @include box-sizing(boreder-box); @include transform(rotate(45deg)); }
▼Media Queries
//mixin @mixin mq($breakpoint: mq_sp) { @if $breakpoint == mq_pc { @media screen and (min-width: 768px) { @content; } } @else if $breakpoint == mq_sp { @media screen and (max-width: 767px) { @content; } } } //usage @include mq(mq_sp) { /* SP */ } @include mq(mq_pc) { /* PC */ }
※コメントに日本語を使うとエラーが出る場合
1行目に下記を記載
@charset "utf-8";
【参考】Sassを極める!デザイナーがすぐ実践できる基本テクニック12連発
【参考】Sass(SCSS)のmixinを使って、Media Queries(メディアクエリ)を使いやすくするスニペット
関連記事
-
【CSS】Flexboxを使って要素を上下左右中央に配置する方法
【CSS】Flexboxを使って要素を上下左右中央に配置する方法
要素を左右だけではなく、上下左右中央に配置する方法は色々あるみたいですが、Flexboxを使って配置する方法をメモメモ。・・・ -
【WordPressプラグイン】「MW WP Form」でチェックを入れたら入力ができるようになる項目を作成する方法
【WordPressプラグイン】「MW WP Form」でチェックを入れたら入力ができるようになる項目を作成する方法
簡単にフォームが作成でき、確認・完了画面や入力エラーメッセージのカスタマイズ、ファイルの送信機能などなど、いつも大変お世・・・ -
【CSS】CSSでよく使うメモ
【CSS】CSSでよく使うメモ
よく使うんだけど、覚えられないCSSをメモメモ。 ▼FontAwesomeでアイコンを表示 [css] :before ・・・ -
【WordPressプラグイン】「EWWW Image Optimizer」で使用する画像を自動で圧縮・リサイズ
【WordPressプラグイン】「EWWW Image Optimizer」で使用する画像を自動で圧縮・リサイズ
WordPressで画像を登録する際に毎回リサイズが面倒だったり、必要以上の画像サイズで登録されてしまったりとするケース・・・ -
【CSS】フッター要素を常に下に表示したい!CSSで!
【CSS】フッター要素を常に下に表示したい!CSSで!
コンテンツが少ないときなど、フッター要素が上にきてしまうので、なんか思ったんと違ーう!となってしまうケースありますよね。・・・ -
【WordPress】プラグインなしでFacebook、TwitterのOGPを設定する方法
【WordPress】プラグインなしでFacebook、TwitterのOGPを設定する方法
今やSNSでの拡散等を考慮すると、必須設定事項のOGP(Open Graph Protocol)ですが、WordPres・・・