タグ

SASSに関するiwmrのブックマーク (5)

  • [Compass] 超訳 Configuration Reference

    CSSのメタ言語、Sassベースで作られた便利なフレームワーク、それがCompass。 Compassの設定ファイルはRubyファイルです。 これはRubyを知っていれば色々なことが出来るということなんですが、逆にRubyを知らないと取っつきにくさがあると思います。 それで損をしてしまうのはあまりに勿体無いので、オレオレリファレンスを書いてみました! ※この記事は完全な和訳ではありません。 基的な書き方 コメント Windowsユーザー向けの注意 設定項目 動作に影響するもの URL関連 Sprite画像の自動生成用 コマンドラインでのオーバーライド コマンドライン経由で渡される設定の検査 Compass 用プラグインの読み込み コンフィグ関数 add_import_path asset_host asset_cache_buster watch コールバック on_sprite_sav

    [Compass] 超訳 Configuration Reference
  • Sassの勉強 #10 関数一覧(Ver.3.4) と自作関数

    Sassに用意されている関数一覧 Sassのネイティブ関数一覧は下記リファレンスで確認できます。 >> Module: Sass::Script::Functions — Sass Documentation 色関連の関数 RGB関連の関数 rgb($red, $green, $blue) 赤、緑、青の値から色を作成する。 rgba($red, $green, $blue, $alpha) 赤、緑、青、およびアルファ値から、色を作成する。 red($color) RGBの赤(R値)を返す。 green($color) RGBの緑(G値)を返す。 blue($color) RGBの青(B値)を返す。 mix($color1, $color2, [$weight]) 2つの色を混ぜて中間色を作成する。 HSL関連の関数 hsl($hue, $saturation, $lightness) 色相

    Sassの勉強 #10 関数一覧(Ver.3.4) と自作関数
    iwmr
    iwmr 2015/02/05
  • CSS の calc を使えば複雑なサイズ指定が可能らしい | NeGiMeMo.net

    bell賞味期限切れコンテンツ この記事は公開または最終更新から1521日くらい経過しています。 このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。 こんにちは。 サイトを作ってる時、デザインによっては、%指定とピクセル指定を混在させたい時ってありませんか? 例えば、「幅100%指定しつつそのなかの要素はそこから10px引いたサイズを利用したい」なんて状況ですね。 そんな時は calc() というファンクションを使うと簡単に実現できるそうです。 どんな時に使うのか 例えば hx タグの装飾でたまに見かけるこーんなデザイン 普通に書くとこんな感じでしょうか? h1 { font-size: 16px; border: 1px solid #cccccc; background-color: #2f3297; position: r

    CSS の calc を使えば複雑なサイズ指定が可能らしい | NeGiMeMo.net
    iwmr
    iwmr 2015/02/04
  • SASS/SCSSで基本カラーを設定して効率よくカラーバリエーションを作成する

    SASS/SCSSで基カラーを設定して効率よくカラーバリエーションを作成する SASS/SCSSには様々なカラーコントロール機能がありまして、この機能を利用すればカラーバリエーションの作成やカラー修正など効率的に行うことができますよ。 投稿日2013年06月27日 更新日2013年06月28日 共通のSCSSファイルを作成する カラー設定は他のSCSSファイルから共通して使用すると効率が良いです。 なのでカラー設定用のSCSSファイルを最初に作成します。 共通の変数は「_variables.scss」というファイル名にします。 「_」で始まるファイルはコンパイルされません。 _variables.scss $base-color: #536A97; とりあえず「$baseColor」という変数を一つ作成しました。 変数を使用する さきほどカラー設定した変数を使用してみましょう。 base

    SASS/SCSSで基本カラーを設定して効率よくカラーバリエーションを作成する
  • SCOUT導入時の注意 - Angel21 HP Blog

    CSSの記述で多少なりとも楽ができそうなので、Sassを利用してみたいなあと思う今日この頃。 Sass文法のテキストファイル(拡張子:.scss)を、コンパイラにかけると、CSS文法のテキストファイル(拡張子:.css)を生成します。 そのコンパイラは元来コマンドラインで実行するような物だったようですが、最近ではウィンドウアプリとして実行してくれる「SCOUT」と言うコンパイラがあるようです。 SCOUTのダウンロードはこちらから。 インストール後、SCOUTを起動し、左下の「+」ボタンを押します。 「フォルダーの参照 Select Directory」画面が表示されるので、プロジェクトのベースとなる適当なフォルダを指定します。ここではテスト用に「_sass_test」を指定。 左にプロジェクトのフォルダが表示され、右にConfigurationの画面が表示されますので、Styleshee

    SCOUT導入時の注意 - Angel21 HP Blog
    iwmr
    iwmr 2015/01/27
  • 1