サイト制作関連はてブサイト制作に関連するはてブ記事をタグで抽出しただけ

Sass

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

こちらは CSS Advent Calendar 2022 22 日目の記事です。 こんにちは、家計簿プリカ B/43を運営する株式会社スマートバンクでデザイナーをしている putchom です。 C …続きを読む

2022/12/22 09:50

  • Pocket

Sass製SVG爆速表示ライブラリのご紹介 - dwango on GitHub

こんにちは。ニコニコ生放送生放送フロントエンドシステムセクションのmisuken(GitHub/Twitter)です。 今回は10月に公開したsmart-svgとreact-sass-inlinesv …続きを読む

2022/12/5 11:52

  • Pocket

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

先日リリースされたGoogle Chrome Canaryで、CSSでネスト(入れ子)ができるようになりました💐 次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わな …続きを読む

2022/11/18 09:34

  • Pocket

sassc-railsを利用している我々は、Sassの@importの非推奨化をどのように乗り越えていくか

2022年10月22日 Kaigi on Rails 2022 で発表したスライドです。 https://kaigionrails.org/2022/talks/mh4gf/ 参考実装: https: …続きを読む

2022/10/22 13:17

  • Pocket

あなたが知らないかもしれない CSS 変数活用法

この記事は、技術書典 13 で頒布中の「Vivliostyle で本を作ろう vol. 6」から抜粋した記事です。ご興味ありましたら、Vivliostyle を使って組版された本誌もぜひお買い求めくだ …続きを読む

2022/9/10 16:54

  • Pocket

【WordPress】Sass の @import が非推奨になるから、「おじいちゃん平成くさーいwww」とキッズから馬鹿にされる前に遅ればせながら滑り込みで @use に書き換えてみたよ【editor-style.css】

【2022/09/09 追記】 タイトルを編集しました。 いつものように Twitter を見ていたら(仕事中じゃないですよ)こんな投稿が目に飛び込んできた。 鹿野さんのツイート あーそうなのよ、そう …続きを読む

2022/9/6 09:26

  • Pocket

【分野別】VSCodeのおすすめ拡張機能まとめ - Qiita

はじめに 今回はVSCodeでおすすめの拡張機能を分野別に紹介していきます。 拡張機能は下記の分野に分けて紹介していきます。 VSCodeを使う全員向け Web制作関連 HTML&CSS関連 …続きを読む

2022/9/4 11:04

  • Pocket

DartSassもコンパイルできるVSCodeの拡張機能「Live Sass Compiler(by Glenn Marks)」の紹介 - もぐもぐ食べるおいしいWebデザイン。 - もぐでざ

まずは結論から これをインストールします。 Live Sass Compiler - Visual Studio Marketplace (サムネイル怖‥) 本家の「Live Sass Compile …続きを読む

2022/8/30 16:39

  • Pocket

エンジニア向けチートシート集 - Qiita

はじめに 今回はエンジニア向けのチートシート集のまとめを紹介していきます。 チートシートを利用することで 作業効率が上がる 概要が掴みやすい 学習にもなる といった恩恵が得られます。 ただし前提として …続きを読む

2022/8/4 10:08

  • Pocket

Chakra UIを薄く軽量に使う

はじめに この記事で説明しているChakraProviderの使い方は公式ドキュメントで推奨されているものではありませんのでご了承ください。 概要 @chakra-ui/reactではなく@chakr …続きを読む

2022/7/26 17:46

  • Pocket

npm-scriptsでdart-sass → postcssのタスクを作る。(ディレクトリ指定 & watch)

で開発開始。sassファイルを更新すると処理が走ってdist/に処理結果のcssが吐き出される。 cssファイルの一時経由先として「tmpCssディレクトリ」を設けてるのがコツ。 「watch:sas …続きを読む

2022/4/18 18:04

  • Pocket

node-sassからDartSassへsassコンパイラの移行 / 開発者向けブログ・イベント | GMO Developers

要約 LibSassが公式で非推奨となったためDartSassへ移行名前空間の実装や除算の記法変更などに注意 経緯 Webプロモーション研究室のフロントエンドチームでは今までにSASS(SCSS)のコ …続きを読む

2022/4/18 08:38

  • Pocket

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

Webエンジニアを始めて丸2年が経ちました。 複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。 は …続きを読む

2022/4/16 17:04

  • Pocket

Webエンジニア(コーダー)向けVite環境の紹介【初心者向け解説】

こんにちは!のせっち@nosecchi01です。 最近流行りのViteを導入し、Web制作に使える環境構築をしていきます。 Viteはとにかくコンパイルの早さが売りのようです。(vite:ヴィットはフ …続きを読む

2022/4/4 22:35

  • Pocket

html に font-size: 62.5%; を指定するのはやめよう | Cherry Pie Web

htmlタグに「font-size: 62.5%」を指定するのを、CSSのフォントサイズ指定にremを使用するうえでの便利技のように書かれているブログ記事を多く見かけますが、筋が悪い方法なのでやめまし …続きを読む

2022/4/3 13:05

  • Pocket

【CSS設計】ゼロからわかるBEM超入門

はじめに この記事はCSS設計 BEMについて初心者の方向けにわかりやすく解説した記事です。 できるだけ正確な情報を記述することを意識していますが、間違ったこともあると思います。なのでこの記事でざっと …続きを読む

2022/3/10 11:21

  • Pocket

Rails 7: dartsass-rails gemはNode.jsなしで使える|TechRacho by BPS株式会社

週刊Railsウォッチ20220228でもお伝えしましたが、つい最近、dartsass-rails gemがRailsのGitHubリポジトリで正式に登場しました。 dartsass-railsは、本 …続きを読む

2022/3/2 17:31

  • Pocket

VSCodeのおすすめ拡張機能と便利な設定、キーバインド集

主にフロントエンドを開発している、ぼくがかんがえたさいきょうのVSCodeを紹介します。 便利な設定, キーバインド集だけでも参考にしていただけると幸いです。 拡張機能 まずは言語問わず使えるものを紹 …続きを読む

2022/2/15 21:40

  • Pocket

Dart Sassへの移行でつまづいたこととか - Qiita

公式ブログによると新しいモジュールシステム導入に伴い、これまで使用されていた@importルールは2021年10月には非推奨に、2022年10月にはサポートが終了する予定になっています。 これにより新 …続きを読む

2022/1/24 18:26

  • Pocket