Sassでよく使う関数リスト - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Nuxt.jsのstyleブロックでlang="postcss"を有効にするとvscodeで適切にシンタックスハイライトされる - Qiita
Nuxt 2(1でも？未確認)では yarn add postcss-loader すると何も設定しなくても style ブロックでpostcssを使うことができます。しかしながら、vscodeでVueのシンタックスハイライトをしてくれるVeturはそこまで考慮してシンタックスハイライトしてくれないのでpostcssのコードにエラーが出てしまいます。もちろん、nuxtは適切にコードを解釈できるのでvscode上のエラーさえ気にしなければ開発はできます。 (↓nuxtはエラーを出さないがvscode上ではエラーが表示される例) 逆にstyleブロックにlang="postcss"と指定してしまうとvscode上では適切な表示を得ることができますが、nuxtがwebpackに登録したローダーでは検知できなくなってしまうのでnuxtがエラーを吐きます。 そこで一つの解決策としてlang="pos
HUGO + PostCSS + Netlifyでポートフォリオサイトを作った話 - Qiita
はじめに 静的サイトジェネレーターのHUGO、Node.js製のCSSフレームワークであるPostCSS、ビルド + ホスティングサービスのNetlifyを使ってポートフォリオを作ったので、作り方を公開したいなと思い、作成しました。 https://shinya-sato.com/ 今回は 「どうやって作ったか」 について書いているので、ポートフォリオの構成とかについては原則書かない事にしておきます。 HUGO HUGOとは、Go言語製の静的サイトジェネレーターです。 「シンプルだが多機能」という特徴があります。 生のhtmlをそのまま編集するのと同じ要領で、「関連記事の表示」「多言語対応」等の高等な機能も持ち合わせています。 何故HUGOを選んだのか 結論からいうと、 参考にしたポートフォリオサイトがHUGOで実装されていたからです。 Jekyllはbuildが遅いし、カスタム投稿のペー
最近学んだCSSメディアクエリについて - Qiita
はじめに 最近、初めてメディアクエリについて学んだことをメモとして残しておきたいと思います。 メディアクエリについて Webページを閲覧する際に、ユーザーはPCやスマートフォン、タブレットなど様々な端末を用いています。その際に端末に応じて、Webページ上に表示する内容を表示する必要があります。レスポンシブなWebページを作成するために、メデイアクエリが使用されます。レスポンシブなWebサイトを作成する際に使用される有名な例だとbootstrapが挙げられます。 QiitaをPCで表示した場合 Qiitaをスマートフォンで表示した場合 上記のようにPCとスマートフォンで表示した場合、それぞれのデザインが異なっています。 レスポンシブなWebデザインとは？ メディアクエリを調べた際に、レスポンシブなWebデザインと見かけることが多かったのですが、そもそもレスポンシブとは何かと疑問に思い調べまし
sassの繰り返し処理を使ったクラス付与のメモ - Qiita
.class0-0 { width: 0.0px; } .class0-1 { width: 0.1px; } .class0-2 { width: 0.2px; } .class0-3 { width: 0.3px; } .class0-4 { width: 0.4px; } .class0-5 { width: 0.5px; } .class0-6 { width: 0.6px; } .class0-7 { width: 0.7px; } .class0-8 { width: 0.8px; } .class0-9 { width: 0.9px; } .class1-0 { width: 1.0px; } .class1-1 { width: 1.1px; } .class1-2 { width: 1.2px; } .class1-3 { width: 1.3px; } .class1-
Webpack4でes6/sassをcompile - Qiita
webpack4でcssをsassにes6をes5にcompileさせる 処理内容 es6の記述をbabelでes5に変換 polyfillでasync/await対応 sassファイルをcssに変換 postcssのautoprefixでprefixを作成 css、jsファイルをbuildでminify imgファイルを圧縮 eslint導入 devServerでlocal作業 jQueryを一応入れてます ディレクトリ構成 { "name": "hoge", "version": "1.0.0", "description": "", "main": "src/js/app.js", "scripts": { "start": "webpack-dev-server", "dev": "webpack --mode development", "build": "webpack --m
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Laravelでscssを書くときにstylelintで自動シンタックスチェック - Qiita
Sassのビルド時にCSSの出力形式を指定する - Qiita
sass mixin使って見たらすごく楽しかった。。 - Qiita
stylusについて - Qiita
SCSSの基本的な書き方 - Qiita
Nuxt.js + TypeScript + Sass でプロジェクトをスタートする - Qiita
gulpで静的サイトジェネレーター構築 - Qiita
【CSS scss】均等カラム割りレイアウトmixin - Qiita
gulpのタスクを追加して便利な環境にしよう - Qiita
PostCSSでSassをもっと楽に - Qiita
要素を左右に寄せる方法 - Qiita
要素を簡単に中央寄せする方法 - Qiita
background-imageをレスポンシブする際にpadding-topが認識されない現象を対処する(Edge) - Qiita
gulp+pug+scss+autoprefixerのコンパイルが突然できなくなったので、gulp4に移行した話 - Qiita
