Sassy CSS。Sassの差異実装。
CSSを，構造化された形でスマートにコーディングするためのツール。
稀に発生する Sass / SCSS で web サイトを作る案件。 毎回メディアクエリを生成する mixin どう書いてたっけ？ってなるのでコピペできるメモ Motivation breakpoint を変数で持たせて mixin でそれぞれのメディクエリを生成できるようにする media query を生成する mixin $breakpoints: ( "sm": 430, "md": 768, "lg": 1024, "xl": 1280, ) !default; @mixin mediaUp($breakpoint) { @media screen and (min-width: #…
CSSをより記述しやすくするためにSCSSという効率化ができる言語について記事にしていきます。 SCSSでできること 最初にも書いたようにCSSの記述を効率化できるスタイルシート言語記法(拡張言語)の一つです。 CSSでは下記のように記述します。 .item{ background: #ffffff; font-size: 12px color: #000000 } .item a{ color: #0000cd; text-decoration: none } 基本的に一つ一つのセレクタごとに記述が必要であったり、同じ記述を繰り返さなければいけない場合もあります。（特にカラーコードは頻出です…
webpackの処理の流れ 上記を踏まえた実装例 SCSSを使用する場合 Typescriptを使用する場合 webpackの処理の流れ Webpackは、JavaScriptアプリケーションのためのモジュールバンドラーであり、アプリケーションに必要なすべてのモジュールを取り込み、それらを1つまたは複数のバンドルにまとめます。 一般的なWebpackの処理の流れは以下の通りです：1. エントリーポイントの指定: webpackの最初のステップは、アプリケーションのエントリーポイントを特定することです。 通常、このエントリーポイントは、アプリケーションのメインファイルであり、依存関係のチェーンを…
まーーーたstylelintが止まった。ちょうどいいから設定など見直しました。 あと！！！！！！ 検索すると！！！！！！ まーーーーーーだcssの並べ替えをcsscombにやらせよう、という記事がたくさん出てきて「そんな長らく開発されてねえもんを使うな！ VScodeのプラグインも使うなって書いとる！」と憤ってしまった*1。cssの並び替えをしたい人はcsscombではなく、Postcssやstylelintにやらせましょう。自分はVScodeでscssをcssにコンパイルしていますが、live sass compilerがベンダープレフィックスやらコンパイルやらはやってくれるので、scssと…
こんにちは。弁護士ドットコム クラウドサイン事業本部 Product Engineering 部の林と申します。執筆時点では入社1か月の新入社員です。もちろん入社してはじめて書く技術ブログですが、新参者でも臆せず発信できる組織ということをアピールしつつ、ジョインしたての業務で学んだことを整理します。 Vue2.7へのアップグレードに伴うv-deep移行作業の背景 v-deepを:deep()に移行する際に詰まったところ 正しい:deep()の適用範囲 ちなみに（GPT-4に聞いてみた） まとめ Vue2.7へのアップグレードに伴うv-deep移行作業の背景 現在、クラウドサインのフロントエンド…
stylelintとは？ stylelintの実行方法 1. Stylelintのインストール npmを使用する場合 yarnを使用する場合 2. Stylelint設定ファイルの作成 JSON形式の例 YAML形式の例 3. スタイルガイドのインストール 4. Stylelintの実行 コマンドラインから実行 スクリプトに追加 5. エディタの統合 6. 自動修正機能の使用 Stylelint実行前後の差分の例 1. Stylelint実行前のCSSファイル 2. Stylelint設定ファイル 3. Stylelintの実行 4. Stylelint実行後のCSSファイル 5. 差分の説明…
こんにちは、松久です。 食べチョクでは、デザインツールとして Figma を使っています。色の定義を Figma の Color Styles で管理しています。 管理はしているものの SCSS には反映できていない状態でした。このままだと何が管理されている色なのかエンジニアとデザイナーの認識が揃わなくなります。そこで、Figma の Color Styles と、SCSS で用意した色の変数を合わせられる状態を作っていくことにしました。 色を定義するまで 1 年前ぐらいに UI の色の定義の再確認をして、一部曖昧なところは残りつつも SCSS の変数の定義をしました。 決まっていない部分があ…
CSS激アツニュースです。ついにSafari16.4でmedia queryのrange記法に対応したので、今後は「min-width……max-width……どっちがどっちだった？」と迷わなくてよくなりそう。 詳しくはこちらの記事を読んで欲しい。zenn.dev /* いままでの書き方 */ @media screen and (min-width: 992px) {} /* range記法 */ @media screen and (992px <= width) {} /* あるいは */ @media screen and (width >= 992px) {} 不等号の向きはプロジェ…
Sassでは、親要素に指定された複数のクラス名のうち、特定のクラス名を持つ要素を選択するために、セレクタの複合クラスを使用します。 例えば、class属性が "a b" となっている要素に対して、"a"クラスの中で"b"クラスを選択する場合、以下のように書くことができます。 .a { /* aクラスのスタイル */ &.b { /* aクラスかつbクラスを持つ要素のスタイル */ } } 上記のSassコードでは、"&"を使用して親要素を参照し、"."を使用してクラス名を指定しています。"&.b"と書くことで、親要素が"a"クラスかつ"b"クラスを持つ要素を選択することができます。 例えば、以…
本記事では、SCSSをリアルタイムでコンパイルしてくれるVS Codeの拡張機能ご紹介しています。 Live Sass Compilerの準備 Live Sass Compilerの使い方 余談：より使いやすいSCSSの開発環境へ 参考記事 Live Sass Compilerの準備 まずはリアルタイムでSCSSをコンパイルしてくれるVS Codeの拡張機能を入れていきます。 まずはVS Codeを開き、左タブにある拡張機能の項目を選択してください。 そして検索項目に【Live Sass Compiler】と入力すると、2つほどでてきます。 ここで、斜線の入っていない方を選びインストールしてく…
この記事は、みすてむず いず みすきーしすてむず その2 Advent Calendar 2024 19日目の記事です。 なんの話をするのさ 絶賛Vueのバージョンアップを行っている人による、ただの日記です バージョンアップ手順などの技術的な話はメインじゃないので、参考にしないでください。 本題 皆さんご存知の通り、Vue.js 2.xのサポート期間は2023年12月31日に終了しております でもって、ヘイシャのプロダクトは去年中にVueのバージョンアップを行うことが…出来ませんでした…！！！！！ まあ、去年は1年かけての大型PJが動いていたので、正直それどころではなかったというアレです。 が…
毎週恒例、HapInS塚本のテックブログ！ 始まるよー！ 冗談です(´・ω・) HapInS Advent Calendar 18日目です。 今回もたまたま僕のターンなだけです。 皆様、前回の記事「HTML/CSSが苦手なそこのあなた！そう、あなたです！」は ご覧頂いたでしょうか？ あの記事を読んでくださった方はある程度HTML/CSSが書けるようになったかと思います。 「全然分かんねえよ！」 「CSS書いたのに効かねえよ！」 「噓つき！ペテン師！」 という声もあるかと思います。 特に「CSS書いたのに効かねえよ！」ってやつ。 これは少し知識が必要になります。 なので今回のテーマは… CSSが…
こんにちは。ソーシャル経済メディア「NewsPicks」NewsPicks Stage. 事業のエンジニアをしています、林です。 業務では Next.js / Rust / Go などを用いて、経済・ビジネス情報に特化した動画配信サービスである NewsPicks Stage. の開発・運用を行っています。 概要 NewsPicks Stage.（以下Stage.）では去年末ごろから Next.js のフロントエンドを App Router へ段階的移行を進めてきました。 tech.uzabase.com 1年ほどで 半分以上のページが App Router 化 され、知見や感想が溜まってきた…
はじめに Notion Tips の第176回目は、3年前に作っていたらしい「選択中のテキストをコードブロックとして追加する macOSサービス」を、使いやすいように改修した話です。元々は、「Notion API を触ってみようの会」でのやり取りから始まっていました。 NotionキャンパスリーダーのHaruki(@Haruki_dev)とAsahi(@ashh_log)主催の【NotionAPIを触ってみようの会】に参加しています！！ https://t.co/ZcZoRMPy6o #NotionAPIを触ってみようの会— hkob｜Notion Ambassador (@hkob) 202…
こんにちは！エンジニアの藤井（touyou）です！ この記事はGoodpatch Advent Calendar 2024の12日目の記事になります。 みなさん、Figma、使ってますか？ 自分は現在、社内のデザインシステムチームにエンジニアとして参画して、デザインシステムの成長にエンジニア視点で貢献するということをサブプロジェクト的に取り組んでおり、デザイナーと一緒に有効性を検証するテストに参加したり、インタビューの分析をしたり、実際のドキュメント執筆に携わったりなど、職種の域を超えて活動しています。 その中でも直近力を入れて取り組んでいるのが「Figmaプラグイン開発」です。 実際のサブプ…
りんごぱい Advent Calendar 2024 の記事です。微妙すぎてわからない頑張りの話をします。 MisskeyがMacでばっかり可愛い問題 Misskey楽しいですよね。なにより雰囲気がいい。 この雰囲気がどこから来ているかというと、人々が良いしシステムも良いしルック＆フィールも良いんですが、そのルック＆フィールの中でもフォントが良いと思いませんか。⋯思いませんか。あ、その前にどんなマシンからMisskeyを見ていますか？ MacやiPhone, iPadから見ている人は、フォントが良いというのちょっとわかってもらえると思うんですよね。だってこれですよ。ヒラギノ丸ゴシックPro。ゆ…
面白法人グループアドベントカレンダー2024 8日目の記事です。 こんにちは！技術部 フロントエンドエンジニアの大脇です。 今回は、コードジェネレーターを活用してコンポーネント開発を効率化する方法をご紹介します。 手動でのファイル作成や設定の煩わしさから解放されたい方に読んでいただけると幸いです。 課題 私の担当するReactプロジェクトでは、コンポーネントごとに以下のようなディレクトリ構造を採用しています。 components/ └── Button/ ├── Button.tsx ├── Button.module.scss ├── Button.stories.tsx └── inde…
フロントエンド開発部の須田です。 この記事は kubell Advent Calendar 2024 (シリーズ1) 12月4日の記事です。 前日はこちらの2本でした。 creators-note.chatwork.com creators-note.chatwork.com AWS Amplify を使った爆速開発も楽しそうですし、ゴリゴリとパーサーコンビネーターを書くのも楽しそうですね！年末年始は寝てられません。 さて、僕が所属する kubell のフロントエンド開発部では、他のチームが Chatwork のフロントエンドを開発する際に予期される障害や無駄を取り除く、いわばフロントエンド限…
この記事は株式会社エス・エム・エス Advent Calendar 2024の12月4日の記事です。 qiita.com 保育士人材バンク のサービスを担当しておりますエンジニアの田実と申します。 保育士人材バンクは保育業界で働く方と事業所のための就職・転職マッチングサービスです。 本記事では2024年の保育人材バンクの技術基盤改善の取り組みを振り返っていきます！ コンテナ化 今年一番大きかった基盤改善は何と言ってもコンテナ化です！コンテナ化前はEC2上にアプリケーションがホスティングされており、デプロイはrsync、ログはSSHでサーバーに入って直接ログファイルを確認、といった運用を行ってい…
最近は、もっぱらNext.jsを使ってWebサイトを制作したり、Electronと組み合わせてMacアプリを制作したりしています。 ペライチのWebサイトですら、Next.jsを静的サイトジェネレータとして使っているのですが、ペライチのサイトであれば、Next.jsもReactも不要なのではないのかと思い、Viteの調査をはじめました。目標としては、TypeScriptとSCSSを使える環境をさささっと構築することです。 TypeScript + SCSSのプロジェクトの作成手順 ❶ viteのプロジェクトを作成 yarn create vite実行後、対話式の質問に応える。 Project …
こんにちは。 本日はAngularメモです。 ローカル変数の定義(@let) ループ処理(@for) 条件分岐処理(@if) 条件分岐処理(@switch) (参考)処理で使用する値を外部から渡す tsファイル テンプレート ローカル変数の定義(@let) テンプレート内でのローカル変数の定義は @letを使用します。 @let title = 'Hello World'; ループ処理(@for) ループ処理は、@forを使用します。 @let names = ['apple', 'orange', 'melon']; @for (name of names; track name) { <l…
今回は、バンドルについてまとめます。 バンドル（Bundle）とは プログラミングやWeb開発において、複数のファイルやリソース（JavaScript・CSS・画像等）を効率的に一つのファイル、または少数のファイルにまとめる作業のこと。 これを行うツールのことをバンドラーと呼ぶ。 この作業により、Webアプリケーションを効率的に配信できるようになった。 なぜバンドルするの？ リクエストの削減 Webページを読み込む時、サーバーに複数のリソースを要求すると、その都度ネットワーク通信が発生する。 バンドルによりリソースをまとめることで、リクエストの数を減らし、ページの読み込み速度を向上させることが…
2024/11/22分のコミットです。 CHANGELOGにのったコミットは以下の通りです。 actionview/CHANGELOG.md Improve reliability of ERB template error highlighting. Fix a crash in ERB template error highlighting when the error occurs on a line in the compiled template that is past the end of the source template. activesupport/CHANGELOG.…
js /*=================================================================== タイトル英字にspanタグを設定 ===================================================================*/ $(document).ready(function () { // 文字列へのspan設定 $(".js-split").each(function () { var content = $(this).html(); var trimText = $.trim(content…
はじめに こんにちは、株式会社BuySell Technologies テクノロジー戦略本部 開発3部 Tech MK グループ（テックマーケティンググループ）の土屋です。 私は今年の8月1日から入社し、グループ会社である「株式会社タイムレス」の専属エンジニアとして、Webサイト制作全般を担当しております。 私が入社するまで、一部の運営サイトは前任者に委ねられていました。 しかし、私が入社したタイミングでは前任者の方は既に退職しており、手探りの中、Tech MK グループのメンバーによって保守・運用されている状況でした。 一人のエンジニアに依存していた状況を、チーム全体で効率的に運用できるよう…
dxd8.com
hail2u.net
www.webcreatorbox.com
www.slideshare.net
wp.yat-net.com
dev.classmethod.jp
zenn.dev
qiita.com
tech.recruit-sumai.co.jp
