SCSS

stylelintとは？ stylelintはCSSやSCSS、LESSなどのスタイルシートを検証し、一貫性のあるコードスタイルを維持するための静的解析ツールです。 昨今のフロントエンド開発には欠かせないツールとなっています。stylelintは以下のような機能を提供します。1. 構文エラーやタイポの検出 2. コードスタイルの一貫性の検証 3. プリプロセッサの変数や関数、ミックスインなどの使用方法の検証 4. パフォーマンスの問題を検出するルールの提供stylelintは様々な設定オプションを提供しており、ユーザーが独自のルールを追加することもできます。 また、stylelintはコマンド…

こんにちは、松久です。 食べチョクでは、デザインツールとして 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"クラスを持つ要素を選択することができます。 例えば、以…

Sassの勉強をしました。その内容をメモとして残します。Sassの入門的な内容について書きます。 ネスト 変数 mixin mixinに引数を渡す & 四則演算 CSSのcalc関数 import ネスト <!-- HTML --> <div class="header"> <div class="log"></div> <div class="tagline"></div> <div class="menu"> <ul> <li><a href="">メニュー1</a></li> <li><a href="">メニュー2</a></li> <li><a href="">メニュー3</a></…

前回の記事で､BEMにメリットってある？って書きました｡ coooool.hatenablog.com クラス名が長くなるから嫌だ～｡ なんて思ってたのですが､どうやらそれは大きな間違い｡ 改めて勉強した｡ そして､ BEMはいいぞ｡ そんな感じで思いました｡ まだ､人様に説明できるほどの実力はないですが､詳しくなったら説明したいと思います｡ ただ､BEMは良いなと思っているわけです｡ だいぶ楽になりましたね｡ SCSSとセットで覚えれば､かなり良い線行くのではないかと｡ 個人的には､まずSCSSを覚えてからBEMに行くと良さそう｡ ぼくは､SCSSについてはだいぶ理解していて､BEMに行った…

SCSSはCSSのバージョンアップ版｡ CSSで書いていて､｢あ､このコード､何回も書いてるわ｣って時に､SCSSを使えば便利｡ たとえば､マージンとか｡予め､ @mixin mg($mgr: 30px) { margin-bottom: $mgr; } と書いておく｡あとは､mgと言う名前を付けた｡ デフォルトは30px（$mgr: 30px）｡ あとは､mgを呼ぶだけ｡ こんな感じで｡ .entry-header { @include mg; } ｢あ､マージン変えたい｣という場合､通常だと､コードを読んでいき見つけないといけない｡ 1箇所､2箇所であればそれも良いでしょう｡ しかし､10…

