結局Sassのネストってどこで切ればいいの問題 - Qiitaきっかけ SCSSファイル内でのネストが実際の階層に忠実すぎるために深くなりすぎてしまったことがあり、改めて「適切なネストの構造とは何か？」について考えるようになりました。 本記事の目的 Sass1の基本記法のひとつであるネスト（入れ子）に関しては、次のようなデメリットが挙げられています。
node-sassからDartSassへsassコンパイラの移行 / 開発者向けブログ・イベント | GMO Developers
SASSコンパイラをLibSassからDartSassに移行する経緯と手順について解説します。 記事の中で注意点や名前空間の干渉の調整、除算の変更についても詳しく説明しているため、 移行を考えている方やエラーに困っている方に参考になる内容です。 詳細は下記をご確認ください。 要約 LibSassが公式で非推奨となったためDartSassへ移行名前空間の実装や除算の記法変更などに注意 経緯 Webプロモーション研究室のフロントエンドチームでは今までにSASS(SCSS）のコンパイルにLibSassを使用してきました。しかしLibSassが2020年10月から公式でも非推奨となったため、DartSassへの移行を順次進めることとなりました。 弊社採用サイト（recruit.gmo.jp）でDartSassへの移行作業を行いましたので、変更点や困ったことについてまとめます。 手順 1. gulp
Dart Sass（@use）の基本的な書き方と@importから乗り換える方法 | HPcode（えいちぴーこーど）
Sassでファイルを呼び出す際に使っていた@importは廃止される予定でして、代わりに「@use」「@forward」を使うように推奨されています。自分も重い腰を上げて@useを使ってみました。 （※ Google日本語翻訳） Dart SassとLibSassの両方がモジュールシステムのサポートを開始してから1年後、またはDart Sassがモジュールシステムのサポートを開始してから2年後のいずれか早い方（遅くとも2021年10月1日）に、@importグローバルコアライブラリ関数呼び出しと同様に非推奨になります。それはモジュールを通して作ることができます。 この非推奨が発効してから1年後（ 遅くとも2022年10月1日）、@importほとんどのグローバル機能のサポートを完全に終了します。これには、すべての実装のメジャーバージョンリリースが含まれます。 https://sass-la
まだ間に合う！node-sass（LibSass）から sass（Dart Sass）への移行 - Sansan Tech Blog
こんにちは。 Eight で エンジニアをしている鳥山（@pvcresin）です。 違う違うと自分に言い聞かせていますが、おそらく花粉症になってしまいました 🥺 在宅勤務で良かったです。 今回は Sass のコンパイルに使用しているライブラリを node-sass（LibSass）から sass（Dart Sass）に移行した話をしたいと思います。 Sass 実装三銃士 Sass の実装としては、以下の 3 つがあります。 Ruby Sass LibSass Dart Sass まずは移行作業の話の前に、各実装について簡単に振り返ってみたいと思います。 Ruby Sass Ruby Sass は Sass の最初の実装でした。 発表された 2006 年当時、Ruby のエコシステムは急成長しており、すぐに多くの人に使われるようになりました。 しかし、徐々に Ruby 製であることに起因す
僕がCSSを書く際に必ず意識している CSSのコーディングルール30条｜TAK / Web Creator.
初の有料noteです。 僕個人が厳守しているCSSコーディングのルールから、特に守っておいた方が良いと感じたものを「どうしてそれが良いのか・悪いのか」といった解説も含めて30点ほどピックアップしました。 文字数は全部で28,000字オーバーと卒論レベルですが、それだけコンテンツは詰まってます。価格は相場をよく知らないのでワンコインで買える500円にしました。 （※2019.12.22追記）こちらのnoteですが、リリースから一週間経たずして売り上げが1000部に届きました。皆様ありがとうございます。 先週リリースしたnoteが一週間経たずして売り上げ1000部突破いたしました。思いがけず大変なご好評をいただきまして、ありがとうございます。https://t.co/Pj1tOGTlh5 pic.twitter.com/xfP08jfF1p — TAK (@tak_dcxi) December
Sassを使った効率的CSSコーディング術 | chot.design
SassとはCSSを効率よくコーディングするためのメタ言語（拡張言語）です。プログラムのように変数や関数を使って、効率よく保守性の高いコードを記述することができます。
Web制作者のためのSassの参考書.pdf
1,800万人が利用する『家族アルバム みてね』におけるK8s基盤のアップグレード戦略と継続的改善 / FamilyAlbum's upgrade strategy and continuous improvement for K8s infrastructure
Why we prefer CSS Custom Properties to SASS variables | CodyHouse
Since the release of our framework a few months ago, we've been asked by many users why we opted for CSS variables, instead of SASS variables, even though we do use SASS in the framework. In this article, I'll go through the advantages of using custom properties and why they've become crucial in our workflow. Content: Creating and applying color themes Controlling the type scale Controlling the sp
絶対つまずかないGulp 5入門 - インストールとSassを使うまでの手順 - ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 5に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18〜v20で動作検証をしています。 ※Gulp
レスポンシブwebデザインのコーディングでやってること - kojika17
今年、携わった案件のほとんどがレスポンシブWebデザインでした。 今更ですが、私がレスポンシブWebデザインのコーディングでやっていることや気を付けていることを整理してみたいと思います。 User Agent Style Sheetの対応 ブラウザのデフォルトで設定されているスタイルシートの差異を埋めるCSSは「Normalize.css」をよく使います。 デザインによっては、Eric Meyer’s的なRest CSSの方がやりやすい場合もあるので、そこは見た目に臨機応変に対応してます。 CSS Flexible Box 私が受け持つ案件では、最新ブラウザ、及びInternet Explorer 11（IE11）のみの対応が増えたため、近年では、Flexible Boxをカジュアルに使用できるようになりました。 個人的には、広い画面では横並びだったものを、displayプロパティを変更す
margin, paddingなど、レスポンシブに対応したスペースをCSSで効率的に定義する方法 | コリス
Webページやスマホアプリのレイアウトに使用する、margin, paddingなどのスペースをCSSで効率的に定義する方法を紹介します。 em, remの相対的な単位を使い、calc()を効果的に活用し、拡張性やメンテナンス性にも優れたデザインシステムを構築できます。 Create your design system, part 4: Spacing by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの変数を使用して、スペースのシステムを設定する方法 すべてのコンポーネントにデフォルトのpaddingを設定する方法 marginのユーティリティ スペース値を追加する場合 固定のスペース値が必要な場合 スペースを定義したSCSSファイル はじめに 元々は、近日公開予定の「Web Comp
備えておくと便利！CSS Flexboxの各プロパティ、グリッドを実装するコードがまとめられたSassのMixin
CSS Flexboxの各プロパティ、レスポンシブ対応のグリッドや垂直・水平の揃えなど、便利なコードがまとめられたSassのMixinを紹介します。 CSS Flexboxの各プロパティがまとめられたSass Mixin CSS Flexboxでグリッドを実装するコードがまとめられたSass Mixin CSS Flexboxの各プロパティがまとめられたSass Mixin flexboxのブラウザのサポート状況 Internet Explorer 11+（10はプレフィックス「-ms-」が必要） Edge 12+ Chrome 29+（21-28まではプレフィックス「-webkit-」が必要） Firefox 28+（2-21まではプレフィックス「-moz-」が必要） Opera 17+（15-16まではプレフィックス「-webkit-」が必要） Safari 9+（6.1-8まではプレ
bootstrap-sassのためにSass、Compassの導入をした - Qiita
Bootstrapを基に独自のCSSを作成したい時に、bootstrap-sassという便利なものを発見したので早速導入した。 導入に何がインストールされたのかを記録するためにもこの記事を書いている。 以下のURLに載っている通り、インストールを行った。Rails不要なタイプでやっている。 https://github.com/twbs/bootstrap-sass#b-compass-without-rails $ sudo gem install bootstrap-sass Fetching: sass-3.4.11.gem (100%) Successfully installed sass-3.4.11 Fetching: execjs-2.3.0.gem (100%) Successfully installed execjs-2.3.0 Fetching: autoprefi
VS CodeのCSSサポート
Sass／Less.jsのCSSへのトランスパイルを自動化しよう Sass／Less.jsはCSSを拡張した言語であり、最終的にはCSSへとトランスパイル（コンパイル）される。VS Codeの統合ターミナルを使えば、そんな作業も簡単に行えるが、tasks.jsonファイルを作成することでワンタッチでトランスパイルを行うことも可能だ。 ここでは、次に示す簡単な.scssファイルのトランスパイルを例に取る。また、ここでは「npm install -g sass」コマンドを実行して、Sassをインストール済みとなっている。 $bgc: lightgray; $h1bgc: darkgray; $fgc: lightblue; body { background: $bgc; } h1 { background: $h1bgc; color: $fgc; }
SassとPostCSSを組み合わせて作るCSS開発環境 ｜ Tips Note by TAM
突然ですが、僕はずっとPostCSSを誤解していました… このたび晴れて誤解が解けたので、記念に記事を書きたいと思います。 Sassの代わりではない はい、これです。 この記事で言いたいことは、これがほぼ全てです。 僕は、PostCSSを、コンパイルしてCSSを生成するSassのようなものだと思っていました！ ですが、そもそもSassを使っていたので全くと言っていいほど必要性を感じてませんでした。 PostCSSは自分で必要な機能だけを選べるからカスタマイズ性がある！楽しい！軽い！ とか言われても、Sass遅くないし、むしろ必要な機能を選んで構成するのがめんどくさいと思ってました。というか今も思ってます。 ポストプロセッサーとしてのPostCSS PostCSSというくらいなので、ポストプロセッサーとして、生成されたCSSに対して後処理をすることに使えます。 (導入するプラグインによっては
Mixed-Nuts モダンなWebサイト制作環境を爆速で構築する - Qiita
始めはただSassをビルドしたかった... 困ったこと、やりたかったこと sassをビルドする記事はあるけど...compass?grunt?gulp?webpack? Windows/Mac/Linux でも動く環境を作りたい。 JavaScriptもビルドしたい。 一つのファイルにまとめたい。 JavaScriptもES6を書きたい。 SourceMapを出力したい。 ヘッダーやフッター、メニューなどの共通化したい。全部のファイルを修正したくない。 ファイルが変更されたら... SassやJavaScriptは自動でビルドしたい。 ブラウザもファイル変更を検知してリロードさせたい。 ブラウザのキャッシュが残らないようバージョニング対策したい。 クリーンなHTML/CSSを書きたい。 ブラウザ特有のベンダープレフィックスは自動で付与したい。 使っていないスタイルは除去したい。 本番用のフ
多機能コンパイラ『Prepros』で快適コーディング | Web技術Tips | ホームページ制作のDOE【横浜】
やっぱり GUI ツールを使いたい コーディング作業には単調な繰り返し動作がたびたびありますが、それを変数や関数を駆使して効率化しようとするのはエンジニアのあるべき姿勢ではないでしょうか。 最近では gulp のような「タスクランナー」と呼ばれるツールや、Webpack のような「ビルドツール」がノンエンジニアでも始められるという触れ込みでよく取り上げられています。 たしかに Hello World! を表示するのは誰でも出来ますが、実際に運用していくためにはやはりいくつかハードルがあります。 なぜかというと、これらは CUI ツールだからです。 コマンドを打って、操作する、アレだからです。 GUI で操作できるコンパイラ『Prepros』 CUI ツールは「ちゃんと理解してないと動かない」ことが多く、直感的な操作をしたい人やマニュアル化してチームで共有したい人は敬遠しがちではないでしょう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブ用にfont-size, margin, paddingなど、プロパティの値を一元管理できるSassの超軽量ライブラリ -SSCSS
VSCode(Visual Studio Code)で簡単にSASS/SCSSファイルのコンパイルができる拡張機能「Easy Sass」がお勧め | カレリエ
CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法 - NxWorld
