SassのMixinを使って、単位、幅の値を自動的に計算 ｜ スターフィールド株式会社
はじめに この記事では、SassのMixinを使って、CSSのプロパティに値を適切な単位で自動的に適用する方法を説明します。SassはCSSの拡張言語であり、Mixinは再利用可能なスタイルのブロックを定義する機能です。Mixinを使用すると、同じスタイルを複数の場所で使い回すことができます。 具体的には、ビューポートの幅に応じて値を調整するためのVW単位や、親要素やコンテキストの幅に応じて値を計算するためのパーセンテージ単位を自動的に適用します。これにより、レスポンシブデザインを実現し、異なるデバイスや画面サイズに対応したスタイルを簡単に作成できます。 SassのMixinを使用して、VW単位やパーセンテージ単位を自動的に計算する方法を詳しく解説します。この方法を理解し、実際のプロジェクトで活用することで、効率的で柔軟なスタイルシートの作成が可能になります。 以下の項目を含めて、Sass
そろそろSassとはさよなら、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よ、さよ
Dart Sassに移行（Gulp / Node 16 / glob対応）| cumak
npm ERR! code 1 npm ERR! path /hoge/node_modules/node-sass LibSassとNodeSassが非推奨になったからです。 知っていました…わかっていてちょっと後回しにしてましたが、ついにNodeのバージョンアップでひっかかりました。 これを機にDart Sassへ移行しましたが、途中で Nodeのバージョンが16だとgulp-sassをインストールできない@importを@forwardにしたのでgulp-sass-globがきかない と、つまづきポイントがあったので、備忘録を残しておきたいと思います。 Dart Sass、gulp-sass、Node Sass node-sassは、sassをC/C++で実装したライブラリであるLibSassへ、Node.jsのバインディングを提供するライブラリです。 gulp-sassはnode-
Gulpで始めるwebpack 4入門 - Qiita
webpackは複数ファイルのJavaScriptファイルやCSS、画像ファイルをモジュールとして取り扱う為の人気のツールです。2018年7月時点の最新バージョンは4.16（いちろく、ではなくじゅうろく）です。 ▲ webpackの公式サイト webpackはJavaScriptのモジュールの取り扱いに特に便利で、機能ごとに分割したJavaScriptをimport()やrequire()を使って読み込めるようになります。ビルドツールGulpと組み合わせれば、大規模なプロジェクトでも見通しのよいタスクを定義可能です。 webpack 4をGulpで使用するには一工夫が必要なので、本エントリーで紹介します。 なお、webpackについて詳しくは記事「最新版で学ぶwebpack 4.8入門 - JavaScriptのモジュールバンドラ - ICS MEDIA」を参照ください。 環境準備 Gul
最新版で学ぶwebpack 5入門 - スタイルシート(CSS/Sass)を取り込む方法 - ICS MEDIA
ウェブのフロントエンドエンジニア開発で人気を集めるモジュールバンドラーのwebpack（ウェブパック）。webpackにはJavaScriptファイルのバンドルだけではなく、スタイルシート（CSSやSass）のバンドルもできます。ICS MEDIAの記事「最新版で学ぶwebpack入門」では、webpackの基本的な使い方を解説しましたが、この記事ではスタイルシートに焦点をあてて解説します。 ※webpackを利用するには事前にNode.jsをインストールしておいてください。この記事では2021年5月現在最新のNode.js v14、npm 7と、webpack 5をもとに解説しています。 この記事で説明していること CSSをバンドルする利点 CSSのバンドル方法 Sassのバンドル方法 Sass内の画像もバンドルする方法 容量の閾値で画像のバンドルを制御する方法 PostCSS(Auto
絶対つまずかないGulp 5入門 - インストールとSassを使うまでの手順 - ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 5に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18〜v20で動作検証をしています。 ※Gulp
普通のWebデザイナーがSass+gulp.jsでいい感じのコーディング環境を手に入れるまで ～前編～ - 無駄と文化
この記事は前後編です。後編はこちらに、 普通のWebデザイナーがSass+gulp.jsでいい感じのコーディング環境を手に入れるまで ～後編～ - 無駄と文化 弊社ではサイト制作も行っていますが、サイトの制作時にいわゆるデザインとコーディングでの分業(役割分担)をしていません。 肩書きとしては「Webデザイナー」のみしかないので、Webデザイナーであればデザインとコーディングの両方ができて初めて一人前です。 とはいえ、人によってデザインが得意/コーディングが得意といった得意分野の差は出てきます。 コーディング畑の人が唐突に「Sass使ってWeb書こう！」と提案したとしても、デザイン畑の人から見ればどうしてもとっつきにくいのが現実のようです。 さて、そんな普通のWebデザイナーにSassを使ってもらいたくて、Sassの導入するのに一番いい感じの環境は何なのか一人で考え続けてきました。 結論と
sass-migratorを活用して、node-sassをdart-sassへらくらく変換!! | ブログ | UiDev
現在、Sassは node-sass から dart-sass への移行が推奨されています。@import が非推奨になり、 @use や @forward といった新しいモジュールシステムを使用することが推奨されるようになり、今まで運用していた Sass のコードを書き換えなければいけないという方も多いのではないでしょうか？ 今回は、node-sass を dart-sass へ書き換えるときに便利な sass-migrator というツールを紹介してみたいと思います。 sass-migrator とは sass-migrator とは node-sass などの古い記述で書かれた .scss ファイルを新しいバージョン（dart-sass）の記述に自動的に置換してくれるコマンドラインツールになります。 使い方 sass-migrator を実行するときは、どの記述の移行を行うかどうかと
【最新】SCSSの@importは廃止に！？@useとの違いについて解説！ - PENGIN BLOG
@importとは@importとは分割されたSassファイルを読み込み機能です。 このようにファイル内が分割されていても、@includeで一つのSCSSファイルに統合して、まとめてcssファイルにコンパイルすることができます。 @importの廃止予定時期便利な@importですが、公式で廃止予定であることが明言されています。 （日本語訳） Dart SassとLibSassの両方がモジュールシステムのサポートを開始してから1年後、またはDart Sassがモジュールシステムのサポートを開始してから2年後、いずれか早い方（遅くとも2021年10月1日）に、@importと、モジュールを介して行われる可能性のあるグローバルなコアライブラリ関数の呼び出しを非推奨にします。 この非推奨措置が実施されてから1年後（遅くとも2022年10月1日）には、@importとほとんどのグローバル関数のサ
Sassのモダンなコンパイル環境が3分で作れるParcel入門 - 独自設定ファイルは不要 - ICS MEDIA
ウェブ開発ではSass、TypeScriptなどの言語のコンパイルや、出力ファイルの最適化、ローカルサーバーの起動などさまざまな作業が求められます。現在は、それらの作業を自動化するwebpackやGulp.jsがよく使われています。 webpackにはwebpack.config.js、Gulp.jsにはgulpfile.jsという設定ファイルがそれぞれ必要で、両ツールともその使用方法を覚える学習コストがあります。 Parcelパーセルというツールを使うと、webpackやGulp.jsのような独自の設定ファイルを使うことなく、各種言語のコンパイルやバンドルができるようになります。バンドルとは、複数のファイルを1つにまとめることを指します。Parcelとは、設定ファイルが不要で高速なウェブアプリケーションのバンドルツール。次のようなことが可能です。 Sassのコンパイル Autoprefi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
