styled-componentsの採用と既存資産を捨てた理由 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。フロントエンドエキスパートチームの@nakajmgです。 私が所属しているフロントエンドエキスパートチームでは、現在 kintone の脱レガシーの一環として React + TypeScript 化に取り組んでいます。この取組の中で Scss で定義されている既存のスタイルを styled-components で書き直していくという決定をしました。 今回は styled-components の採用を決定するまでの過程や、既存の Scss ファイルの扱いについて検討した内容などを紹介します。 スタイル定義方法の検討 kintone にはユーザーが JavaScript でカスタマイズできる機能があり、ユーザーが行っているカスタマイズの中には、DOM 構造や CSS のクラス名に依存しているものもあります。このようなカスタマイズはサポートの対象外ではありますが、ユーザーにでき
ダークモードにも柔軟に対応できるCSS&Sass変数のカラー設定方法
CSS変数とSass(Scss)変数を利用してダークモードになった時の配色などを自動で変更することができます。 例えばテーマボタンをクリックしたら<html>にJavaScriptでdata-theme="dark"という属性を追加し、そのdata属性を判定してダークモードの切り替えを実装する場合のCSS&Sassの設定を紹介します。 基本的なダークモードの設定方法 まずはライトモード（通常表示）用の$theme-colorsとダークモード用の$dark-theme-colorsというSass変数に配列で各カラーコードを定義していきます。 そしてSass機能の@each文で$theme-colorsを:root {}内にループ処理で出力していきます。 出力結果は--color-primary、--color-secondaryのようにCSS変数で出力され、ダークモードの時は&[data-t
Sassでfor文を使ったページローダーのようなものを作る方法 - Qiita
はじめに Sass記法にはなんとfor文も存在するということで、どういう使い方をするのか一例としてページローダーのようなものをCSSで表現してみたいと思います。 Sassでは他にもif文なんかも使えます。 Sassと言ってますが、基本的にはscss記法で書いていきます。そちらの方が個人的には見やすいので。 この記事ではSassについての詳しい解説は行いません。 ちなみに SassMeisterというサイトで、CSSにコンパイルされた記述も同時に見ながらコードを書くことができるので、サクッと書いてみたい場合はこちらが便利です。 左のSassのスペースにSassまたはscss記法で書いていくと、CSSのスペースに表示されます。 Sassのfor文の記載方法 基本的な書き方
「Web Componentsが来る！CSS設計はどうなる？」―CSSのエキスパートに聞いてみた！
「Web Componentsが来る！CSS設計はどうなる？」―CSSのエキスパートに聞いてみた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 Safari 10.1からCustom Elementsが使えるようになったり、Microsoft EdgeもWeb Componentsの実装を約束していたりと、Web Componentsの足音は刻一刻と迫ってきています。 そんな時代に、Web開発はどう変わるのか？まずはCSS設計というところに着目して聞いてみたいと思い、先日「Web Components時代のCSS設計」という座談会を開催し、エキスパートの方々にお話を伺ってみました。 ゲストのエキスパート紹介 高津戸 壮さん 株式会社ピクセルグリッド フロントエンドエンジニア Web制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。スケー
1分28app_1分28手机版
1秒前更新1分28【www.saison-lab.com】app聚集了众多美女主播拥有高颜值超精准计划,1分28和丰富的才艺你可以在这里听女神唱歌还可以和她一起购彩互动哦！
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SCSSの変数と、CSS3のcalc()を併用するには - Qiita
The Blog | Welcome to Adobe Blog
ちゃんとCSSを書くために - CSS/Sass設計の話
