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
Sassを極める！デザイナーがすぐ実践できる基本テクニック12連発 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 前回、これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応)というSassの基礎に関する記事を書かせていただきました。 そこで今回は、もう一歩つっこんでもっと使いこなせるようになろう！という趣旨のもと、ちょっと使えるようになったからっていい気になっている僕がSassのテクニックやら関数をまとめてご紹介いたします！ たくさんある機能の中から、今回は比較的簡単で実用性の高いものをチョイスしました。 目指せSassマスター！WEBデザイナーもコーダーもすぐに実践したくなるSassの基本テクニック12連発もくじ もくじ テクニック1 アンパサンド（&） テクニック2 演算 テクニック3 round() テクニック4 rgba() テクニック5 コメントアウト テクニック6 変数 テ
より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集
より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！ 目次Sass の基礎知識@mixin の基本的な使い方リンクカラーを一括設定ベンダープレフィックス透明度絶対位置の指定rem を使ったフォントサイズ指定レティナディスプレイ対応画像Compass について軽く。Sass
WindowsにCompassをインストールしてSASS/SCSS環境を構築する
WindowsにCompassをインストールしてSASS/SCSS環境を構築する 今更ではありますがWindowsにCompassをインストールしてSASS/SCSSの開発環境を構築してみたいと思います。 投稿日2013年04月12日 更新日2013年06月27日 SASSはRubyのgem（プログラム）なります。 Macには最初からRubyが入っているのですが、Windowsだと入っていないのでインストールしましょう。 インストーラーを使用すると簡単です。下記URLからダンロードしてください。 ここでは現時点で最新版の「Ruby 2.0.0-p0」をダウンロードしてみます。 RubyInstaller インストールするときに、環境変数のPATHをチェックしておきます。 スタートアップメニューの「アクセサリ」から「コマンド プロンプト」を起動します。 ruby -v と入力して ruby
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
SassとCompassでSprite画像を作る
やっべぇ、これ便利！って思ったので即共有！これまでSprite画像作る時って皆さんはどうしてましたか？僕はCSS Sprite Generatorというサイトを使って画像を生成していました！ しかし、さっき見てた記事でなんと、Compassを使ってSprite画像を生成する方法が紹介されていて、今さっき試したら結構ツボにハマったので、まずはこの興奮のまま皆さんともシェアさせて貰えれば嬉しいです！ 参考にさせて頂いた記事は以下なんですが、結構詳しくCompassで作るCSS Sprite画像の作り方が紹介されています。まずは僕も試してみた簡単な概要部分をちょっとご紹介させて頂きましょう！SassとCompassの基本的な使い方はググって頂ければ嬉しいです＞＜ How to automatically generate CSS sprites with Sass and Compass | C
Sass - CSS HappyLife
もう完全にただのお知らせや告知ブログ...！ 初版の発売から4年経ち、ありがたいことに改訂のお話を頂いたので、6月～8月辺りに森田 壮さんと執筆を行い、2017年9月15日に改訂2版が発売しました。 かなり頑張って加筆・修正などを行ったので思ってたより大変な執筆でした。 初版と改訂2版の詳しい違いに関しては、サポートサイト に載せておいたのでそちらを見て頂けるとありがたいです！ 初版と改訂2版の違い | Web制作者のためのSassの教科書 改訂2版 - 公式サポートサイト せっかく久しぶりにブログを書くので、サポートサイトには書いてないことにでも触れて行ければと。 いよいよ明日発売の「Web制作者のためのSassの教科書」ですが、今回は、8章有る中でも特に読んでもらいたい章に関して、書きたいなーと思います。 今回の執筆はわりと気合い入ってるので、宣伝エントリーが多くてすみません＞＜ ちな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS拡張メタ言語「Sass」の概要と導入手順
TEST CORDING » Sassの@functionの使い方まとめ – プログラマブルな処理は@function