そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています

2024/04/02 127 users Has カスケードレイヤー ネスト ワークフロー 変数

2024年になり、CSSは急速な進化を遂げています。中でもワークフローにも影響を大きく与えるのが、Sassに代わる新機能の数々です。 ネイティブのCSSで変数を扱えるようになり、ネストや:is()疑似クラスや:has()疑似クラスやコンテナクエリ、そしてカスケードレイヤーなどの新機能がモダンブラウザのすべてにサポートされ... 続きを読む

MicroCMSとViteで作るかんたん静的サイト | DevelopersIO

2023/10/11 12 users DevelopersIO ビルドツール vite HTML

この記事では、ヘッドレスCMSを使ってHTMLコンテンツを生成する手順を紹介します。 前回の記事（MicroCMSと11tyで作るかんたん静的サイト）ではAPIデータの取得とHTMLの生成のみを行いましたが、今回はSassを使うためにビルドツールであるViteを導入して、より実制作に近い環境での検証をします。 ビルドツールであればG... 続きを読む

CSS・TypeScriptの相性が抜群。vanilla-extractが最高のCSS開発体験をくれた

2023/07/13 116 users vanilla-extract React state 相性

私はこれまで、 React ・ Next.js でのスタイリングには、CSS Modules + Sass を使っていましたが、最近は vanilla-extract を使うようになりました。TypeScript との相性が良く、長い間求めていたCSS開発体験が実現できるためです。 vanilla-extract とは、CSS を TypeScript で型安全に書ける CSS in JS です。 State ... 続きを読む

CSSのネストがついにブラウザで使用できるようになった！ 基礎知識、便利な使い方を詳しく解説

2023/04/19 27 users ネスト CSS CSSプリプロセッサ ネス ブラウザ

CSSのネストがついに、Chrome 112, Edge 112にサポートされました。 ネストはSassなどのCSSプリプロセッサですでに使用している人も多いと思いますが、CSSのネストは仕様が少し異なります。とは言え、CSSでネストが使用できるようになるのは、嬉しいことですね。 CSSのネストの基礎知識、便利な使い方を紹介します。ネス... 続きを読む

Sass不要！CSSだけでも変数やネスト、演算子が使えるよ！

2023/04/12 11 users ネスト 変数 CSS 演算子 数値

2023年4月12日 CSS CSSをより便利に、効率よく記述できるSass。利用しているWebサイト制作者も多いでしょう。近年はCSSでもSassのような書き方ができるようになってきているので、Sassとの書き方の違いとともに紹介します！ 何度も利用する値を変数として定義し、使いまわせます。よく利用する数値や、色が連想しづらい... 続きを読む

Sass: Sass and Native Nesting

2023/03/30 6 users

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 ... 続きを読む

Google ChromeのDevToolsがAngular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応

2023/02/21 7 users シンタックスハイライト Dart less jsx SCSS

Google ChromeのDevToolsがAngular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応 GoogleはすでにリリースしているWebブラウザのChrome 110と現在開発中のChrome 111に搭載されているDevToolsで、Angular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応したことが明らか... 続きを読む

Sass のテストコードを書くと便利 - putchom

2022/12/22 13 users putchom デザイナー テストコード デザインシステム

こちらは CSS Advent Calendar 2022 22 日目の記事です。 こんにちは、家計簿プリカ B/43を運営する株式会社スマートバンクでデザイナーをしている putchom です。 CSS Advent Calendar ではありますが、今回は Sass のテストコードを書くと便利という話をします。 普段私はデザインシステムを設計する仕事をしています... 続きを読む

Sassなしで入れ子が可能に。CSSネストがブラウザにやってきた

2022/11/18 168 users ネスト CSSネスト CSSコーディング CSS ブラウザ

先日リリースされたGoogle Chrome Canaryで、CSSでネスト（入れ子）ができるようになりました💐 次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わないCSSコーディングを大きく変えることでしょう。 続きを読む

【2022年最新】Visual Studio Codeの便利なプラグインまとめ（コーダー・マークアップ・フロントエンドエンジニア視点）

