【WordPress】Sass の @import が非推奨になるから、「おじいちゃん平成くさーいｗｗｗ」とキッズから馬鹿にされる前に遅ればせながら滑り込みで @use に書き換えてみたよ【editor-style.css】【2022/09/09 追記】タイトルを編集しました。 いつものように Twitter を見ていたら（仕事中じゃないですよ）こんな投稿が目に飛び込んできた。 あーそうなのよ、そうなんですよ…。そいつはわかっちゃいるんです...
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>
node-sass（LibSass）からsass（DartSass）への移行 - Photosynthesic blog
こんにちは、みみです。 車の中から書いています。移動の車の中でできる事ってないかなあと思って、ブログ更新をば。しかし間が空いてしまって書き方を忘れていますね。というかiPhoneからだとうまく書けないかも…。いや車の中だからか…。 閑話休題、先日、LibSassとDartSassの戦いに終止符が打たれたとか聞いたので、久々に #npmライブラリをおさらい をしてみたいなというお話。 何かというと、Sassの公式ブログで、LibSassは非推奨宣言されまして。 Sass: LibSass is Deprecated ぽやんとした頭（大体いつもそう）で読んでて最初は、ちょっと前から個人的にはPostCSSに完全移行していたのでまあスルーでいいかと思ったんですが、よく考えたらまだまだnode-sass使い倒してるリポジトリ一杯あったな…と思いまして。 そちらはPostCSS完全移行でSassファ
コピペで簡単！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
Dart Sass、使ってる？Preprosを使えばコンパイルも楽勝！
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のコンパイル
Nuxt + Stylelint + Prettier + VSCode で、保存時に SCSS を自動フォーマットする - Toragramming
Nuxt + Stylelint + Prettier + VSCode で、保存時に SCSS を自動フォーマットする 動作確認した環境 OS Windows 10 Pro Editor VisualStudioCode ( v1.14.1 ) Package Manager Yarn Packages Create Nuxt App ( v2.12.0 ) Nuxt ( v2.11.0 ) Stylelint ( v13.0.0 ) やることまとめ Nuxt パッケージ導入 yarn create nuxt-app # 設定は自由に yarn add -D node-sass sass-loader yarn add -D stylelint@13.0.0 @nuxtjs/stylelint-module yarn add -D stylelint-config-standard st
エディタを VSCode に変えてSASSのコンパイルとライブリロードでサクサク開発 – YATのblog
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
Adobe XDでアセットをSCSS用に変数とmixinを書き出すプラグインを開発する - Qiita
はじめに AdobeXDを使ってデザインを作ってると「アセットをこのままCSSに書き出せたらなぁ」って一度は思いますよね。自分は思いました。 2019年5月のアップデートで今までの「シンボル」の概念から「コンポーネント」という概念に変わり、よりコンポーネントの扱いが便利になりました。 今回はAdobeXDで登録したカラーアセットとフォントスタイルをSCSSで使える変数やmixinに書き出すプラグインを作ってみました。 動作は下の動画のようになります。 開発環境 AdobeXDのプラグインはES2018で開発ができます。 今回はTypeScriptで開発をしました。 理由はいくつかあるのですが、大きな理由としてAdobe公式の型定義ファイルが用意されているのでコード補完が効くという点があります。かなり独自のクラスが多いのでTypeScriptで開発をすることをおすすめします。 また、今回はダ
2020年版：Gulp4でSassとPugをビルドしてBrowserSyncでライブプレビューする - Qiita
const gulp = require('gulp'); const notify = require("gulp-notify"); const plumber = require("gulp-plumber"); const sass = require('gulp-sass'); const pug = require('gulp-pug'); const autoprefixer = require('gulp-autoprefixer'); const uglify = require('gulp-uglify'); const browserSync = require('browser-sync'); //setting : paths const paths = { 'root' : './dist/', 'pug' : './src/pug/**/*.pug', 'ht
カオス化したスタイルシートから卒業！CSSでカラーを管理する効率的な方法
テキスト、ボーダー、背景、アクセント、エラーなど、カラーをCSSでどのように定義すると効率的に管理できるのか、保守が簡単になるのか、そのテクニックを紹介します。 Create your design system, part 3: Colors by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに カラーをCSSで効率的に管理するために セマンティックにするか、宣言型にするか 基本的なカラーパレットの作成 セマンティックカラーの追加 このアプローチを採用する理由 テーマに使用するカラー はじめに 元々は、近日公開予定の「Web Components」のために作成したものですが、グローバルのCSSとして利用できるので、一足先に公開します。 Web Components|CodyHouse カラーをCS
保存しておくと便利！CSS Flexboxでよく使用するコードがまとめられたCSSのスニペット集 | コリス
ヘッダでロゴを左寄せにしたり、検索窓を右寄せにしたり、画像をページの中央に配置したり、ページ上のあらゆる要素を揃え整列させるFlexboxをベースにしたスタイルシートのスニペットを紹介します。 サイトやブログの全体で利用できるユーティリティのclassとして、保存しておくと便利なスニペット集です。 Speed up alignment in CSS with Flexbox utility classes by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSで面倒なのは要素を整列させること Flexbox以前 Flexboxで簡単に CSSで面倒なのは要素を整列させること CSSで面倒なのは、要素を整列させることでした。しかし、Flexboxが登場して、理にかなった方法で整列させることが可能になりまし
[CSS]見出しや本文のfont-sizeとline-heightの単位にremを使用して、レスポンシブ対応にするスタイルシート
// Function for converting a px based font-size to rem. @function calculateRem($size) { $remSize: $size / 16px; //Default font size on html element is 100%, equivalent to 16px; @return #{$remSize}rem; } @function calculateNum($lheight) { $numSize: $lheight; //Default font size on html element is 100%, equivalent to 16px; @return #{$numSize}; } // Mixin that will include the fall back px declaratio
![[CSS]見出しや本文のfont-sizeとline-heightの単位にremを使用して、レスポンシブ対応にするスタイルシート](https://cdn-ak-scissors.b.st-hatena.com/image/square/68f33993450e46d15bbdfbb5207d0da2c88fffc7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018071905-02.png)
超便利！確認しておきたい最新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
Webpackを使ってSassをビルドする - Qiita
var path = require('path'), ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = [{ context: path.join(__dirname, 'src/css'), entry: { style: './style.scss' }, output: { path: path.join(__dirname, 'public/css'), filename: '[name].css' }, module: { loaders: [ { test: /\.scss$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?-url&minimize&sourceMap!sass-loader'
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - masatojpn/snug: A simple and clean Sass/flexbox-based grid framework
[CSS]見出し、本文、リストなど、文字周りをrem指定で簡単に設計できる便利なオンラインツール![[CSS]見出し、本文、リストなど、文字周りをrem指定で簡単に設計できる便利なオンラインツール](https://cdn-ak-scissors.b.st-hatena.com/image/square/debac5ced80c80ee248dfc210d9fa594af0e6ca3/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080310.png)
