Sassを使うなら知っておくと便利な色まわりの小技やMixinいろいろ
Sassを使うなら知っておくと便利な色まわりの小技やMixinいろいろSassがデフォルトで用意している関数や、それを応用して設定できる小技やMixinをまとめてみました。紹介しているほとんどの小技が、色を一色してすれば他の色も自動生成してくれる…という便利なものです。Sassを勉強中の方はもちろん、ゴリゴリ使いこなしている方も参考にしてみてください！ 抑えておきたい基本編1. 透明度の書き方を簡略化通常色の透明度を指定する時は rgba(0, 0, 0, 0.5); という具合で、RGB 値に続いて透明度（0〜1 の値）を記述します。しかしカラーコードで書き慣れていると、カラーコードから RGB 値に生成して指定する…というのが少し面倒だったりしますよね。Sass ならカラーコードのまま透明度の指定も可能です。 Sass（.scss）ファイル$main-color: #0bd; div
[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ
15 essential Sass mixins 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Sassやってみたい、と考えてる人には下記の本をオススメします。 Sassの初心者からもっと使いこなしたい人まで、Sassを確実にマスターできるオススメの本 -Sassの教科書 box-sizing（ボックスサイズ） opacity（不透明度） column-width（カラム幅） circle（円形） font-size（フォントサイズ） box-shadow（ボックスシャドウ） xPos（要素の座標） vertical-align（天地の中央に配置） flexbox（フレックスボックス） flex（モダンブラウザの旧仕様にも対応したflexの指定） flex-order（表示の順番） flex-direction（表示の方向） gra
![[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/41a2e814247663ad1040b747f3c634ccd698a028/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014111701.png)
Sass(SCSS)＋Koalaを使ってみよう。導入編 | みずかず
Sass(SCSS)を使ってみよう。導入編 CSSプリプロセッサーを知って数年。 SassかLESSか・・・ Rubyのインストール..コマンドライン..コンパイル..なんか面倒・・CSS3だってろくに覚えてない・・・ そんな風に思ってきたけどやっぱり便利な方がいいし、今時知らないと・・みたいになってきたので。 LESSはSassの機能限定版？みたいな感じのJacascriptベース（SassはRubyベース）で記述もCSSとほぼ同じで覚えやすそうですが、それはSCSSでも同じだし、なによりSass(SCSS)で使えるCompass（Sassを更に便利に使いやすくするためのフレームワーク的なもの）に興味深々。 それとBootstrap3ではLESS・Sass(SCSS)を使っていて、Bootstrap4からはSass(SCSS)になったので、この際Sass(SCSS)を覚えていこうと決心。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]擬似クラス:nth-childの便利な使い方をまとめたスタイルシート -Family.scss![[CSS]擬似クラス:nth-childの便利な使い方をまとめたスタイルシート -Family.scss](https://cdn-ak-scissors.b.st-hatena.com/image/square/b207777a32dc752d935a2b7da91e3e1499edd6c7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016110906.png)