2022/09/22 229 users コーダー vscode SCSS CSS HTML

Visual Studio Code（VsCode）本体のインストール まだインストールされていない方は、以下からVsCode本体をダウンロードしてください。 VsCodeのおすすめプラグイン（コーダー・マークアップ・フロントエンドエンジニア視点） 私が導入しているVsCodeのプラグインを紹介します。 普段の業務では、HTML、CSS、Sass(SCSS)... 続きを読む

よりよいCSSを書くための、CSS / Sass (SCSS) 30のルールとその理由

2022/04/16 206 users SCSS CSS ルール 理由

Webエンジニアを始めて丸2年が経ちました。 複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。 はじめに 長くなってしまった細かい説明はところどころ折りたたんでいます。概要だけで理解できたら飛ばしていただ... 続きを読む

CSS カスタムプロパティによる流動的フォントサイズ

2022/01/21 14 users フォントサイズ FON CLAMP Calc unit

今回は、calc() clamp() min() max() と CSS カスタムプロパティを駆使して、自分で計算する必要がなく、Sass なども不要で CSS のみでの実装を紹介いたします。 使い方と実装解説 デモとソースコード /** * Available vars: * @var --viewport-from: <number> - Number in pixels without the unit. Required if `--fon... 続きを読む

これならすぐ簡単！Web制作者・デベロッパー向け、ポートフォリオ用のHTMLテンプレート -Dopefolio

2021/10/06 15 users フレームワーク ポートフォリオ CSS ライブラリ HTML

Web制作者・デベロッパー向け、ポートフォリオ用のテンプレートを紹介します。 オープンソースで、HTML, CSS, JavaScript, Sassで実装されており、フレームワーク・ライブラリは必要ありません。自己紹介、スキル、プロジェクト、連絡先など、ポートフォリオに必要なコンテンツが用意されており、簡単にポートフォリオを... 続きを読む

Sass: LibSass is Deprecated

2020/10/26 22 users

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 behi... 続きを読む

Svelteとは？Reactの比較 / TypeScriptと Sassの導入方法｜sumi｜note

2020/06/27 12 users redux Vuex Sumi 仮想DOM Style

Svelteとは最近フロントエンドの技術で、ReactやVue.jsに変わって注目を集めているのが Svelte です。下記のような特徴があります。 ・仮想DOMがない ・ファイル拡張子.svelteになる ・svelteファイルに記述されたstyleはスコープ付きになる ・Store管理も内包している（ReduxやVuexのようにインストールしなくてよい） ... 続きを読む

Dart Sass、使ってる？Preprosを使えばコンパイルも楽勝！ | Webクリエイターボックス

2020/06/15 21 users コンパイル コンパイラー 楽勝 import use

2020年6月15日 CSS, 便利ツール 最近Sass界隈が賑わっているように感じます。おそらく「Sassを@importから@useに置き換えるための手引き」という記事でDart Sassダートサスの存在を知った方も多いでしょう。今回はそんなDart Sassをザックリと、そして便利なコンパイラー「Prepros」について紹介します。 Dart Sassとは ... 続きを読む

Sassのモジュールシステムを@importから@useに移行する方法を考えてみた | Rriver

2020/06/01 14 users モジュールシステム Rriver import use 手引き

先日、KOJIKA17さんの「Sassを@importから@useに置き換えるための手引き 」という記事を見て、2022年10月ころにはSassで@importが使えなくなる可能性があることを知りました。まだ2年ありますが、新しく取り組むプロジェクトでは@useを使ったモジュールシステムにしたいので、自分が使っている構成の置き換えについて考... 続きを読む

Sassを@importから@useに置き換えるための手引き | Web Design KOJIKA17

2020/05/25 22 users import forward use 手引き 知見

Sassを@importから@useに置き換えるための手引き 2020-05-26 Sassの@importルールは、廃止されることが予定されています。 @useや@forwardといったルールに置き換わるのですが、これらは全く新しいシステムです。 これらの知見が溜まってきたのでご紹介します。 @import と 新しいモジュールシステム Sassの初期の方から... 続きを読む

エディタをVisual Studio Code（VSCode）に変えてSASS（SCSS）のコンパイルとライブリロードでサクサク開発 – YATのblog

2020/01/30 16 users grep YAT Atom vscode SCSS

2020年 01月 30日 エディタをVisual Studio Code（VSCode）に変えてSASS（SCSS）のコンパイルとライブリロードでサクサク開発 カテゴリ： PCツール タグ：エディタ 一時期 VSCode を使うも Atom に戻っていたのですが、 どういうわけか GREP 検索ができなくなってしまい 再び VSCode を使うことにしました。 どうせなら... 続きを読む

私が「Web制作にはMacが適している」と思う理由 | Stocker.jp / diary

2019/11/07 222 users Stocker.jp diary iPhone Mac 理由

iPhone / Mac 私が「Web制作にはMacが適している」と思う理由 Thursday, November 7th, 2019 【土曜開催】「スマートフォン時代のWebコーディングスクール」開催！PC・タブレット・スマートフォンに対応したHTML・CSSを基礎から学べます！ 【日曜開催】「1日で分かるSassとBEM講座」ではWeb制作で必須となったSassと効率... 続きを読む

Webデザイナー目線で見たiPad版Photoshopの驚きの完成度について | Stocker.jp / diary

2019/11/06 55 users Stocker.jp diary iPhone BEM講座

iPhone / Mac Webデザイナー目線で見たiPad版Photoshopの驚きの完成度について Wednesday, November 6th, 2019 【土曜開催】「スマートフォン時代のWebコーディングスクール」開催！PC・タブレット・スマートフォンに対応したHTML・CSSを基礎から学べます！ 【日曜開催】「1日で分かるSassとBEM講座」ではWeb制作で必須... 続きを読む

2019年10月の、これだけは押さえておきたいWeb関連の動き | Stocker.jp / diary

2019/10/30 28 users Stocker.jp diary Wednesday 基礎

Webニュース 2019年10月の、これだけは押さえておきたいWeb関連の動き Wednesday, October 30th, 2019 【土曜開催】「スマートフォン時代のWebコーディングスクール」開催！PC・タブレット・スマートフォンに対応したHTML・CSSを基礎から学べます！ 【日曜開催】「1日で分かるSassとBEM講座」ではWeb制作で必須となったS... 続きを読む

iMac Retina 5K 2019レビュー: 再び5Kを選んだ理由 | Stocker.jp / diary

2019/10/28 27 users Stocker.jp diary iMac Retina

iPhone / Mac iMac Retina 5K 2019レビュー: 再び5Kを選んだ理由 Monday, October 28th, 2019 【土曜開催】「スマートフォン時代のWebコーディングスクール」開催！PC・タブレット・スマートフォンに対応したHTML・CSSを基礎から学べます！ 【日曜開催】「1日で分かるSassとBEM講座」ではWeb制作で必須となったSassと効... 続きを読む

Web制作で気になることのアンケート結果（2019年版） | Stocker.jp / diary

2019/10/24 33 users Stocker.jp diary Thursday 基礎 必須

Web技術 Web制作で気になることのアンケート結果（2019年版） Thursday, October 24th, 2019 【土曜開催】「スマートフォン時代のWebコーディングスクール」開催！PC・タブレット・スマートフォンに対応したHTML・CSSを基礎から学べます！ 【日曜開催】「1日で分かるSassとBEM講座」ではWeb制作で必須となったSassと効率... 続きを読む

Sassの新しいモジュールシステム - シフトブレイン／スタンダードデザインユニット

2019/09/27 48 users forward use スタンダードデザインユニット 実装

Sassに新しいモジュールシステムが導入されます。具体的には@useと@forwardという2つのルールが登場し、@importルールは将来的に廃止される予定です。現在、Sassのおもな実装としてDart SassとLibSassがありますが、まずDart Sassへの実装が進んでいて、今年10月に安定版がリリースされる予定です。この新しいモジュール... 続きを読む