sassでベースカラーを元に色の変更を行う関数を忘れがちなのでメモ HSL［色相（Hue）、彩度（Saturation）、輝度（Lightness）］ベース Photoshop等で使用されるHSB(HSV)［色相（Hue）、彩度（Saturation）、明度（Brightness・Value）］ではない HSBで色を変換したいときは「Sassで色空間『HSB』を扱う関数を作った話」で関数を作成されています 色相の変更 adjust-hue($color, $degrees) 色相環の度数($degrees)を○○degで指定 // ベースとなる色 $base-color: #79a5e0; .adjust-hue { color: adjust-hue($base-color, 60deg); }
こんにちは、うにぽたです。 初Qiita投稿にしてAdc大遅刻です・・・すいません。 CSSメタ言語 CSSはスタイルシートと言うだけあって構造化の点で弱さのある言語です。 大規模開発で複雑化してくるとBEMやFLOCSSなどの設計手法を取り入れることもあるわけですが、メタ言語として問題の改善を図ろうとするアプローチがありました。 メタ言語というのはこの場合最終的にCSSを出力するような、独自の機能拡張を行なっている言語のことです。 Sassもその１つです。 この記事 Sassの具体的なメリットを挙げる前に、この拡張言語には２つの記法が存在することを知ってもらう必要があります。 Sass記法と、SCSS記法です。 実にややこしいですね。 ググラビリティ(Google検索のしやすさ)を大幅に下げている要因です。 Sass記法 Sassの元々の記法は次のようなものでした。 インデントによりネス
タイトルからは意図がわかりづらいかもしれませんが、端的にいうと変更に強いSassを書いて修正や改修時につらくなりにくい状態にしておきたいというはなしです 作業途中や改修でサイトのデザインが変わったり一部分の色が変更になったりする場合があると思いますが、そういうときにすばやく散らからずに対応できるようになります。 カラーパレット変数を作り、機能(パーツ)ごとにカラー変数作る 言ってしまえばこれだけです。 例をみていきましょう。 まずカラーパレットをつくります $palette-trueWhite: #fff $palette-trueBlack: #000 $palette-sunnyRed: #FF141C $palette-cherryRed: #D41655 $palette-sandGray: #999
前回はネストや変数などSassの基本機能をご紹介しましたが、今回はもっと便利にスタイルシートを記述するためのSassの機能をご紹介したいと思います。 前回の記事はこちら↓ 【初心者向け】ここから始める「Sass」の使い方まとめ CSSの記述を効率化し、メンテナンス性も向上するSassの導入から基本的な使い方までまとめました。 対象の方は下記のとおりです。 Sassで書きたいけどコンパイルがよく分からない Sassをコンパイル... Web Design Trends インポート（@import） Sassは、外部のファイルをインポートすることができます。例えば、スタイルガイドによって定義されたカラーやフォントファミリーの定義などを外部ファイルに変数として用意しておき、それを読み込むことによって、後でスタイルガイドに変更があった時もそのファイルだけを変更すれば対応することができます。 インポ
Sass（サース[2][3]、英: Syntactically Awesome Style Sheets）は、ハンプトン・キャトリン[4]が設計しネイサン・バイゼンバウム[5]が開発したスタイルシート言語である。[6][7] 後にSassファイルに用いられる単純なスクリプト言語である SassScript 用の拡張が加えられた。 Sass は Cascading Style Sheets (CSS)で解釈される2種類の構文で構成されたスクリプト言語であり、SassScript はスクリプト言語自体を示す。 はじめにできた「インデント構文」では、Haml（英語版）と同様にコードブロックや改行コードを分離する際に字下げを活用している。単にSassと言ったらインデント構文のことを指す場合も多い。[8]新しい構文である「SCSS」（Sassy CSS）は、CSSのようなブロックの書式を使用し、ブロ
「ソフトウェア開発ファシリテーション」アドベントカレンダー25日目の記事です。 「より良いソフトウェア開発のために、今していることは何だろう？」という問いへの内省のためにアドベントカレンダーに乗じて毎日投稿を続けてきまし…
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
Sass 3.2 からは placeholder selector を使おう この article は CSS Preprocessor Advent Calendar 2012 の25日目のエントリーとして書かれています(あれれ?!)。 ご挨拶 2012年も皆様の願い空しくクリスマスは中止されず、それどころか今年も元気に Santa Tracker がサンタクロースを追いかけ回していたわけですが、CSS メタ言語 lover の皆様におかれましてはいかがお過ごしでしょうか。僕個人は今年の師走は今までにない師走っぷりで、一番ヤバい時は某 b 社にいた20代の頃を思い出す感じでした。いつもだいたい忙しいピークは夏に来るんですが今年は違いましたね。でもひとまず何とか乗り切れました。そう、もちろん Sass があったからです。これがなかったらと思うと恐ろしいですね。2012 年の冬、僕を救ってく
皆さまお久しぶりでございます。 ラーメン女子のうさこです。 会社に入ってもうすぐ１年が経とうとしています。 早いですね・・・色々ありましたが本当にあっという間でした（遠い目 今年も残りわずか 26 日ですよ・・・っ 皆さま、やり残したことはありませんか？・・・わたしはいっぱいあります。 最近はラーメンを食べる機会が徐々に減ってきています。 ちょっとは体に気をつけなきゃいけないお年頃に・・・。 前回の記事「Sublime Text 2 を使ってみよう（コーダー編）」が大変好評だったので、今回はそれに関連付けた記事とさせていただきますっ こちらの記事は、CSS はある程度書けるんだぜッ！という方を対象としています！ CSS をこれから勉強するつもりである方は、ある程度習得してからトライしてみてください！ 昔の恩師からよく言われていました・・・Step by Step です！ 目次 Sass の
そんな訳で、前回は Middleman のインストールから基本的な機能まで学習しました。今回はより本格的に使いこなすために、Middleman の持つ膨大な機能の中から僕が比較的多用している機能を7つばかり紹介していくとします。Middleman って何？という方は、先に以下の記事をご参照ください。 [ Middleman で超速プロトタイピング ] #01 Middleman の基礎を一気に学ぶ テンプレート - レイアウトを無効にする すべてのテンプレートファイルは何らかのレイアウトに囲われた状態で出力されますが、時にレイアウトを全く使用したくないという状況もあるでしょう。具体例として、モーダルダイアログ内に読み込む外部ファイルなどが考えられます。そんな時はテンプレートファイルがレイアウトに囲われないように無効化する訳ですが、以下の二種類の方法でこれを解決することが出来ます。 Fron
CSS’ simplicity has always been one of its defining, most welcome features. CSS style sheets are just long lists of rules, each consisting of a selector and some styles to apply. But as our websites and applications get bigger and become more complex, and target a wider range of devices and screen sizes, this simplicity—so welcome as we first started to move away from font tags and table-based lay
2017年2月22日 CSS 以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！ ↑私が10年以上利用している会計ソフト！ 目次 Sassの基礎知識 @mixin の基本的な使い方 リンクカラーを一括設定 ベンダープレフィックス 透明度 絶対位置の指定 rem を使ったフォントサイズ指定 レティナディスプレイ対応画像 Compassについて軽く。 Sas
Webサイト制作にSassを本格的に導入してみました。単に便利なだけではない色々メリットがあるということに気づいたので、かんたんにまとめてみます。 CSSでは不可能な入れ子構造で書けるのは、思ったより便利 Sassでは、CSSではできない入れ子構造での記述が可能です。たとえば、公式サイトの例ですが… table.hl { margin: 2em 0; td.ln { text-align: right; } } li { font: { family: serif; weight: bold; size: 1.2em; } } このSassファイルをコンパイルしてCSSファイルに変換すると、このようになります。 table.hl { margin: 2em 0; } table.hl td.ln { text-align: right; } li { font-family: serif;
Translation of Sass: Sass Basics Sassを使えるようにするには、まずあなたのプロジェクトにSassをセットアップする必要があります。もし単にこの文書を読みに来ただけなら、そのまま読み進めてください。しかしながらまずSassをインストールすることを薦めます。インストール手順の解説を読めば、セットアップに必要なことは全て知ることができるでしょう。 プリプロセス 変数 ネスト パーシャル インポート ミックスイン 継承 演算子 プリプロセス CSSはただそれだけで楽しいものです。しかし、スタイルシートは大きく、より複雑に、そしてメンテナンスしづらくなっていってしまいます。プリプロセッサーが改善するのはそういったところです。SassはまだCSSにない機能、例えば変数やネスト、ミックスイン、そして継承などの機能を使えるようにし、CSSを再び楽しい物にしてくれます。
この article は Less & Sass Advent Calendar の23日目のエントリーとして書かれています(あれれ?!)。 概要 CSSメタ言語を導入する目的の一つにリソース再利用性の実現というものがある。Sass の場合、mixin や extend によって実現している。特に extend によるスタイルの継承は強力である。 しかし再利用できるようなクラスをまとめたライブラリを import して利用すると、実際には使われていないクラスも出力されてしまい、ファイル容量が無駄に肥大する。使うクラスだけコピーするとか、使わないクラスは削除するなどの手動管理は手間がかかる。 そこでクラス自体を出力するような mixin を作れば、必要なクラス定義だけを include でき、不要な CSS コードを出力しなくて済む。しかし、extend したいクラスを必要になる度に inc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
