Sass（SCSS記法）の書き方紹介 | 東京のホームページ制作 / WEB制作会社 BRISK
2020年の冬からSassが社内標準として採用されました。 最初は戸惑いましたが、慣れるとCSSを書くのがつらくなるぐらい便利です。 Sassのごく一部の機能しか使っていないな、と思ったので書き方をまとめてみました。 SassについてSass（Syntactically Awesome StyleSheet）はCSSのメタ言語です。CSSのメタ言語をCSSプリプロセッサと呼んだりします。 メタ言語は言語を定義したり、言語についての情報を記述したりするための言語です。CSSの機能を拡張した言語の1つがSassと言えます。 SassはCSSに変換（コンパイル）する必要があります。環境構築が面倒という方もGUIコンパイラやVSCodeのプラグインなどを使えば、気軽にSassを導入できます。 GUIコンパイラの使い方については、こちらの記事を参考にしてみてください。 Sass(SCSS)を始めよう
Sass: The Module System is Launched
The Sass team has known for years that the @import rule, one of the earliest additions to Sass, wasn’t as good as we wanted it. It caused a litany of problems for our users: It was next to impossible to figure out where a given variable, mixin, or function (collectively called "members") was originally defined, since anything defined in one stylesheet was available to all stylesheets that were imp
【Sass】@importから@useに移行した顛末記
はじめに 2022年10月頃にはSassで@importが使えなくなるのに、やっと重い腰を上げて@useに移行しました😓 移行する中で引っかかったことや構成のアイデアを共有していこうと思います。 Episode 0：置き換えるだけじゃダメでした それはそうだろう、という話ですが、 @importを@useに置き換えるだけではダメです笑 各ページでの読み込みや名前空間の指定が必要になるので、エラー吐きまくります！😭 Episode 1：逐一読み込ませてみる 変数用ファイルを逐一@useで読み込みが必要 ひとまず、style.scssの@importを@useに変更した後、 エラーで怒られた変数やmixinsの読み込みを解消します。 例：
今度こそ@importをやめる！ | 株式会社ヌーラボ(Nulab inc.)
こんにちは、UXエンジニアのヨーナスです。今回のブログリレー投稿では、よく後回しにされがちなSassの@importアットルールの廃止に伴うリファクタについて書きます。 基本的には人間というのは、変化が苦手なものです。もちろん、僕もそうです。一度いいやり方を見つけるとそれにずっと従いがちな性格です。何かの明らかなメリットが見えないと一回慣れたやり方でずっとやってしまうタイプです。ですが、いざ新しいことに挑戦してみると、結局やってみてよかった〜と毎回終わりに思います。そもそもSass自体もそうでしたし、TypeScriptもそうでした。一度その良さを味わうと元には戻れなくなります。 新しいことに挑戦するのはいいことですが、実は、今回の記事の内容は「挑戦」というまでもなく、まったく複雑ではありません。それでも、記事として少しでも役に立てばなーと思いながら書きます。僕は初めて@importを@u
Visual Studio CodeでのSass導入と基本設定【Live Sass Compiler】
Sassを使えるようにするためにはVisual Studio Codeの拡張機能である Live Sass Compiler (Glenn Marks) が手軽に導入できて便利です。 今回は Live Sass Compiler (Glenn Marks) の導入方法と最初に行うべき（かもしれない）設定のいくつかを書き留めておきます。 使用したバージョン Visual Studio Code 1.69.2 / Live Sass Compiler (Glenn Marks) 5.5.1 Live Sass Compiler (Glenn Marks) について VS Codeの拡張機能「Live Sass Compiler」 Live Sass CompilerはVisual Studio Codeの拡張機能です。 ダウンロードして有効化するとVS Code上でSassの編集・コンパイルが
Sassのモジュールシステムを@importから@useに移行する方法を考えてみた
先日、KOJIKA17さんの「Sassを@importから@useに置き換えるための手引き 」という記事を見て、2022年10月ころにはSassで@importが使えなくなる可能性があることを知りました。まだ2年ありますが、新しく取り組むプロジェクトでは@useを使ったモジュールシステムにしたいので、自分が使っている構成の置き換えについて考えてみました。 まずはアイディアをシェアをして叩き台にしてもらうのが目的ですが、他に良い書き方があったらぜひアドバイスいただきたいというのもあります。 試しながら、考えながら書いているので内容は変更される可能性が高いかもしれません。 Sassの新モジュールシステムについて Sassの新しいモジュールシステムについては、上述の記事や SHIFTBRAINさんのブログ がわかりやすかったです。ありがとうございます。 公式の発表と@useと@forwardのド
【SASS、SCSS】calcの計算式で変数を使うときの記述方法
このページをご覧になられたということは、SCSSでcalc()関数をご使用になられた方でしょうか。 そしてcalcの計算式に変数を入れたものの、上手く計算されないという状況でしょうか。 ご安心下さい、変数が含まれてても無事に計算できます。 以下の例はヘッダーの高さを80pxに固定し、メイン要素の高さをブラウザの高さに合わせて可変にしたい場合の計算式です。 赤線のcalcの計算式に、そのまま「$header-height」の変数を入れても、計算が上手くいきません。 それもそのはず、calcの計算式でSCSSの変数を使う場合、#{$変数名}と入力する必要があります。 以下ご確認ください。 See the Pen wvwrNNr by DoGgy (@DoGgy12) on CodePen. これで無事に計算が出来ました。 calcの四則演算のルール 実は上と別のパターンでも、calcの計算でハ
Sassを@importから@useに置き換えるための手引き - kojika17
Sassの@importルールは、廃止されることが予定されています。 @useや@forwardといったルールに置き換わるのですが、これらは全く新しいシステムです。 これらの知見が溜まってきたのでご紹介します。 @import と 新しいモジュールシステム Sassの初期の方から実装されていた@importは、テキスト形式でSassファイルを読み込むための機能です。便利な機能ですが、CSSの@importと重複しているため、SassなのかCSSなのか一見してわかりにくい側面がありました。 新しいモジュールシステムは、この問題を解消し、Sassをより柔軟に使用できるようにします。 @importではグローバルに指定されていた変数などは、ファイルごとにカプセル化され、ファイルの内容に基づいて解決できるようになりました。 現在、Dart Sassしか新しいモジュールシステムは使えませんが、Lib
レスポンシブのブレークポイントの決め方！PCデザインカンプから再現する際のベスト | HPcode（えいちぴーこーど）
「スマホは〇〇、PCは〇〇でタブレットは不要です」、みたいなのもあると思いますが、自分としてはインナーからiPadが一番崩れやすく、ここの表現はどうやってるんだろうととても不思議に思っています。 （PCは固定幅でスマホに移行するまでは水平スクロールOKとかなら分かりますが…） 今回は例題として、以下のデザインカンプをいただいたとして、どのようにブレークポイントを決めるかを紹介していきます。こちらのカンプはnoteでも販売しているものになりますので、実践したい方はぜひ！ → Photoshop、Illustrator、XDからのコーディングに慣れよう！ インナーの幅を知る ブレークポイントを決める上で重要視しているのは、インナーの幅です。インナーとは、サイトの実質的な横幅です。ウインドウサイズは可変なので、どこまでの幅を担保するかはデザインカンプの時点で基本的には決まっているはずです。 この
Sassで@mixinを作る時に知っておきたい基礎知識 - Qiita
はじめに Sassの@mixinはメンテナブルなCSS設計にも役立つ強力な機能です。 一方でゆるくも書けてしまうため、気をつけないと不格好なCSSが簡単に出力されてしまいます。 そこで@mixinを自作するにあたって、知っておきたい（おきたかった）基本知識をまとめました。何かの参考にでもなれば幸いです。 前提条件 ソースコードは.scss形式で記述しています Sass 3.4.4で動作を確認しています 使用しているModifierという単語は以下の通りです BEMと呼ばれる命名規則で使われる、基本的なスタイル（セレクタ・class）に追加する形で装飾を調整するclassのこと 目次 @mixinのおさらい 基本的な使い方 @contentの使い方 Modifierに無駄なスタイルを適用させたくない... @contentを使ってみる 制御用の引数を用意してみる 引数に配列（リスト）を使って
Sassの新しいモジュールシステム
Sassに新しいモジュールシステムが導入されます。具体的には@useと@forwardという2つのルールが登場し、@importルールは将来的に廃止される予定です。現在、Sassのおもな実装としてDart SassとLibSassがありますが、まずDart Sassへの実装が進んでいて、今年10月に安定版がリリースされる予定です。この新しいモジュールシステムを簡単に紹介したいと思います。 なお、ここで言うSassの「モジュール」とは、メンバー（変数、関数、ミックスイン）のコレクションを指し、具体的にはSassのソースファイルのことです。 背景 新しいモジュールシステムが開発された背景として、@importルールがかかえる多くの問題があります。ファイルスコープがないため依存モジュールの把握が困難になったり、名前空間を持たないためにライブラリの作者と利用者が命名を工夫しないといけなかったり、と
Bootstrap4のsassを使った効率良いカスタマイズ方法 – helog
Bootstrap4のsassを使った効率良いカスタマイズ方法です。 最近、Bootstrapをベースにしてサイトを開発することも多くなってきました。 これまでは何も考えずに、まずはbootstrap.cssを読み込んでから開発をスタートしてたんですが、経験を重ねることで、それがあまり効率が良くないことに気がつきました。 sassを使わないBootstrapのカスタマイズ Bootstrapをカスタマイズするにあたり、まずは「bootstrap.css」を読み込み、その後に読み込む「style.css」などで上書いていました。 この手法だと「プライマリカラーを変更する」「マージントップを調整する」「角丸をあり（なし）にする」などといった基本的なカスタマイズをするときに、スタイルを上書く箇所の洗い出す作業に時間を取られたり、また、洗い出しの漏れがあって一部デザイン・レイアウトに崩れが発生した
Dreamweaverで覚える最新Web開発ワークフロー: Sass編 | Adobe Blog
Dreamweaver CC ベータ版で追加された CSSプリプロセッサー CSSプリプロセッサーとは、SassなどのCSSメタ言語（CSSの元になるファイル）からCSSファイルにコンパイル（変換）するプログラムのことです。従来、CSSメタ言語をCSSにコンパイルするには、ターミナルやSassをコンパイルするアプリケーションに頼らならければなりませんでした。 Dreamweaverベータ版では、SassやLessのコンパイルに必要な環境が自動で構築されます。Windowsでは面倒なRubyなどの環境構築もDreamweaverをインストールするだけで整います。CSSメタ言語のコンパイルはファイル保存のタイミングで自動的に行われ、コマンドプロンプトなどを使わずに、CSSが生成されます。 本記事では、Sassを中心にDreamweaverベータ版の関連機能の使い方を取り上げます。 Sass自体
font-sizeの単位をvwにしてデバイスサイズに合わせて拡縮する - Qiita
スマートフォンのフォントサイズは固定でいいのか問題 スマートフォンのコーディングでpxなどの固定値を使うとiPhone6 plusなどの画面幅の広い端末でフォントサイズが小さく違和感を覚えることがないでしょうか。 フォントサイズだけではなくマージンやパディングなどでも同じことが言えるのですが、画像はmax-width: 100%などとしているため画面幅に応じてある程度大きくなるのに対し、フォントサイズなどを固定値でコーディングしてしまうと、画像や画面幅に比べて小さく見えてしまい、余白が目立ったり不自然なレイアウトに見えることがあります。 デザイナーの本来の意図を汲み取るのであれば、画面幅が広くなったときはフォントサイズなどもそれに応じて大きくなるのが一番良いのではないかと思っています。 （追記） ただし、個人的にfont-sizeを拡縮できるようにして思ったのはどんなプロダクトでも推奨でき
Bootstrap 4 をカスタマイズする - Qiita
概要 Bootstrap 4 のソースコードをいじらずに、変数を変更してカスタマイズする方法のメモ。 Bootstrap 4を使うならSassを使って3倍幸せになろう で説明されているように、スタイルの上書きでカスタマイズするのは保守性がよろしくないので、Bootstrap4の変数を変更することで気持ちよくカスタマイズする。 また、Bootstrapのソースコードを変更すると、Bootstrapパッケージをアップデートすると変更が消えてしまうので、変更内容は分離する。 とは言え、特に難しいことをするわけではなく、これこそが公式ドキュメントで説明されている方法でもある。 下ごしらえ まず、自分のSCSSファイルを作成する。名前は何でもいいが、ここではcustom.scssとする。 中身は、Bootstarpのscssファイルへのパスを指定した@importだけ。 npmで入れた場合は ../
Bootstrap 4を使うならSassを使って3倍幸せになろう - Qiita
Bootstrap 4のデザインを編集するにはCSSの更新が必要ですが、CSSだけを使うよりもBootstrap 4で導入されたSassを使う方が効率的にかつ細かくデザインをカスタマイズできます。本エントリーでは、Sassを使った効率的なデザインカスタマイズ方法を紹介します。 Bootstrap 4のデザインのカスタマイズ方法 Bootstrap 4のコンポーネント機能を用い、タブとボタンを実装したコンテンツを例にとって説明します。デモはjsdo.itにアップしています。 なお、基本的なBootstrap 4の導入方法については記事「5分で導入できるBootstrap 4 超入門 〜タブを作ってみよう〜」を参照ください。 ▲ Bootstrap 4を使って実装したタブとボタン このコンテンツに、下記のデザイン更新を加えてみましょう。 全体の角丸をなくす 青い背景部分を赤い背景にする デザイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Live Sass Compilerの使い方と設定【出力先も解説】｜しょーごログ
Sass・SCSSで使えるコメントアウト、「/* */」と「//」のコンパイル時の違い | WEMO
SCSSの変数と、CSS3のcalc()を併用するには - Qiita
The Blog | Welcome to Adobe Blog
