今回はフォントや画像をvwで指定するmixinについて紹介します。ブラウザサイズに応じてサイズが可変できるので柔軟なレスポンシブが可能です。 説明環境は以下 macOS Catalina v10.15.5Visual Studio Code v1.52.1 フォントや画像をvwで指定するmixin vwで指定するためには、px数値をvwに変換する必要があります。そのためにSassのfuctionとmixinを使います。 mixinに書くこと vwの指定をするために、以下のmixinを書きます。 //pxをvwに変換するfunction @function _get_vw($size, $viewport: 375) { $rate: calc(100 / $viewport); @return $rate * $size * 1vw; } //フォント用のmixin @mixin font

Sassには便利な書き方がたくさんあるのですが、都度調べるのも面倒なので便利そうなコードを簡単にまとめました。 ブレイクポイントの設定 // ブレイクポイント ------------------------------------- $breakpoints: ( pc: "screen and (min-width:840px)", sp: "screen and (max-width:839px)", lg: "screen and (min-width:1280px)", md: "screen and (max-width:1279px) and (min-width: 960px)", sm: "screen and (max-width:959px) and (min-width:600px)", xs: "screen and (max-width: 599px)", );

2017年2月22日 CSS, 色彩 Sassがデフォルトで用意している関数や、それを応用して設定できる小技やMixinをまとめてみました。紹介しているほとんどの小技が、色を一色してすれば他の色も自動生成してくれる…という便利なものです。Sassを勉強中の方はもちろん、ゴリゴリ使いこなしている方も参考にしてみてください！Sassの基本的な情報は、過去記事「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」に書いています ;) ↑私が10年以上利用している会計ソフト！ 目次 透明度の書き方を簡略化 色の明度を調整する 色の彩度を調整する メインカラーの明度や彩度を調整して、リンク色を手軽に設定 背景のグラデーション 文字をグラデーションにする 縞模様の背景 抑えておきたい基本編 1. 透明度の書き方を簡略化 通常色の透明度を指定する時は rgba(0,

このサイトは、2017年9月15日に発売した、書籍「Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ」の公式サポートサイトです。 試し読み用のPDFや、書籍内で掲載されているソースコードの一覧、サンプルファイルなどが有ります。 また、初版と改訂2版の違いが分かるページも用意しました。改訂2版の購入を検討している方の参考になればと思います。

今時flexをベンダープレフィックス対応にする需要が どの程度あるのか疑問ですが、sass学習の一環として作ってみました。 ※括弧内に入れた文字列が間違っていたり空だった場合は、 デフォルト値で出力するようになっています。 SCSS _mixin.scss で読み込むようにします。 // display: flex // ---------------------------------------- // @mixin flex { display: flex; display: -ms-flex; display: -webkit-flex; } // flex-direction // - row : row // - rowR : row-reverse // - col : column // - colR : column-reverse @mixin flexDirectio

今回は@mixin。 @mixinはスタイルをまとめて定義することが出来る便利な機能です。 これだけみると前回ご紹介した@extendと似ているのですが、@mixinは引数を使えるという点と、@extendと違いセレクタがグルーピングされない、という点において違いがあります。 この説明だけではピンとこないと思うので、早速、使い方をみていきましょう。 @mixinの使い方 まず、@mixinの後に任意のミックスイン名をつけ、 {}の中の宣言ブロックに定義したいスタイルを記述します。 @mixin ミックスイン名 { 定義したいcssプロパティ } そして、定義したミックスインを使う場合は、 ミックスインのスタイルを適用させたいセレクタの宣言ブロックに、@includeとミックスイン名を記述します。 セレクタ { @include ミックスイン名; } 尚、ミックスイン名に使用できる文字は変数

※当サイトは、アフィリエイト広告を利用しています 2022/11/02 【コピペOK】Sassで簡単にメディアクエリを使用する方法 プログラミング Sassは簡単にスタイルを記述できる便利なものって思ってませんか？、、、間違ってはいませんがその認識だけじゃ勿体ない、Sassの真価を体感できるのはメディアクエリを使った時です。 目次【本記事の内容】 [ click ] １.Sassで便利なメディアクエリの書き方【コピペOK】 ①：変数とミックスインで定義 ②：実際に使用してみる ２.まとめ Sassで便利なメディアクエリの書き方【コピペOK】 CSSでメディアクエリを指定するのってめんどくさいですよね、たくさん作ると管理も大変だし、工夫してまとめるにしても少し手間がかかるので正直だるいです。 そこで、これから紹介するSass式メディアクエリを使えば、コード量もグッと減り、width指定も一括

Sass（※この記事ではSCSSを指します）やLESSといったCSSプリプロセッサがどんどんメジャー化しています。 しかし、私の実感としてまだまだ使っていない人も多いのではないか？と思っています。 導入が難しそう。書き方がわからない。CSS使えなくなってしまうの？ 色々な疑問や不安があると思います。ですが、Sassはあなたが考えるほど難しくありません！ わたしもSassを使い始めて、まだ半年とちょっとです。そんな私の使い方をご紹介したいと思います。 ※この記事では導入部やコンパイルの紹介はしません。 ※前提 Sassを書けば勝手にCSSをいい感じに書いてくれる！というものではありません。 まだCSSにちょっと自信がない人は、まずはCSSに慣れたほうがいいです。 どんな効率化ツールを使うときでも、根本となる基礎はきちんと理解しましょう。 (1).scssファイル内にCSSを書く まずはここか

レスポンシブWebデザインではメディアクエリ（media queries）を書くことが多くなります。通常のCSSではブレイクポイントを変更したくなったときに、すでに書いてしまった箇所を直していくのはとても大変です。 Sass（scss記法）を使えば、変数や@mixinを使うことで1箇所で管理することが容易になります。今回はSassでメディアクエリを管理する方法を紹介します。 ブレイクポイントを変数（マップ型）で定義する メディアクエリにはブレイクポイントと呼ばれる処理を変更する横幅を決めます。通常のSassの変数でブレイクポイントを定義した場合は以下のようになります。 $breakpoint-sm: 400px !default; $breakpoint-md: 768px !default; $breakpoint-lg: 1000px !default; 今回は変数は変数でも、マップ型

CSSの記述を効率化し、メンテナンス性も向上するSassの導入から基本的な使い方までまとめました。 対象の方は下記のとおりです。 Sassで書きたいけどコンパイルがよく分からない Sassをコンパイルできるようになったけど、書き方が分からない CSSはある程度理解できたので次のステップに進みたい