This domain may be for sale!
Sassには色調節の関数が色々用意されています。その中にadjust-color()というRGBとHSLで色を割合ではなく指定量だけ調節できる汎用関数があるんですが、RGBをそれぞれ同じ量だけ明るく(暗く)したい時の引数指定が面倒です。というわけでそれをラップするadjust-rgb()という関数を作ってみました。 @function adjust-rgb($color, $dec: 1) { $num: 255 * $dec; @return adjust-color($color, $red: $num, $green: $num, $blue: $num); } 第一引数で色を、第二引数で係数を指定します。係数は-1から1の間で、負の値を指定すると黒に近くなり、正の値を指定すると白に近くなります。 .test { color: adjust-rgb(#369, 0.2); // re
今回は変数についてです。 $ から始めて、値はCSSと同じようにして設定します。 こんな感じ。 Scss $margin: 2em 0; // $margin に "2em 0" をいれて定義する。 h1 { margin: $margin; } CSS h1 { margin: 2em 0; } 変数はそれが記述された{}内でのみ有効になります。 どのCSSルールセットやmixinにも含まれない場合、どこでも使えるグローバルな変数になります。 こんな感じ。 Scss h1 { $margin: 2em 0; // ここで$marginを定義する。 margin: $margin; } p { margin: $margin; // ここでは使えない!コンパイル時にエラーになります。 } インターポレーション 変数はプロパティの値だけでなく、セレクター名やプロパティ名にも使うことができます
余計な改行や空白は削除されます。 例外として、セレクタの結合子(+ や >)の前後には空白が挿入されます。 最後のプロパティのセミコロン(;)や余分なセミコロンが削除されます。 カラーコードは6桁のまま出力されます。3桁にはなりません。 ただし、Mixinを通したものはどの出力形式でも条件によって出力される値が変わります。 rgbは可能なものはカラーコードに変換されます。 0pxは0にはならず、そのまま0pxで出力されます。 noneは0にならず、そのままnoneで出力されます。 0.5emは.5emにはならず、そのまま0.5emで出力されます。 空の宣言ブロックは出力されません。 CSS/Sassコメント Scss selector-1 { margin: 0; } /* * 複数行CSSコメント * 複数行CSSコメント */ selector-2 { /* 1行CSSコメント */
Less & Sass Advent calendar 2011の7日目です。 勢いで参加登録をしたのは良いのですが、記事を投稿するBlogをもっていなかったため自作しました。 はい。完全にスタートの仕方を間違いました…おかげで超大変でしたBlog作るのが。 heroku + padrino + postgresql にてかろうじて動いております。 さて、前回までのみなさんの記事で、Sassの概要や導入方法、ベンダープリフィックスを気にすることなく開発が進められる有用性、便利なfunction methodなど、Sass/Lessの良さ感じていただけたかと思いますが、この投稿ではSassの実戦導入に向けて、もうちょっとだけ背中をそっと押せる内容を書いてみようかと思います。 実際、僕もSassを導入するか検討していた時期に心配していた事だったりします。 「Sassって便利なのは解るけど、コン
はじめましての tacamy です。 さて今日は Less & Sass Advent calendar 2011 の 3 日目です。 「Sassかぁ。まーたしかに便利そうだけど、 実務で使えるか分からないし自分には関係ないかな。」 とか思ってませんか・・・!? ぜんぜんそんなことないですよ!( ・`ω・´) その証拠に、NAVER では半年ほど前から、 新規サービスはすべて Sass を使って制作していますが、問題なく使えています。 むしろ効率化できて、CSS を書く工数が減った気もします(個人の感想です)。 小難しいテクニックは、このあとの 22 人が書いてくれると思うので(丸投げ)、 今日の記事では、Sass を実務で使うことに絞って書いてみます。 実務でSassを使うメリットって? 制作の工数が減る CSS3 を使うときのベンダープリフィックスをいちいち自力でつけたり、
Translation of: Getting Started with Sass - A List Apart CSSの持つその簡明さは欠かせない特徴の一つで、それは最も歓迎されている点でした。CSSによるスタイルシートは、セレクターといくつかの適用したいスタイル情報を含むルールを羅列したものに過ぎません。しかし、WebサイトやWebアプリケーションが巨大に、そして複雑になり、様々なデバイスや画面サイズに対応せざるを得なくなった現在、この簡明さという特徴―fontタグやテーブル・レイアウトの淘汰に大いに役にたったもの―が大きな足かせになっています。 簡単な計算機能や変数を追加するなどといったCSSの修正案が過去に提示されましたが、どれもブラウザー・ベンダーには採用されませんでした。仮にこういった新しく素晴らしい拡張されたCSSがあるブラウザーに実装されたとしても、それが実用に耐える程度に
Compass is a stylesheet authoring framework that makes your stylesheets and markup easier to build and maintain. With compass, you write your stylesheets in Sass instead of CSS. Compass.app helps designers compile stylesheets easily without resorting to command line interface. It is written in Java and works in Windows/Linux/Mac OS X. Screencast Screenshot OSX Windows Linux Project list Compass In
HamlとSassのバージョン3.1が4月24日にリリースされました。元々両者は同じプロジェクトだったのですが、今回のリリースから別々のgemとなり、インストールも別にできるようになりました。 Hamlはインデントを使ってシンプルにHTMLを生成できるテンプレートエンジン。SassはHamlとセットで誕生した、インデントを使ってCSSをシンプルに書ける独自のスタイル指定言語です。CSSを書くのが苦痛じゃなくて、楽しくなるという触れ込みです。 Hamlのほうは、今回はSassの分離が大きなトピックである以外は変化はありません。変化が大きいのは「Brainy Betty」と名付けられたSass 3.1.0のほうです(brainyって脳みそが詰まっていて頭が良いという意味ですね。変な名前を付ける人たちです……。Sass自体も、生意気な女という意味で使われる「sassy girl」にかけているんだ
CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために
この文書は古いSassウェブサイトに載っていたチュートリアルの訳で、2013年12月現在もう新しいウェブサイトには存在しません。新しいウェブサイトでのチュートリアルにあたるSassの基本の日本語訳を参照してください。 Translation of: Sass - Tutorial Ruby と Sass のインストール まず、Sass がちゃんと動作するようにします。OS X を使用しているのなら、既に Ruby がインストールされているでしょう。Windows ユーザーならば Ruby のWindows インストーラーで、Linux ユーザーならパッケージ・マネージャーでそれぞれ Ruby をインストールすることが出来ます。 Ruby のインストールが完了したら、以下のようにして Sass のインストールを行います: gem install sass 最初の Sass スタイルシート 非
LESSとSassを比較していました LESS « The Dynamic Stylesheet language Sass - Syntactically Awesome Stylesheets ここ半年ぐらいの間に,名前を聞くようになったSassと,それに影響されて作られた後発のLESSを比較検討したところ,以下のような理由からLESSを使うことにしました. 今回は,自分の作業の効率化はもちろん,将来的にチームでシェアできる技術になり得るか,という観点から選択しています. LESSを選ぶ理由 LESS.appというGUIツールが存在する node.jsで動くWebフレームワークExpressがLESSに標準対応している(らしい) 文法がSassより素直&シンプルで慣れてもらいやすそう この中でも,LESS.appの存在が一番の決め手となって,マイナーなはずのLESSに軍配が上がってしま
僕もようやく Sass をはじめました。評判どおり、ヤバいです。CSS を書くすべての人に習得してほしいとすら思います。とくに、最近 CSS を書いていてもつまらなかったり、設計に行き詰まりを感じたりしている人は、迷わず Sass を試してみるべきです。Sass のサイトには “Sass makes CSS fun again”—「Sass でもう一度 CSS を楽しく」というフレーズが掲げられていますが、ハッタリではありません。 しかし、実際に Sass を導入するのは敷居が高いと感じる人も多いのではないかと思います。コマンドラインとかよくわからん、独自構文の学習コストが気になる、実際に仕事で使えるのか疑問…など。 そこでこの記事では、僕が Sass をはじめるにあたって感じていた不安などをもとに、「Sass は難しくないよ!」というアピールを試みます。少しでも Sass 導入の障壁を取
使いまわしそうなSassのコードをメモっておいたら、(自分が)便利かなあとか思ったので載せておくテスト。 // =============================== // Variables // =============================== $red: #f00; $blue: blue; // =============================== // Mixins (Include) // =============================== @mixin link { color: #00f; } @mixin link_h { color: #fff; background: #00f; } @mixin link_v { color: #600; } @mixin min-height($px) { min-height: $px
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く