Sassでメディアクエリを効率的に管理するマップとmixin - Qiita
$breakpoints: ( 'sm': 'screen and (min-width: 400px)', 'md': 'screen and (min-width: 768px)', 'lg': 'screen and (min-width: 1000px)', 'xl': 'screen and (min-width: 1200px)', ) !default; 例えばsmがkeyでscreen and (min-width: 400px)がvalueになります。valueをクウォートで囲んで文字列として明示的に定義しておきます。 上述したmap-get()関数の$mapは定義したマップの$breakpointsにあたり、$keyはsmやmdなどにあたります。mixinは以下のように定義します。引数にkeyを渡してvalueをブレイクポイントとして取得できるようにしています。 @mi
scssの配列ループ＋変数でカテゴリ色分けなどを簡単にするよ！ - Qiita
配列＆ループを使って、同じようなものをコード少なくしたい。。。 試してみたら、コケるポイントがあったので、メモメモ。 やりたかったこと。 こんな感じのものがあって、
keyframes（CSS3）とSassでイケてるアニメーションをシンプルなコードで実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいとです。 最近のブログではまとめ記事中心に書いていたのですが、このまえ編集担当の朽木に「最近エンジニアっぽい記事書いてないよね。」というグサっとくる一言をもらったので、今回はそれっぽい記事を書いてみようと思います。 はじめに モダンブラウザでは、CSS3のanimationプロパティ、@keyframesの2つを使ってイケてるアニメーションがJS抜きで実装できます。 そいつあすごいぜって話なんですが、1つ心配なことが。 それは、アニメーションのバリエーションが複数ある場合、コード量が長くなりがちという問題。 ただでさえ各ブラウザのベンダープレフィックス付ける必要があるので、その上アニメーションパターンをいくつも書こうとしたらもう…（´Д`） 実践その1 というわけで、Sassを使って簡潔に書くことにしましょう。 試行錯誤を繰り返し、いろんなサイト
SCSSの基本的な書き方 - Qiita
div {width: 300px; height: 200px; background: red;} div:before {content: ''; display: block; width: 300px; height: 150px; background: blue;} div.hoge {width: 150px; height: 29px; background: yellow;} /* classがhogeのdiv */ div .hoge {width: 120px; height: 53px; background: green;} /* divの中にいるclassがhoge */
Bootstrap3で5等分のレイアウトを作成する - Qiita
Bootstrapは偶数での分割をする場合には使い勝手はいいのですが、奇数での分割をする場合はなかなかやりづらい部分があります。 特にwebサイトのコンテンツには5等分のレイアウトで作成されているもの（メニューとか）がよく出てくるので、使用頻度もそれなりかと思います。 私が5等分するにあたって、主に2通りの作成方法を採っています。 1. col-xx-offset-(n)を使用する 以下の方法です <div class="row"> <div class="col-md-2 col-md-offset-1"></div> <div class="col-md-2"></div> <div class="col-md-2"></div> <div class="col-md-2"></div> <div class="col-md-2"></div> </div> offsetを使用して左側
SCSS で変数を使用する | まくまくSassノート
変数の値をそのままプロパティの値として使用する場合は、上記のように $変数名 の形で参照すればOKです。 何らかのキーワードの一部（セレクタ名の一部など）や、コメントの中で変数の値を参照する場合は、インターポレーション（#{$変数名}）の形式で参照する必要があります。 インターポレーションで文字列変数の値を参照すると、引用符は削除されて展開されます。 入力 (SCSS)
現場で役立つ実践Sass（5）関数も使おう
現場で役立つ実践Sass（5）関数も使おう 連載 現場で役立つ実践Sass 第5回目は、Sassの関数（functions）について紹介します。 プログラミング言語では必ず出てくる関数。Sassでは主にCSSの値を処理する際、例えば、あるプロパティで指定した色を「30%明るい色の値にする」といった目的で使用します。 公式サイトの基本機能の紹介「Sass Basics」でも紹介されているMixinやExtendなどの類似した機能が注目されがちですが、関数こそすぐに導入できる機能と言えます。 なぜなら、おおよそ80種類もの便利な関数が用意されており、定義しなくてもそのまま使えるからです。 もちろん、自作関数を定義することもできます。関数の特徴を理解したら積極的に使っていきましょう。 DreamweaverがSassに正式対応 先月公開された、Dreamweaver CCの2016年11月リリー
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。
Sassの基本
Translation of Sass: Sass Basics Sassを使えるようにするには、まずあなたのプロジェクトにSassをセットアップする必要があります。もし単にこの文書を読みに来ただけなら、そのまま読み進めてください。しかしながらまずSassをインストールすることを薦めます。インストール手順の解説を読めば、セットアップに必要なことは全て知ることができるでしょう。 プリプロセス 変数 ネスト パーシャル インポート ミックスイン 継承 演算子 プリプロセス CSSはただそれだけで楽しいものです。しかし、スタイルシートは大きく、より複雑に、そしてメンテナンスしづらくなっていってしまいます。プリプロセッサーが改善するのはそういったところです。SassはまだCSSにない機能、例えば変数やネスト、ミックスイン、そして継承などの機能を使えるようにし、CSSを再び楽しい物にしてくれます。
Sassってなに？だった私がSassの使い方を解説してみた｜dwango creators' blog（ドワンゴクリエイターズブログ）
こんにちは。 新卒デザイナーのshikaです。 入社から早くも3か月が経ちました。仕事をする上で「高いクオリティ」と「限られた時間」との両立がどれほど大変かということを、強く実感しています。学生の時は時間に余裕もあり、ポートフォリオを作る時も自由に時間を使えました。Webページの制作にもCSSを生のまま書いていたのですが、コーディング作業の効率化をしようと思い、以前から気になっていたSassに手を出してみました。 その結果、ある程度使えるようになったので、Sassの導入方法や初歩的な部分を解説してみようと思います。 Sassって？ Sassとは、「Syntactically Awesome StyleSheet」の略です。直訳すると構文的に、凄い、スタイルシート…？ とりあえず、いろいろ便利になったCSSというイメージで大丈夫だと思います！ Sassは2種類の構文で構成されたスクリプト言語
WP-SCSS
This plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress. Description Compiles .scss files on your wordpress install using ScssPhp. Includes settings page for configuring directories, error reporting, compiling options, and auto enqueuing. The plugin o
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説 上村 光星 10月12日にSass 3.3.0.rc.1が出ました。まだリリース候補ですが、どのような機能が追加されるのかはChangelogにあります。今回は「&」と@at-rootについて解説します。 HTML+CSSの命名規則にBEM方法論、もしくはHTML+CSS向けに派生したMindBEMdingを取り入れる方が増えてきているようです（筆者は使っていませんが…）。「&」の新機能と@at-rootは、このBEMのためといっても過言ではありません。 Sass 3.2の「&」 「&」は親セレクタを参照する特別なキーワードとして、Sass 3.3よりも前からありましたが、擬似クラスや擬似要素、セレクタの連結など、用途が限られていました。 // Sass 3.3よりも前の「&」の用途の例 .foo { &:hover
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[SCSS]便利な&（アンパサンド）の使い方メモ - Qiita![[SCSS]便利な&（アンパサンド）の使い方メモ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b420d7a2870e66c3001502b41d344af6f72d0d4b/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCU0NTUyU1RCVFNCVCRSVCRiVFNSU4OCVBOSVFMyU4MSVBQSUyNiVFRiVCQyU4OCVFMyU4MiVBMiVFMyU4MyVCMyVFMyU4MyU5MSVFMyU4MiVCNSVFMyU4MyVCMyVFMyU4MyU4OSVFRiVCQyU4OSVFMyU4MSVBRSVFNCVCRCVCRiVFMyU4MSU4NCVFNiU5NiVCOSVFMyU4MyVBMSVFMyU4MyVBMiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZjFhNWJlNmIwYThjNjdiMTAyZTUxZmUzODZjMTFjNTc%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbm9xdWEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTQxNTYyNDZiYzEzOWM5YmQzYjlhM2M1ZTU1M2QwMTFm%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D17dd7fb00fd7c0e6248dd1742d2a28b4)
Sass(Scss) Memo: 変数 | Culture27
SCSSの変数と、CSS3のcalc()を併用するには - Qiita
jsdo.it
レスポンシブデザインにするためにやったこと - Qiita
GitHub - ConnectThink/WP-SCSS: Wordpress Plugin that compiles sass using scssphp
