Vue.jsを使い始めていろいろできることが多くなってきたので、整理する意味も兼ねてチュートリアルにまとめます。 今回はコーポレートサイトを想定して作成していきます。 ※記事が長くなったのでチュートリアルを分割しました。 目次 表示編 ルーター編 コンポーネント編 CSS編 ←イマココ JS編 ライブラリ編 メタ編 ビルド編 前提 タスクはnpm scriptsで一限管理 コマンドはyarnを使用 vue-cliのwebpack-simpleを使用 CSSはSCSSを使用し用途に合わせてPostCSSを使用 バージョン "vue": "^2.5.11" "webpack": "^3.6.0" "node-sass": "^4.7.2" "postcss": "^6.0.16" "stylelint": "^8.4.0" CSSの環境構築 SassとPostCSSを使用するので以下のコマンド
Node Sass could not find a binding for your current environmentというエラーメッセージをきっかけにnode-sassのソースコードを少し追ってみました。 起きた事象 フロントエンドのビルド環境としてNode v8で動いていたプロジェクトをNode v10にアップデートしました。その結果、次のような Node Sass could not find a binding for your current environment というエラーメッセージを吐いて落ちました。 どうやら使用していたモジュールのnode-sassでエラーが起きたようです。 Error: Missing binding /path/to/project/node_modules/node-sass/vendor/darwin-x64-64/binding.no
症状:: 新規案件に着手する前にOSXをHigh Sierraにアップデートしたらsass が使えない!急いでるのに! sass -vバージョン確認しようとしただけで。。。 -bash: /usr/local/bin/sass: /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby: bad interpreter: No such file or directoryとおこられる。 対策:: 1.Xcodeをアップデート App Storeから行います。 2.ターミナルからRubyを再インストール brew install rbenv ruby-build 3.sass とcompassを /usr/local/binへインストール sudo gem install -n /usr/local/bin sas
Sassの教科書が大幅に内容を強化し、改訂2版として刊行されました! 当ブログのビジターも多くの人が愛用したと思いますが、改定前のを持っている人も、もちろん持っていない人もSassをもっと使いこなしたい人にかなりオススメの一冊です。 Sassのインストールは初心者に分かるように優しく、よく使う基本的なテクニックは丁寧に、さらに高度なテクニックは詳しく、基本から実践までこの一冊で完璧に身につけることができます。 本書はSassが大好物な著者陣によって執筆された、愛に溢れた教科書です。さまざまなプロジェクトで培われたSassのノウハウが、惜しげもなく記されています。 Sassを使う人はもちろん、Sassってなんか敷居が高いと感じている人にも、明日から実務で使えるテクニックがしっかり学べます。
An opinionated styleguide for writing sane, maintainable and scalable Sass. The Sass Guidelines project has been translated into several languages by generous contributors. Open the options panel to switch. About the authorMy name is Kitty Giraudel, I am a French front-end developer, based in Berlin (Germany) since 2015, currently working at Cofenster. I have been writing Sass for several years no
これは CSS Preprocessor Advent Calendar 2012 の 5 日目の記事です。 今日はあまり知られていない Sass の if 関数について紹介したいと思います。 Sass には、条件分岐のための制御構文として @if ディレクティブ(いわゆる if 文)が用意されています。 $type: ocean; p { @if $type == ocean { color: blue; } @else { color: black; } } Sass の紹介記事の中では必ずと言っていいほど出てきますし、皆さんも一度は使ったことがあるのではないでしょうか。 実はこの @if ディレクティブ以外に、Sass には if 関数が標準で用意されています。 上のコードを if 関数を使って書き直すと、次のようになります。 $type: ocean; p { color: if(
前回の記事では、Sass 3.3で追加される「&」の新機能と@at-rootについて解説しました。今回は新しいデータタイプの「マップ」について解説します。 マップは色々な使い道があると思いますし、使い方によってはかなり便利なものですので、ライブラリを作っている方などは特に覚えておくと良いと思います。 マップとは マップは任意の名前と値のペアが集まったもので、名前をキーにして値を設定したり、取り出して使います。 マップの書き方ですが、名前と値をコロン(:)で区切り、複数記述する場合はカンマ(,)で区切り、それらを丸括弧(())で囲みます。CSSのスタイルの書き方とちょっと似ていますね。 // マップ $map: ( key1: value1, // key1にvalue1を設定 key2: value2, key3: value3, ); // CSSのスタイル selector { pro
Sassには生CSSでは使えない様々な機能が用意されていますが、今回はその中から数値を操作したいときに便利な演算機能や関数を紹介します。 上手く利用することで自身で計算する手間を省くことができたり、例えば複数のカラムの幅指定などを簡単な記述で出力したりすることもできます。 演算について Sassは、数値に対して加算(+)、減算(-)、乗算(*)、除算(/)、**剰余(%)**を使うことで、他のプログラミング言語のように演算を使うことができます。 異なる単位だとエラーが出るとか除算の場合は括弧が必要など一部気を付ける点はありますが、以下サンプルにあるように基本的には同じような形で使用することができ、単位が片方しかない場合や2つ以上の数値での計算もできたり、変数にした数値を計算に利用することもできます。 また、以下では紹介していませんが、例えば加算と減算を同時に行うといったように組み合わせて使
2017年2月22日 CSS, 色彩 Sassがデフォルトで用意している関数や、それを応用して設定できる小技やMixinをまとめてみました。紹介しているほとんどの小技が、色を一色してすれば他の色も自動生成してくれる…という便利なものです。Sassを勉強中の方はもちろん、ゴリゴリ使いこなしている方も参考にしてみてください!Sassの基本的な情報は、過去記事「効率良くCSSコーディングできるSassを使ってみよう!Mac+Codaなら設定も簡単!」に書いています ;) ↑私が10年以上利用している会計ソフト! 目次 透明度の書き方を簡略化 色の明度を調整する 色の彩度を調整する メインカラーの明度や彩度を調整して、リンク色を手軽に設定 背景のグラデーション 文字をグラデーションにする 縞模様の背景 抑えておきたい基本編 1. 透明度の書き方を簡略化 通常色の透明度を指定する時は rgba(0,
CSSでイージングを使用する際、easeやlinearの場合はそのままその名前を値に記述すればいいですが、例えばeaseOutCubicやeaseOutExpoなどを使用したいときはcubic-bezierを用いて記述する必要があります。 ただ、それぞれの指定数値をいちいち覚えておくのは面倒なのと単純にイージング名で使用できたらいいなと思ったので、簡単に指定できるように変数化してみた備忘録です。 紹介しているイージング名やcubic-bezierの各値については、「Easing Function 早見表」を参照しており、それに加えease, linear, easeIn, easeOut, easeInOutも含めてあります。 単純な変数化 $ease : cubic-bezier(0.25, 0.1, 0.25, 1); $linear : cubic-bezier(0, 0, 1, 1
Sassを利用してて連番付きのidまたはclassを一気に出力したいときに、item1, item2, item3 ... のように単純に1から始まる連番をつけて出力するのではなく、item01, item02, item03 ... のようなゼロパディング(ゼロ埋め)な連番で出力させる方法です。 ゼロパディングとは ゼロパディングとは、足りない桁数の分だけ「0」を追加して埋めるというものです。 具体的な例としては、1, 2, 3, 4, 5という数字の場合であっても桁数を2桁にする必要があるときは01, 02, 03, 04, 05にするというものになります。 単純な連番付きで出力する 違いを見るために、まずは単純な連番付きで出力してみます。 今回はサンプルとして.item + 連番のようなclassを出力するというもので、連番は1~10まで出したいという場合は@forを利用してSCSS
私的(あるいはテンマド社の)CSS/SCSSコーディングについてのルールまとめです。 自分自身の整理/備忘録と、自分の書いたコードを引き継ぐなどしていじることになった人に見せる用。随時更新。 最終更新:2019/09/25 (→ 変更内容 ) ルール設計の指針 覚えるべきことは必要最小限に メンテナンス性の高さを最重要視 開発時に「迷う」「考える」部分を極力減らして余計な事を考えずに済むように 前提 Sassを使う 素のCSSを使うような苦行は避けます。 ほとんど好みの問題ですが、Lessは記法がちょっとよくないので、Sassを使います。 処理速度やツールセットの関係で、本家RubyのSassではなく、node-sassのほうを、大抵はgulp-sassで走らせて使います。 ※そろそろSassを捨ててPostCSSのみで済ませるのも現実的になってきているので、プロジェクト参加者のCSS知識
CSS Niteに出演しますと書いてそれっきり、、、2ヶ月ぶりのエントリーです。こんにちは、しばっちです。タイミング的に仕事がぼんぼんやって来て、嬉しい悲鳴をあげる反面、フリーランスとは断ることを覚えないと大変なんだなということを痛感しています。 さて、「CSS Nite LP, Disk 32: Sass」に出演しました。僕のセッションでは「Sassを使ってどんなものなのかを知ってもらう」ということでしたので、落とし穴や管理面については極力後ろのセッションで解説されることを期待して省きました。アンケートでは叱咤激励いただき、もっと頑張りたいと思う次第です。 ちなみに、スライドは3ヶ月後に一般公開となりますので、急ぎで僕のスライドをご覧になりたい方はフォローアップ参加でお申し込みいただければ見られます。 セッション中では一切触れませんでしたが、コードの管理はもともとプログラムからWebを触
ブレイクポイントや使用回数が増えるに連れてどんどん管理などが面倒になってくるMedia Queries(メディアクエリ)を、Sassのmixinを使って利用しやすく且つ管理もしやすいようにしたスニペットを紹介します。 ここで紹介する以外にも方法はあるとは思いますが、個人的に過去に使っていたとか普段から使っているものを3パターン紹介します。 条件分岐を使う ひとつ目は条件分岐を使ってひとつずつブレイクポイントを指定したものです。 ブレイクポイントの追加をしたい場合は同じように条件分岐を追記し、逆に不要なものがあれば該当の条件分岐を消せば変更できます。 また、各ブレイクポイントは数値での指定ではなく「small」や「large」という形でそれぞれ用意しており、使用時はこれらを引数に指定します。 こうしておくことで後で数値を変更することになった場合でも、mixin内で記述している数値部分のみ変更
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く