Vue.jsでSassを使う時にグローバル変数を読み込む方法 - Goota
こんにちは、お読みいただきありがとうございます。 ケン(@gootablog)です。 ここ最近はVue.jsを書いています。 スタイルのコーディングは変数や関数も作れて便利なSassを使うことが多いです。 SassをVue.jsで使うのは簡単ですが、変数などの扱いに困ってました。 最上位層のApp.vueにインポートするとスコープ使えないしどうしようと思ってましたが調べたらグローバルに設定できる方法があったので書いていきます。 Vue.jsのバージョンとディレクトリ構成 今回試してるVue.jsとwebpackのバージョンはこれ "vue": "^2.5.17" "webpack": "^3.6.0" 公式のvue-cliというコマンドラインインターフェースからvue init webpackを実行してプロジェクトを作っています。 sass-resources-loaderのインストール
gulpで編集中のscssファイルをwatchしてCSScombした話 - marc tech
こんにちは！フロントエンドエンジニアのセイです！ ネタな記事が増えていたので堅実な記事を書きたいと思い、開発環境を整備した際に書いたコードを紹介します。 目的：watchタスクで監視しているSCSSをCSScombで成形したい。 当初、上記の目的に沿ったコードをWEB上で検索したのですが、gulp で SCSS をコンパイルした CSS に CSScomb をかけるものがほとんどでした。また編集している SCSS 自体を CSScomb にかける記事もあったのですが、別途ディレクトリを用意して解決していたので、別の方法があるのではないかと考え作成しました。 今回の開発環境は以下のようになっております。 最低限のタスクのみ書いているので実際に案件で使用する際は追記して使用してください。 version "gulp": "3.9.1" "gulp-csscomb": "3.0.8" "gulp
gulpで自分が編集しているscssをcssCombしたい - Qiita
cssCombは便利だ。 でもgulpでの導入方法を調べてみると、プロパティの並び順を整えてコンパイルする方法しか見つからなかった。 個人的にはコンパイル後の綺麗さはどうでもよくて、編集するファイルこそ綺麗にしたい。 やりたいこと scssを保存するたびに下記を実行したい そのscssをcssCombで整える cssにコンパイル 結論 これで実現できる { "devDependencies": { "gulp": "^3.9.1", "gulp-changed-in-place": "^2.0.3", "gulp-compass": "^2.1.0", "gulp-csscomb": "^3.0.8", "gulp-watch": "^4.3.5" } } var changedInPlace = require('gulp-changed-in-place'); var compass
もっとSassろう！慣れてきたら使いたいワンランク上のコーディング方法4選
同じレイアウトのスタイルで、一部の色やアイコンだけを変えたい、というときに便利です( ˇωˇ ) 使用方法 html <section id="nav"> <ul> <li class="nav_home"><a href="#">HOME</a></li> <li class="nav_about"><a href="#">ABOUT</a></li> <li class="nav_company"><a href="#">COMPANY</a></li> <li class="nav_contact"><a href="#">CONTACT</a></li> </ul> </section> <!-- / #nav --> 以前、$colorsに直接色コードを配置しておりましたが、あらかじめ変数を定義しておくと、のちの管理がしやすくなります�( ˇωˇ ) /* ===========
SASS/SCSSで基本カラーを設定して効率よくカラーバリエーションを作成する
共通のSCSSファイルを作成する カラー設定は他のSCSSファイルから共通して使用すると効率が良いです。 なのでカラー設定用のSCSSファイルを最初に作成します。 共通の変数は「_variables.scss」というファイル名にします。 「_」で始まるファイルはコンパイルされません。 _variables.scss $base-color: #536A97; とりあえず「$baseColor」という変数を一つ作成しました。 変数を使用する さきほどカラー設定した変数を使用してみましょう。 base.scss @import "_variables.scss"; h1 { color: $base-color; } 適当なファイル（base.scss）を作成したら、カラー設定した「_variables.scss」をインポートします。 あとは使いたい場所に「$baseColor」を記述するだけ
Sassを使いたくなる！便利機能をまとめてみました。 | MONSTER DIVE
前回は効率的な制作環境を作るために、Gruntについて紹介しました。今回はCSSを効率よく書くことができるSassについて紹介したいと思います。 Sassを使い始めて1年ほど経ちますが、その便利さに、今ではコーディングをする上で欠かせなくなりました。 CSSの場合は、同じスタイルを何度も定義したり、プロパティの変更の修正が面倒だったりします。 Sassを使うと、CSSでは面倒なことを解決できるだけでなく、変数が利用できたり、スタイルの使い回しができたり、for文や四則演算まで使えます！ それらを使いこなせば、CSSをより便利で効率的に書くことが出来る。CSS設計もしやすくなります。CSSのパワーアップさせた言語、それがSass！のような感じです。 Sass特長 セレクタがネスト（入れ子）になっているので見やすい。また、セレクタの変更に柔軟に対応できる セレクタの使い回し（extend）がで
Sass解説 - extend, mixin, function | MONSTER DIVE
Sassを使い始めたとき、ネストや変数などは比較的わかりやすいのですが、今回は"便利なんだけどイマイチどれを使っていいかわからない"、extend、mixin、functionについて比較したいと思います。 Sassにはもちろん色々な便利機能があるので、Sassで何が出来るのだろう？と探してこの記事に来たヒトは、弊社KentaroのSassを使いたくなる！便利機能をまとめてみました。をご覧ください。 ここでは、Sass（SCSS記法）のextend（継承）、mixin（ミックスイン）、function（自作関数）に絞って紹介してみます。 特にextend、mixinは、どちらを使っても変わらない場合もあり、好みがわかれるかもしれませんが、ここは自分ルールで分けているので、ご容赦を。 extend（継承） このextend、mixin、functionの中で、まず最初に紹介されているのがex
SublimeText（Windows、Mac）をSassで使いやすい設定にする | Web制作者のためのSassの教科書 - 公式サポートサイト
ここでは、Win,Macともに最近ユーザーが激増している「Sublime Text」でSassを快適に使えるようにするための、設定例を紹介します。 この設定は、著者の森田がSassのコーディングをする時に使っている設定（2013年8月現在）になりますので、あくまでも一つの参考として読んで頂き、使いづらいと感じる部分は、自分なりにカスタマイズしてより使いやすいエディタにしましょう。 キャプチャーはMacで撮っておりますが、Windowsも同じやり方で設定できます。 Sass用の設定を追加 まずは、SublimeTextを起動します。 SublimeTextを起動した状態 まず、機能を拡張するためにパッケージコントロールをインストールします。「Sublime Package Control」のサイトへアクセスしましょう。Installationページに記載されているソースをコピーします。 バー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