DOMの高さを0からautoにCSSアニメーションでスムーズに変更したいとき、grid-template-rowsを使うといい感じになるということを教えていただきました。 DEMO SCSS（抜粋） dd { display: grid; // ❶ grid-template-rows: 0fr; // ❸ transition: grid-template-rows .2s ease-in-out; // ❺ > div { overflow: hidden; // ❷ } :has(:checked) & { grid-template-rows: 1fr; // ❹ } } displa…

2024/4/18 https://cyberagent.connpass.com/event/314102/ 新規開発と並走したリファクタリング戦略 Kurisaki.Kazumaさん 作っているもの 3つのプロダクトが同一リポジトリ 3000行のコンポーネントとか propsバケツリレー useEffect chain リファクタリング リターンが大きくリスクが小さいものから ドメインやコードの理解が深まってから大物を 新規開発でもリファクタをすることも その方が早くなるケース フロントエンドのりアーキ やったこと AtimicDesighからFeatureベースへ ReduxからSWRへ…

概要 皆さまは Web アプリや Web サイトを作成する際は何の言語のどういったフレームワークを使用していますでしょうか？ 私はもっぱらプログラミング言語としては JavaScript/TypeScript を使用しており、フレームワークとしては React.js/Next.js を採用して開発などを進めています。 developer.mozilla.org www.typescriptlang.org ja.legacy.reactjs.org nextjs.org React.js や Next.js といったフレームワークは非常に強力で Web アプリを簡単に作ることができる一方、でき…

浪人のサムライです。 現在、HTMLコーディングをしています。 DWでHTMLコーディングをしている 仮想でいくつかホームページを制作した ホームページ制作の話がチラホラと ロゴ制作よりおもしろいかもしれない 両方頑張る さいごに DWでHTMLコーディングをしている HTMLコーディングとは、HTMLとCSSを書いてホームページ制作をすることです。 ま、今の時代はそれをしなくても簡単にホームページ制作できるようになっています。 が、ぼくは、あえてHTMLコーディングをする。 とは言え、ロゴのホームページはCSSでかなりカスタマイズしましたが。 コードの解析が難しく、「それだったらHTMLコー…

2024/04/10分のコミットです。 CHANGELOGにのったコミットは以下の通りです。 activesupport/CHANGELOG.md stub_const now accepts a exists: false parameter to allow stubbing missing constants. Remove example filepaths from code blocks in guides guides/rails_guides/markdown/renderer.rbの修正です。 code blockからcodeが記載されているファイルパスを削除しています。co…

\Aで改行できることを知りました。 white-space: pre-wrapとセットで設定する必要があります。 SCSS p { &:after { white-space: pre-wrap; content: '改\A行'; } } DEMO 関連記事 blog.kimizuka.org

これまで文字サイズはpxを使って指定してきましたが、font-sizeをpxで指定してしまうと「font-sizeをpxで指定するとブラウザの文字調節機能が作動しない」という問題が起こります。Chrome だと「設定 → デザイン → フォントサイズ」の項目です。 emを使ったフォントサイズ emは親要素のフォントサイズをそのまま継承します。一見すると判りやすいですが構造が複雑になってくると、複利計算されてしまい判り難くなってしまいます。 remを使ったフォントサイズ 次にremを使ったフォントサイズの指定です。 「rem」とは、「em」や「%」の場合、親要素（が基準）に対して相対的に指定する…

remを使う時の注意点 remで起こる問題を解決するにはSCSSであれば自作関数を使う事で解決出来ます。 scssでのfunction関数の設定 @function 関数名(引数) { @return }@function rem($px) { @return ($px / 16) * 1rem; } h1 { font-size: rem(36); /* font-sizeが36px相当にする */ } スマホ時にフォントサイズを画面幅に応じて可変にする SCSSでの方法 フォントサイズを可変にするにはremにvwとcalcを合わせて使用します。 ルート（html）のfont-sizeをca…

Sassの公式サイトで今後はDartSassを使うことが推奨とされると発表がありました。それに伴ってSassの初期の方から実装されていた@importが廃止予定になりました。とても便利な機能ですが、CSSの@importと重複しているため、SassなのかCSSなのか一見してわかりにくい側面などがありSassでの@importは廃止予定になりました。その代わりに@useや@forwardといった新しいモジュールが使えるようになりました。大きな違いは「変数や関数などの有効範囲」です。 @importではこれらの有効範囲はグローバル（ファイル間を横断出来る）ですが、@useでは有効範囲がローカル（指…

https://github.com/SirVer/ultisnips vueファイルを作るときに<template>とかの記述は決まり切っているのでsnippetsで解決した。 作ったファイルにvuesetupと挿入してtabキーを押すと、事前に記述しておいたコードになる。 プラグイン管理にはvim-plugを利用している。 init.vimに次の内容を書いて:PlugInstallを実行する。 " UltiSnips Plug 'SirVer/ultisnips' let g:UltiSnipsExpandTrigger="<tab>" .config/nvim/UltiSnips/vue…

はじめに 前提 ダッシュボード Nuxt3 移行 Nuxt3 実施前 package.json nuxt.config.js ブランチ戦略 Nuxt3 移行手順 Nuxt 本体のアップデート @nuxt/devtools の無効化制御 API 通信用の composable の作成 環境変数の設定 バリデーションライブラリの追加 認証系の実装 Sentry 実装 Bootstrap, BootstrapVue 導入 Chart.js 追加 DatePicker 対応 G タグ埋め込み 最後に はじめに お久しぶりです！ クロスマート株式会社では主にフロントエンドのタスクを勉強させていただきつつ…

以下のようにしてechoするだけにする。 "lint-staged": { "*.{js,ts,vue}": "echo Skipping eslint", "*.{css,scss,sass,html,vue}": "echo Skipping stylelint", "*.**": "echo Skipping prettier" },