自分なりのSASSの使い方(mixin、extendなど)をメモってみた - NEZU.log
NAVERさんとかだと、mixinファイルをさらに細かく分割してるみたいですが、 そこまでライブラリを多彩にしていないのでとりあえず一つで事足りてます。 利用したいscssファイルに「@import」で記述することで、読み込みできます。 自分の場合は「_import.scss」にimportの記述をまとめておき、各scssファイルには以下のように記述しています。 @import '_import'; こうすることで、あとで@importするファイルが増減しても一括で対応できるようにしています。 まあこのあたりはcssの通常のimportと同じ管理方法です。 機能の使い分け スコープのネストと参照 .hoge { a { color: #00f; &:hover { text-decoration: underline; } } } //展開時 .hoge a { color: #00f;
【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜Compass基礎編 | DevelopersIO
はじめに 季節の変わりめで風邪をひいていませんか？僕は38度の熱で会社を休みました。ごめんなさい。 前回は「【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編」でGUIでSCSSを使えるScout.appのインストールからセットアップについて、またSCSSの4つの主な機能「変数」「宣言ブロックのネスト」「Mixins（関数）」「セレクタ継承」についてご紹介しました。 そこで、今回はGUIツールのScout.appに同梱されているCompassについて活用方法を紹介したいと思います。Compassは、SCSS使いなら必須の便利なフレームワークです。 Compass - CSS オーサリングフレームワークとは compassはSassを使ったオープンソースのCSSオーサリングフレームワークです。 compassを使うことで、Bender Prefix、CSS Spriteを自動
SCSSとLESSのどちらを導入するか迷って、SCSSに決めたポイント - 眠る前に布団にはいろうか
SCSSとLESSのどちらを導入するかけっこう悩んだ時のまとめです。 最終的にはSCSSを選択しましたが、導入の参考になれば幸いです。 ちにみに、SCSSとLESSとは 再利用できるスタイル定義や変数など、CSSを効率的にコーディングできるように拡張されたメタ言語です。 どちらも、CSSをベースにした独自の記法でもってコーディングしそれをコンパイラでCSSに展開するというものです。 LESS SCSS 動作環境や使用などの詳しい比較はこちらが参考になります http://dxd8.com/archives/217/ Sass ≠ SCSS SCSSを調べていると、Sassという単語も目にすると思います。 使い始めた当初はごっちゃになってたのですが もともとはSassというプロジェクトが存在し、そこから派生したのが SCSSらしいです。 Sassも同じコンセプトのCSS拡張言語ですが、 たと
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
