Sass: Migrator
The Sass migrator automatically updates your Sass files to help you move on to the latest and greatest version of the language. Each of its commands migrates a single feature, to give you as much control as possible over what you update and when. UsageUsage permalink To use the Sass migrator, tell it which migration you want to run and what Sass files you want to migrate: sass-migrator <migration>
コピペで簡単！GulpでDart Sass入門 |
みなさん、こんにちは。山田です。 Sass界ではDart Sassというものが注目を浴びていると小耳に挟みました。 公式でもこちらを推奨しており、Sassの新機能はこちらから実装されるとか。 記述の方法も変わってくるとなれば、フロントエンドエンジニアとして生きていく上では避けては通れなくなってしまう。 @importが@useに変わる、などの変更点についてはすでに多くの方が記事にしているようなので、今回はコピペでサクッと実行してコンパイルできるような形にしていきたいと思います。 今回はこのような構成にして、コンパイルにはGulpを使用します。 CSS設計はFLOCSSを参考にしていますが、この辺はお好みに合わせて編集してください。 / ├ htdocs (閲覧環境) │ └ css │ └ style.css ├ gulpfile.js ├ package.json └ src/ (開発環
Sassのモジュールシステムを@importから@useに移行する方法を考えてみた
先日、KOJIKA17さんの「Sassを@importから@useに置き換えるための手引き 」という記事を見て、2022年10月ころにはSassで@importが使えなくなる可能性があることを知りました。まだ2年ありますが、新しく取り組むプロジェクトでは@useを使ったモジュールシステムにしたいので、自分が使っている構成の置き換えについて考えてみました。 まずはアイディアをシェアをして叩き台にしてもらうのが目的ですが、他に良い書き方があったらぜひアドバイスいただきたいというのもあります。 試しながら、考えながら書いているので内容は変更される可能性が高いかもしれません。 Sassの新モジュールシステムについて Sassの新しいモジュールシステムについては、上述の記事や SHIFTBRAINさんのブログ がわかりやすかったです。ありがとうございます。 公式の発表と@useと@forwardのド
Sassを@importから@useに置き換えるための手引き - kojika17
Sassの@importルールは、廃止されることが予定されています。 @useや@forwardといったルールに置き換わるのですが、これらは全く新しいシステムです。 これらの知見が溜まってきたのでご紹介します。 @import と 新しいモジュールシステム Sassの初期の方から実装されていた@importは、テキスト形式でSassファイルを読み込むための機能です。便利な機能ですが、CSSの@importと重複しているため、SassなのかCSSなのか一見してわかりにくい側面がありました。 新しいモジュールシステムは、この問題を解消し、Sassをより柔軟に使用できるようにします。 @importではグローバルに指定されていた変数などは、ファイルごとにカプセル化され、ファイルの内容に基づいて解決できるようになりました。 現在、Dart Sassしか新しいモジュールシステムは使えませんが、Lib
超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度
ここ数年起こっているCSSの変化と急速な進歩により、絶え間なくリリースされている膨大な量のオープンソースのツールには驚かされます。 制作時間を節約、短縮できるCSSライブラリやフレームワーク、およびツールは、制作をより手軽に、より簡単にすることを目的に構築されており、理解できていないCSSに関しては学習用ガイドなども数多く提供されています。 このコレクションでは、2018年にリリースされた50種類のお気に入りCSSライブラリ、フレームワーク、リソース、便利ツールをまとめてご紹介します。ユニークなアイデアを形にできるツールがきっと見つかりますよ。 1. CSS レイアウトフレームワーク 2. CSS Flexbox フレームワーク 3. CSS ライブラリ 4. お役立ちCSSユーティリティ 5. オンラインCSSツール/生成ツール 6. CSS画像エフェクトツール 7. CSS学習リソース
最新版で学ぶwebpack 5入門 - Bootstrapをバンドルする方法 - ICS MEDIA
モジュールバンドラーwebpack（ウェブパック）はJavaScriptだけでなくCSSもバンドルできるツールです。タスクランナーGulpで対応していたことの多くはwebpackで置き換えが可能。JavaScriptエンジニアだけでなく、CSSコーダーにも利用が拡大しているのではないでしょうか？ 前回の記事「webpackにスタイルシートを取り込む方法」ではCSS・Sassとwebpackの連携方法について解説しました。今回は応用としてCSSフレームワークのBootstrap 5をwebpackで利用する方法を解説します。最小構成と、応用構成の二通りについて説明します。 ▲Bootstrapの公式サイト ※この記事は2023年3月現在最新のBootstrap 5、webpack 5、Node.js 19で解説しています。 Bootstrap とは BootstrapとはもとはTwitter
絶対つまずかないGulp入門。インストールからSassのコンパイルまで – ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 4に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18とv19で動作検証をしています。 ※Sass
「Bootstrap 4」が正式リリース――IE10以降、iOS 7以降、Android 5.0以降に対応
2018年1月18日（米国時間）、オープンソースCSSフレームワーク「Bootstrap」の最新バージョン「Bootstrap 4」が正式リリースされた。最新バージョンでは、CSSメタ言語を従来の「LESS」（Leaner CSS）から「Sass」（Syntactically Awesome Stylesheets）へ変更したり、CSSのFlexboxをデフォルトで有効にしたりするという2つの主要なアーキテクチャ変更を中心にさまざまな変更が行われている。 Bootstrapチームは、変更の狙いについて、「新しいCSSプロパティや、依存関係の低減、モダンなブラウザで採用されている新技術を推進することで、Web開発コミュニティーの前進を着実に後押しすることを目指した」と説明している。 Bootstrapは、CSSファイルやJavaScriptのスクリプトファイル、フォントなどから成る。統一され
Sass(SCSS)のmixinを使って、:nth-child疑似クラスなどを指定しやすくする便利スタイルシート「Family.scss」 - NxWorld
CSSでn番目の要素に適用したいときなどに利用する:nth-child疑似クラスや:nth-last-child疑似クラスですが、先頭または最後からn番目になどの単純な指定ではなく、ちょっと複雑な指定をする際は指定方法を考えることがあると思います。 「Family.scss」はそんな面倒な指定を楽にしてくれるスタイルシートで、利用するためにはSass(SCSS)を使っているのが条件にはなりますが、ちょっと複雑そうな指定もわかりやすく容易な記述で指定することができます。 使い方 まず、必要なSCSS (Family.scss) を配布サイト上部にある「DOWNLOAD」ボタン、またはGitHubからダウンロードするなどして読み込みます。 あとは、普段mixinを使うときと同様で@include mixin-name(n)という感じで記述すれば利用することができ、引数の部分は場合によっては空に
CSSのリファクタリングでした5つのこと
こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ) 今回は、現行サービスのCSSをリファクタリングした話とどんな影響があったかをまとめたいと思います。 もくじ 経緯とか 実際にした5つのこと まとめ 経緯とか 開発期間約9ヶ月、リリースして1年の現行サービスのCSSが大変なことになっていたので リファクタリングすることにしました。 ちなみにリファクタリングとは、 ソフトウェア開発では、ソースコードの作成が進むにつれて、中途での設計変更やバグフィックスなどでプログラムは冗長で汚いものとなっていくことが多い。これらの問題点を解決し、将来の仕様変更に柔軟に対応できるようソースコードの手直しを行うことを「リファクタリング」という。 リファクタリングとは｜refactoring - 意味/解説/説明/定義 ： IT用語辞典 ということのようです。 問題点は大きくわけて2つ。 1. コーディン
CSS 設計の長い夢 - ペパボのフロントエンドスタンダード
フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 スタイルシートの夢 (1) 予測しやすい (2) 再利用しやすい (3) 保守しやすい (4) 拡張しやすい 代表的な CSS 設計手法 既存プロジェクトの CSS に立ち向かう！ (0) 流れ (1) 既存の CSS ファイルを元に SCSS ファイルに変換する (2) イニシャライズ CSS や共通の箇所のスタイルを分離する (3) CSSLint を使って、修正しやすいところから整理していく (4) コンパイル (5) スタイルのスコープ（あ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog