タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Webエンジニアを始めて丸2年が経ちました。 複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。 はじめに 長くなってしまった細かい説明はところどころ折りたたんでいます。概要だけで理解できたら飛ばしていただき、詳しい話が気になったら開いて読んでください。 これらは「自分がよく取り入れている手法」であって、必ずしもどのプロジェクトにも当てはまるものではないと思います。 各項目について、自分がその判断に至った 「理由」 を説明していますので、 理由を読んだ上で自分のプロジェクトに取り入れるか判断いただくと良いと思います。 この記事は、すでにCSSコーディングをしていてアイデアがほしい人に向けた記事で、 CSSをこれから学び始めるような 初学者向けではない ことご了承ください。 一般的と思われるキ
（2023/08/29） 全ブラウザでネストに対応したので記事を更新しました。 本日2023/08/29、全ブラウザでCSSでネスト（入れ子）ができるようになりました💐 次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わないCSSコーディングを大きく変えることでしょう。
2024年になり、CSSは急速な進化を遂げています。中でもワークフローにも影響を大きく与えるのが、Sassに代わる新機能の数々です。 ネイティブのCSSで変数を扱えるようになり、ネストや:is()疑似クラスや:has()疑似クラスやコンテナクエリ、そしてカスケードレイヤーなどの新機能がモダンブラウザのすべてにサポートされました。これらの機能がSassに代わるものなのか、Sassはまだ必要なのか、を紹介します。 Goodbye SASS , welcome back native CSS by Karsten Biedermann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの変数 CSSのネスト :is()疑似クラス :has()疑似クラス コンテナクエリ カスケードレイヤー Sassの未来 Sassよ、さよ
Sassの@importルールは、廃止されることが予定されています。 @useや@forwardといったルールに置き換わるのですが、これらは全く新しいシステムです。 これらの知見が溜まってきたのでご紹介します。 @import と 新しいモジュールシステム Sassの初期の方から実装されていた@importは、テキスト形式でSassファイルを読み込むための機能です。便利な機能ですが、CSSの@importと重複しているため、SassなのかCSSなのか一見してわかりにくい側面がありました。 新しいモジュールシステムは、この問題を解消し、Sassをより柔軟に使用できるようにします。 @importではグローバルに指定されていた変数などは、ファイルごとにカプセル化され、ファイルの内容に基づいて解決できるようになりました。 現在、Dart Sassしか新しいモジュールシステムは使えませんが、Lib
はじめに HTML+CSSコーディングにおいて、Sass管理ディレクトリを標準化する方法を紹介します。 CSS設計は、サイト種別やプロジェクト規模、分業の有無や人数によっても最適解が異なります。 この仕組みは、様々な設計を同じロジックで受け入れることによって、CSSコードの管理効率を画一的に最大化する狙いのものです。 コーポレート・ポータル・ブログ・EC・LP・管理画面…など、様々な種別のサイトのCSSを、同じ仕組みで設計して管理できるようになります。 前提事項など SassなどのCSSプリプロセッサの使用を前提とします。 本記事の一部は、後で見られるよう別記事として切り出しています。（📝のマークのもの） この記事は標準化ノウハウ公開の一環として書いています。 仕組みの概要や前提事項などについては「UltimateCoding 概要・前提事項」のエントリをご確認ください。 セクション一覧
宣伝💡 この記事の内容の超大容量版がこちらの本になります。興味がある方は是非チェックしてみてください。 Web業界に新卒で入ってから7年と数ヶ月が経ちました。私はデザインからフロントエンド全般が守備範囲です（Next.jsを使った軽めのWeb開発くらいまで）。 最近ようやく自分の中での「コーディングの手法やルール」が固まってきたので、言語化してこの記事で解説していこうと思います。 はじめに まず最初にこの記事の方針や前提をいくつか書いておきます。 用語や知識の詳しい解説はしていないので、分からない内容が出てきたら調べながら記事を読んでいただくとより理解しやすいと思います 実務を数年経験していないと理解できない部分があるかもしれないです（完全初学者向けではなく、初・中級者向け） あくまで自分の中での手法やルールであり、全ての実装者・会社・プロジェクトなどに当てはまるわけではありません（もち
Sass: LibSass is Deprecated
After much discussion among the Sass core team, we’ve come to the conclusion that it’s time to officially declare that LibSass and the packages built on top of it, including Node Sass, are deprecated. For several years now, it’s been clear that there’s simply not enough engineering bandwidth behind LibSass to keep it up-to-date with the latest developments in the Sass language (for example, the mo
Svelteとは最近フロントエンドの技術で、ReactやVue.jsに変わって注目を集めているのが Svelte です。下記のような特徴があります。 ・仮想DOMがない ・ファイル拡張子.svelteになる ・svelteファイルに記述されたstyleはスコープ付きになる ・Store管理も内包している（ReduxやVuexのようにインストールしなくてよい） Svelteは何が良いのか？ Vue.js やReactと違って仮想DOMがありません。ビルド時に純粋なJavaScriptにコンパイルして表示します。つまりSvelteはコンパイラーです。 そもそも仮想DOMのメリットとして、アプリ全体を再レンダリングせず、変更箇所（実際のDOMと仮想DOMの差分）もしくは Contextでトリガーされたとき を検知して、局所的にレンダリングすることで高速化を図っています。 Svelteの公式ブログ
先日、KOJIKA17さんの「Sassを@importから@useに置き換えるための手引き 」という記事を見て、2022年10月ころにはSassで@importが使えなくなる可能性があることを知りました。まだ2年ありますが、新しく取り組むプロジェクトでは@useを使ったモジュールシステムにしたいので、自分が使っている構成の置き換えについて考えてみました。 まずはアイディアをシェアをして叩き台にしてもらうのが目的ですが、他に良い書き方があったらぜひアドバイスいただきたいというのもあります。 試しながら、考えながら書いているので内容は変更される可能性が高いかもしれません。 Sassの新モジュールシステムについて Sassの新しいモジュールシステムについては、上述の記事や SHIFTBRAINさんのブログ がわかりやすかったです。ありがとうございます。 公式の発表と@useと@forwardのド
2020年6月14日 CSS, 便利ツール 最近Sass界隈が賑わっているように感じます。おそらく「Sassを@importから@useに置き換えるための手引き」という記事でDart Sassダートサスの存在を知った方も多いでしょう。今回はそんなDart Sassをザックリと、そして便利なコンパイラー「Prepros」について紹介します。 ↑私が10年以上利用している会計ソフト！ Dart Sassとは 一口にSassと言っても、実装している言語によって3つに分かれます： Ruby Sass … Ruby製。2019年没。サポートされません。 LibSass … C++製。今一番広く使われている様子。 Dart Sass … Dart製。公式推奨。 ICS MEDIAの池田氏によるアンケートだと、LibSassがだんとつ人気ですね。 ウェブのフロントエンジニアに質問。 Sassのコンパイル
2020年 01月 30日 エディタをVisual Studio Code（VSCode）に変えてSASS（SCSS）のコンパイルとライブリロードでサクサク開発！ショートカットの一覧も カテゴリ： PCツール タグ：エディタ 一時期 VSCode を使うも Atom に戻っていたのですが、 どういうわけか GREP 検索ができなくなってしまい 再び VSCode を使うことにしました。 どうせならプラグインも見直してしっかりメインエディタになるように設定もしたのでそのあたりを書き留めておきます。 Visual Studio Code（VSCode）とは Microsoft が提供しているオープンソースのエディタで、MacOS・Windows・Linux で動作します。 https://code.visualstudio.com/ gulp も webpack も使わずエディタベースでSAS
2023年9月6日 CSS CSSをより便利に、効率よく記述できるSass。利用しているWebサイト制作者も多いでしょう。近年はCSSでもSassのような書き方ができるようになってきているので、Sassとの書き方の違いとともに紹介します！ ↑私が10年以上利用している会計ソフト！ 何度も利用する値を変数として定義し、使いまわせます。よく利用する数値や、色が連想しづらいカラーコードに利用するといいでしょう。 Sassの場合の書き方 $ マークに続いて任意の変数名を書き、コロンで区切って変数の値を記述。この値が呼び出されるようになります。実際に使いたい箇所では $ マークと変数名を書けば、変数を呼び出せます。 $main-gutter: 30px; .box { width: 300px; height: 100px; margin: $main-gutter; } CSSの場合の書き方 公式
こんにちは。ニコニコ生放送生放送フロントエンドシステムセクションのmisuken(GitHub/Twitter)です。 今回は10月に公開したsmart-svgとreact-sass-inlinesvgという2つのSVG表示ライブラリに関して、作成に至った経緯、ライブラリの特徴、工夫したポイント、パフォーマンス等の話をしていきたいと思います。 ライブラリを作成した経緯 これまでのSVGの表示方法 ニコニコ生放送ではこれまで、SVGを表示する際にはreact-inlinesvgというライブラリを使用していました。 react-inlinesvgは<img>のようにsrcにURLを渡して表示するタイプのライブラリです。 SVG要素がDOMに展開されるため、CSSからスタイルを適用できます。 react-inlinesvgのREADMEに書いてある使用例。 import React from '
Replacing Sass · Discussion #44 · Shopify/foundational-design-system-proto
We’ve noticed several growing pain points to using Sass at scale. Some of these apply to Polaris and teams using Polaris, while others impact development across Shopify. In Polaris, the original Sass variables, functions, and mixins are creating a burden with newer technologies that have been introduced: CSS variables and JS utilities. This has led to added overhead in how these technology layers
こんにちは。TAK(@tak_dcxi)です。 2020年最後のZennの投稿ということで、Web制作テンプレートの年末大掃除も兼ねて僕がよく使うSassのmixinとfunctionを厳選してまとめてみました。 Sassを使っている方でmixinとかfunctionをあまり利用してないという方は参考にしてみてください。 ブレークポイントの指定 おそらくmixinで最も利用されているのはレスポンシブでのブレークポイントの指定だと思います。 $breakpoints: ( 'xs': (min-width: 0), 'sm': (min-width: 576px), 'md': (min-width: 768px), 'lg': (min-width: 992px), 'xl': (min-width: 1200px), 'xxl': (min-width: 1400px) ) !defau
最近Sassを使ってないなぁって話
2023年10月26日 Webサイト制作 初学者向けの記事やSNSの投稿で「Sassはマジで必須！」なんて書いているのを見かけますが、私の場合、そういえば最近は素のCSSばかりでSassは使っていないなーと思ったので記事にしてみます。私自身Sassが大好きでずっとお世話になっていましたが、CSSの進化も著しく、使い所があまりなくなってきているんですよね。 ↑私が10年以上利用している会計ソフト！ 変数やネスト、計算はCSSだけでOK 過去記事「Sass不要！CSSだけでも変数やネスト、演算子が使えるよ！」でも書いたとおり、Sassのメリットでもある変数やネスト、数値の計算はCSSだけでも可能です。 変数は過去記事「CSSで変数（カスタムプロパティ）を使ってみよう」で紹介したように、メディアクエリーによって柔軟に変化させたい時は、SassよりもCSSのカスタム変数の方が便利です。計算式を使い
本記事は、TechFeed Experts Night#26 〜 Web標準技術最前線 ー HTML/CSS/JSの「いま」のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 「2023年の Web 開発のベースライン」というタイトルで発表させていただきます。Web のエンジニアリングに関わって10年ほど経ちますが、フロントエンドが領域として成立して、多くの変遷を遂げる様を見てきました。それらを振り返りながら「今の Web 開発の現在地がどこなのか」みたいな話をできればと思います。 改めまして泉水と申します。株式会社ハウテレビジョンでプロダクト部門を担当しております。事業計画を引いたり、いろんなことをやっております。 今日のトークの目的としては、
まだ間に合う！node-sass（LibSass）から sass（Dart Sass）への移行 - Sansan Tech Blog
こんにちは。 Eight で エンジニアをしている鳥山（@pvcresin）です。 違う違うと自分に言い聞かせていますが、おそらく花粉症になってしまいました 🥺 在宅勤務で良かったです。 今回は Sass のコンパイルに使用しているライブラリを node-sass（LibSass）から sass（Dart Sass）に移行した話をしたいと思います。 Sass 実装三銃士 Sass の実装としては、以下の 3 つがあります。 Ruby Sass LibSass Dart Sass まずは移行作業の話の前に、各実装について簡単に振り返ってみたいと思います。 Ruby Sass Ruby Sass は Sass の最初の実装でした。 発表された 2006 年当時、Ruby のエコシステムは急成長しており、すぐに多くの人に使われるようになりました。 しかし、徐々に Ruby 製であることに起因す
Sass のテストコードを書くと便利
こちらは CSS Advent Calendar 2022 22 日目の記事です。 こんにちは、家計簿プリカ B/43を運営する株式会社スマートバンクでデザイナーをしている putchom です。 CSS Advent Calendar ではありますが、今回は Sass のテストコードを書くと便利という話をします。 普段私はデザインシステムを設計する仕事をしています。 家計簿プリカ B/43 は iOS・Android アプリでプロダクトを提供していますが、サービスをプロモーションするページ（ https://b43.jp/ ）の Web アプリケーション向けには、ブランドを反映したコンポーネントライブラリを用意する必要があり、そのためにわりと複雑な Sass の関数を書くことがあります。 そのような場合、より正確なロジックを組み立てたり、何か実装に変更があった場合にバグを検知したくなりま
SassからCSS Modules、そしてstyled-componentsに乗り換えた話｜食べログ フロントエンドエンジニアブログ
この記事は食べログアドベントカレンダー2020の2日目の記事です。 こんにちは。食べログFE（フロントエンド）チームの金野です。 以前の記事でもご紹介しました通り、現在食べログは、jQuery+Railsだったフロントエンド環境をReact/TypeScriptに置き換えるリプレースを進めています。 CSSもSassからCSS Modulesを経てstyled-componentsに移行中です。 今回は、「どうしてその技術を選んだか」という技術選定の経緯や、どのような規約で運用しているかをご紹介します！ なぜリプレースを始めたのかまず、CSSの技術選定について触れる前に、リプレースの目的について話さなくてはいけません。 食べログは今年で開設から15年となるサービスです。システムも組織も巨大で、且つ複雑な機能が多くあります。 特にフロントエンドは場当たり的な実装も多く、技術的負債が開発時のボ
React + esbuildの開発環境にSASSを導入する - KAKEHASHI Tech Blog
こんにちは！カケハシにて薬局と患者の関係性を向上させるためのツールである 患者リスト というWEB業務アプリケーションを開発している小室と申します。 本プロダクトのフロントエンドの開発環境としては、React + esbuildを採用しており、採用の経緯や実践している環境構築方法などは以下の通り、TechPlayやQiitaなどに記事を投稿してきました。 TechPlay: 新規事業プロダクト開発時の技術選定どうやった？ スライド Qiita: esbuild + React(TS) で実現する超軽量な開発環境 しかしながら、esbuildは標準でsassに対応しておらず、今までの環境ではCSSを利用していたのですが、プロダクトの成長と共にCSSで書き続けることが苦痛になってきました。 そこで、本記事では React + esbuildの爆速開発環境に、さらに sass を導入していく方法
The time has finally come to retire Node Sass. This Node.js wrapper for LibSass was the first official Sass compiler available in the JavaScript ecosystem and was a huge part of Sass growing beyond the scope of the Ruby community where it originated, but it hasn't received a new release in a year and a half and the most recent set of maintainers no longer have the bandwidth to continue updating it
WEBデザイナーであれば1度は「Sass」という言葉を聞いたことがあるのでは？と思います。今回は「Sassには興味があるけどまだ導入できていない」、「そもそもSassって何？」という方向けに、Sassの入門的な記事を書いてみました。 結論から先に言うと、初めてCSSを覚えた時のような新鮮な気持ちになり、コーディングがめちゃくちゃ楽しくなります。さらに、通常のCSSでのコーディングよりはるかに作業効率が向上しますので良いことづくし！導入しないのはもったいないです。 Sassとは？ そもそも「Sass」とは何でしょうか？ Sassは「Syntactically Awesome StyleSheet」の略です。 Syntactically ＝ 文法的に Awesome ＝ すごい StyleSheet = スタイルシート という意味です。名前ですでに「すごい」と謳っていますね。 さらにSassは
Dart Sass（@use）の基本的な書き方と@importから乗り換える方法 | HPcode（えいちぴーこーど）
Sassでファイルを呼び出す際に使っていた@importは廃止される予定でして、代わりに「@use」「@forward」を使うように推奨されています。自分も重い腰を上げて@useを使ってみました。 （※ Google日本語翻訳） Dart SassとLibSassの両方がモジュールシステムのサポートを開始してから1年後、またはDart Sassがモジュールシステムのサポートを開始してから2年後のいずれか早い方（遅くとも2021年10月1日）に、@importグローバルコアライブラリ関数呼び出しと同様に非推奨になります。それはモジュールを通して作ることができます。 この非推奨が発効してから1年後（ 遅くとも2022年10月1日）、@importほとんどのグローバル機能のサポートを完全に終了します。これには、すべての実装のメジャーバージョンリリースが含まれます。 https://sass-la
Dart Sass (scss) の基本的な使い方 Sass の公式サイトの Dart Sass のドキュメントを元に作成した基本的な使い方に関する覚書です。 公式に推奨されている実装環境が Dart Sass になって、@import や除算演算子としてのスラッシュの使用が非推奨（将来的には廃止）になり、@use や @forward が導入され、Sass 関数からビルトインモジュールへ移行されるなどの変更（Breaking Changes）があったため内容を書き換えました。 2021年12月21日 Dart Sass (scss) の基本的な使い方 Sass は Syntactically Awesome Style Sheets (構文的に素晴らしいスタイルシート) の略で、CSS を便利に使えるように拡張した言語です。 Sass には SCSS 構文とインデント構文（Sass 構文
Google ChromeのDevToolsがAngular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応
Google ChromeのDevToolsがAngular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応 GoogleはすでにリリースしているWebブラウザのChrome 110と現在開発中のChrome 111に搭載されているDevToolsで、Angular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応したことが明らかになりました。 2月16日付けで公開されたブログ「What's New in DevTools (Chrome 111)」では、Chrome 111で、Angularのシンタックスハイライトに対応したことが「Better syntax highlight for Angular」の項目で紹介されています。 下記のサンプルでは、例えば2行目のダブルクオーテーション内の値などがAngul
sassc-railsを利用している我々は、Sassの@importの非推奨化をどのように乗り越えていくか
2022年10月22日 Kaigi on Rails 2022 で発表したスライドです。 https://kaigionrails.org/2022/talks/mh4gf/ 参考実装: https://github.com/MH4GF/css-bundling-rails-dartsass-d…
webpack を使って Sass をコンパイルする方法 Sass を webpack を使ってコンパイルする方法の覚書です。webpack は JavaScript だけではなく、CSS や Sass をバンドルすることができます。 webpack 5 で新しく導入された Asset Modules など内容を version 5 に合わせて書き換えました。また、PostCSS Preset Env の使い方も追加しました（2022年1月5日）。 以下は Node.js がインストールされていることを前提にしています。また、主なパッケージのバージョンは以下になります（環境は Mac での例になります）。 sass（dart-sass）：1.45.2 webpack：5.65.0 webpack-cli：4.9.1 webpack-dev-server：4.7.2 node: 16.13.
Visual Studio Code 通称「VSCode」で、Sass（Scss）を自動でコンパイルしてCSSに変換する方法をご紹介します。 セーブするたび自動でコンパイルしてくれるので非常に楽です。 すでに「VSCode」はインストール済みという前提で手順を紹介していきます。 まだインストールしてないよ！という方は、下記リンクよりインストールしてください。 Sass（Scss）の自動コンパイルに使用するプラグイン・Live Sass Compiler ひとつプラグインを入れるだけで、自動でコンパイルできるようになるとは、、 VSCodeめちゃくちゃ便利ですね。 Live Sass Compilerのインストールから設定まで全ての手順1.Live Sass CompilerをVSCodeに追加する画面左、黄色の点線のボタンをクリック。 Extension（プラグイン）の一覧が表示されるので
拡張機能「Live Sass Compiler」をインストール 以下の画像にある番号にしたがってインストールします。 SassとAutoprefixの設定をする インスールしたLive Sass Compilerの横にあるギアのアイコンをクリックします。そのまま「拡張機能の設定を構成します」をクリック。 今回のプロジェクトのみ使うのであれば最初に「ワークスペース」を選択してください。次に「settings.jsonで編集」をクリック。 開かれたsettings.jsonに以下のコピペします。 { "liveSassCompile.settings.formats": [ //Sassの出力内容の設定 { "format": "expanded", //nested、compact、compressedのどれかを選ぶ "extensionName": ".css", //style.cssと
Sass: Sass and Native Nesting
The stable release of Chrome 112, which is releasing today, is the first stable browser to add support for the new native CSS nesting feature. This feature—inspired by Sass’s nesting—adds the ability to nest style rules in plain CSS, and even uses Sass’s convention of & to refer to the parent selector. We here at Sass HQ are honored every time our language design inspires improvements in CSS itsel
【コーダー向け】ViteでHTML（ejsライク）・Sass・JSな普通のコーディング環境を作ってみた
VueやReactは使えないけどViteの爆速環境はとても魅力的！ ということでモダン開発ではないWebサイトコーディングでもなんとか恩恵にあやかれないかと思い調べてみた備忘録です。 コーダー向けの環境構築は殆ど情報が出まわっていないようなので、同じように思っている方の一助になれば良いなと思い今回の構築例を記事にまとめることにしました。
今回はSassの@useと@forwardを使ったサイト設計について説明します。 前提条件 非推奨予定の@importは使わない@useと@forwardを使ったDart Sassを採用 説明環境は以下 macOS Catalina v10.15.5Visual Studio Code v1.57.0 今後は@importを使ったファイルの読み込みが非推奨になるため、@useと@forwardを使ったDart Sassに切り替える必要があります。 @importは遅くとも2021年10月1日には非推奨@importは遅くとも2022年10月1日にサポート終了 さっそくFLOCSSのファイル構成を使って@useと@forwardの使い方を説明していきます。FLOCSS構造やサイト設計については以下を参考にしてみてください。 |_sass/ |- global | |- setting/（変数
Sass、別に言うほどいらない説
Web制作 web制作の領域では、主にLPやコーポレートサイトを開発することになります。 LPや小規模のコーポレートサイトでは恩恵が少ない LPや小規模のコーポレートサイトにおいては、Sassを使うメリット以上にデメリットの方が大きいと思っています。 そもそもSassの利点としてよく挙げられるのは、 セレクタのネスト（入れ子）ができる 変数が使える mixinが使える ファイル分割ができる 中括弧がいらない などでしょうか。 上の機能があることによって色やフォントの管理が一元化されたり、頻出のプロパティ群をまとめて使い回しやすくしたりすることが実際の開発上における利点です。 一方でデメリットとしては 設計/管理工数がかかる 開発環境を用意するのがやや面倒 などが挙がると思います。（一回設定を構築してしまえば使いまわせば良いのかもですが。） LPなどにおいては、単純にメリットの部分の恩恵があ
Sassを使わずにPostCSSだけでCSSを書く理由
はじめに Sass とは Sass は現在の CSS のコーディング環境のデファクトスタンダードである。 SASS 記法と SCSS 記法の 2 種類がある。（現在主に利用されているのは SCSS 記法） CSS を効率よく書くための便利な機能が含まれている。 コンパイルライブラリはnode-sass(libsassに依存)が最もシェアが多い。 libsass が先日deprecatedになったため、今後はsass(旧:dart-sass)のシェアが伸びると予測される。 PostCSS とは PostCSS 自体は、CSS を加工しやすいようにパースし、結果を CSS として出力する機能のみ提供する。 最新の CSS の polyfill として利用できるものから、ジョークプラグインまで様々なプラグインが公開されている。 Sass との組み合わせでもよく利用される。Autoprefixer
【詳細版】Viteでコーダーのコーディング環境（HTML（ejsライク：ハンドルバー化）・Sass・JS）を作る - Web production note
※本記事はejsを利用していません。 代わりにHTMLファイルをejsと同等の機能を追加する（ハンドルバー化する）プラグイン vite-plugin-handlebars を利用しています。ejsは以下プラグイン vite-plugin-ejs を利用すると実装できるようです。 github.com GitHub – trapcodeio/vite-plugin-ejs: Vite: Use Ejs in your entypoints i.e index.html Vite: Use Ejs in your entypoints i.e index.html. Contribute to trapcodeio/vite-plugin-ejs …
Formats コンパイル後のCSSファイルのフォーマット・ファイル名・保存場所を指定できます。3項目を1つのセットとして、複数のセットを設定できます。 たとえば「コンパイル結果の確認用」と「軽量化した読み込み用」の2パターンを、root直下のcssディレクトリに出力したい場合は以下のように設定します。 "liveSassCompile.settings.formats": [ // 確認用の読みやすいフォーマット { "format": "expanded", "extensionName": ".css", "savePath": "/css/" }, // 読み込み用の軽量化されたフォーマット { "format": "compressed", "extensionName": ".min.css", "savePath": "/css/" } ] 項目別に1つずつ説明します。 fo
【WordPress】Sass の @import が非推奨になるから、「おじいちゃん平成くさーいｗｗｗ」とキッズから馬鹿にされる前に遅ればせながら滑り込みで @use に書き換えてみたよ【editor-style.css】
【2022/09/09 追記】タイトルを編集しました。 いつものように Twitter を見ていたら（仕事中じゃないですよ）こんな投稿が目に飛び込んできた。 あーそうなのよ、そうなんですよ…。そいつはわかっちゃいるんです...
最初の構成ファイルとしては、以下のように配置していますので、同様に進めたい方は作成しておいてください。 dist・・・ビルド後の出力先フォルダsrc・・・ビルド前の出力元フォルダindex.html・・・静的HTMLファイルwebpack.config.js・・・webpackの設定ファイル index.htmlは以下のように配置しています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack Test</title> <link rel="stylesheet" href="dist/css/style.css"> </head> <body>
CSSのmin()やmax()関数がSassでIncompatible unitsエラーになる｜たかもそ／Web Creator.
ここ数年の CSS の進化は目覚ましく、それにより新たな問題が起きるようになりました。Sass には与えられた引数のうち最小値を返す min() 関数と与えられた引数のうち最大値を返す max() 関数があります。 しかし、CSS にも標準で min() 関数と max() 関数が実装されたことにより、関数名の衝突が起きてしまいます。 色々なエラーとはいっても、普通に使う分には問題ありません。 .selector { width: min(1px, 2px); }これを Sass でコンパイルすると、 .selector { width: 1px; }となります。しかし、Sass では解釈できないような vw や vh 単位を使うとエラーが起きます。 .selector { width: min(1px, 1vw); }コンパイルすると、Incompatible units: 'vw' a
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![「[作って学ぶ] ブラウザのしくみ」を読んだ - 覚書](https://cdn-ak-scissors.b.st-hatena.com/image/square/e055f35121ce76b337752125aa49685dbcf68962/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F0f01b79209bc88a0e73a475a9bbe1a2356b4311a%2Fbackend%3Dimagemagick%3Bheight%3D1300%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fm.media-amazon.com%252Fimages%252FI%252F41AZLrZN7KL._SL500_.jpg)
よりよいCSSを書くための、CSS / Sass (SCSS) 30のルールとその理由
Sassなしで入れ子が可能に。CSSネストが全ブラウザ対応
そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています
Sassを@importから@useに置き換えるための手引き - kojika17
CSS設計・Sassディレクトリ管理の標準化（CROCSS） - Qiita
【全30項目】コーディング時のルールや思想（HTML/CSS/Sass/JSなど）
Svelteとは？Reactの比較 / TypeScriptと Sassの導入方法｜sumi｜note
Sassのモジュールシステムを@importから@useに移行する方法を考えてみた
Dart Sass、使ってる？Preprosを使えばコンパイルも楽勝！
エディタを VSCode に変えてSASSのコンパイルとライブリロードでサクサク開発 – YATのblog
Sass不要！CSSだけでも変数やネスト、演算子が使えるよ！
Sass製SVG爆速表示ライブラリのご紹介 - dwango on GitHub
よく使うSassのmixinとfunctionのスニペットをまとめてみた
Sass は役目を終えつつある!? 2023年、Web 開発の「ベースライン」とは
Sass: Node Sass is end-of-life
Sassは絶対使った方が良いよ！使い方入門編 | Web Design DAY
SASS (scss) の基本的な使い方
webpack を使って Sass をコンパイルする方法
VSCodeでSass(Scss)を自動コンパイルする簡単な設定方法
「Live Sass Compiler」の設定方法 - VScodeでSassを書く
Sassで@useと@forwardを使ったサイト設計 - @importから切り替える手順
Visual Studio CodeでSassをコンパイル | 株式会社こまり
【コーダー向け】webpackでSassをコンパイルする方法 | HPcode（えいちぴーこーど）
news.yahoo.co.jp
www.narutabi.com
www.shimotsuke.co.jp
full-fun-life.com
meta-company.store
www.tokyo-sports.co.jp