仕事で案件に関わっていると、特段必要がないにも関わらずSass機能を使っているファイルを見かけることがある。 例えば、 $font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", sans-serif; $font-size: 87.5%; body { font-family: $font-family; font-size: $font-size; }一体何の意味が？　変数を使う必要がない。 実務におけるSassの使い方を見直す。 設定しているミックスインフォントサイズpx or rem の場合は2行目と3行目を使用% の場合は4行目のみを使用16 はブラウザデフォルトのフォントサイズbody でフォントサイズを指定する場合

概念を知って満足しちゃうのはやめようと思ったWebディレクターのふもぱん先生（他称）です。 昨年2015年12月26日（土）、CSS Nite「 Shift9：Webデザイン行く年来る年（CSS Nite LP43）」に参加してきました。「マークアップ」のセッション（「2015年のマークアップの話題を総まとめ」小山田晃浩さん / 益子貴寛さん / 久保知己さん）で取り上げられていたのがタスクランナーの「 Gulp 」。細かい定義はお調べいただくとして、要は「自動化ツール」のこと…というと乱暴でしょうか。 私もディレクターのはしくれですので、その存在やメリット、デメリットは概念的に知っていました。ただ、普段はディレクション中心のため、あまり切実に必要なものではありませんでした。「インストールなどの環境づくりが面倒」という風評もよく目にしていましたので、なかなか実践しようとは思わなかったのです

11. $baseColor: #AD253A; 変数を代入 body { background-color: $baseColor; 変数を出力 } #globalHeader { #gNav { color: $baseColor; 変数を出力 } } #main #featureList { a { h3 { color: $baseColor; 変数を出力 } } }

モダンなWeb制作をされている方であれば、すでに利用しているかもしれません。 Sass（SCSS）は、うまく使えば、それなりに便利ですが、それほどすごいということは、ありません。 使い方によっては、素のCSSよりも分かりにくくなります。 ネガティブな内容かもしれませんが、ざっとSass（SCSS）をまとめてみます。 Sass（SCSS）とは Sassとは、Syntactically Awesome Style Sheetsの略です。 CSSを便利に書くために作られた言語で、似たものでは、LessやStylusというものがあります。 実際にブラウザで認識させるには、CSSに変換する必要があります。 Sass: Syntactically Awesome Style Sheets 二つの書き方 Sassには、二つの書き方があります。 インデントでネストを管理し、｛｝や；が必要がない書き方。 拡

2016 - 01 - 30 Mac（El Capitan）でSassとCompassをインストールしようとしたらエラーになる Web開発 CSS スポンサード リンク Mac（El Capitan）にSassとCompassをインストール 開発で使うアプリを順番にインストールしていたのですが、SassとCompassのインストールができませんでした。なぜかエラーが出てしまいます。 ▼まずはgemをアップデート sudo gem update --system ▼続いてSassをインストール sudo gem install sass ▼しかしインストールできずエラーになります ERROR: While executing gem ... (Errno::EPERM) Operation not permitted - /usr/bin/sass エラーの内容から詳細を調べたところ、どうや

15 essential Sass mixins 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Sassやってみたい、と考えてる人には下記の本をオススメします。 Sassの初心者からもっと使いこなしたい人まで、Sassを確実にマスターできるオススメの本 -Sassの教科書 box-sizing（ボックスサイズ） opacity（不透明度） column-width（カラム幅） circle（円形） font-size（フォントサイズ） box-shadow（ボックスシャドウ） xPos（要素の座標） vertical-align（天地の中央に配置） flexbox（フレックスボックス） flex（モダンブラウザの旧仕様にも対応したflexの指定） flex-order（表示の順番） flex-direction（表示の方向） gra

いまさらですが、SassとCompassの環境を導入しました 以前から使いたいなとは思っていたのですが、弊社の体制や運用面でのネックがあったりして見送っていました ただ、最近すこし時間に余裕があり、ガイドラインレベルでCSSメタ言語の運用などを考えることができ、懸念点を解消できたので導入にいたりました 前置きはさておき、今回は環境構築についてです 私の作業環境がときにWindowsだったりMacだったりと『アホか！』な感じなので、両方の方法について書いてます なお、ふだん黒い画面をさわることがないので…そちらの使い方はあまり自信がないです… Rubyのインストール Macは最初から入っているようですが、Windowsはインストールしなければいけないようです Windowsユーザは、下記URLからダウンロードしてください RubyInstaller 次に、念のためRubyがインストールされて

HTML5 Conference 2012 で使用したスライドです。 前編のスライドはこちらです。 http://www.slideshare.net/azusatomita3/sass-14212266

What's this? HTMLソースをもとに、id,class名CSS、子孫セレクタCSS、子セレクタCSS、LESS、SASS、SCSSを自動生成するオンラインサービスです。 従来のHTMLコーディグを強力にサポートします。 What's LESS/SASS/SCSS? LESS / SASS / SCSSはCSSを効率的にコーディングできるCSSメタ言語です。 従来のCSSに比べ子孫セレクタ・子セレクタを簡単に管理することができ、高速にコーディングすることができます。 LESS OFFICIAL SASS/SCSS OFFICIAL 関連サービス 高画質サムネイル生成サービス HTTPクエリデコード SQLフォーマッター Insert文フォーマッター スペースフォーマッター JSONフォーマッター HTML/XMLフォーマッター Emmet toolkit for <textare

CSSの保守に便利なcsscombとscss-lintについて説明します。 scss-lint scss-lintは、SCSSのコードから与えた設定に違反している箇所を報告してくれるツールです。jslintやrubocopのSCSS版のようなものです。これをCI等で定期的に実行しておくことで、ルールに違反したコードの蔓延を防ぎます。 csscomb csscombはNode製のツールで、CSSのコードを与えた設定に従って自動で変換してくれるものです。scss-lintを初めて導入するときに利用すれば、大半の警告を自動で修正してくれるでしょう。但しCSSの文法しか解釈できないため、SCSSに適用すると失敗する場合があります。SCSSで書かれたファイルに対して適用してみたところ、@includeなどの文法は受理されるものの、@ifなどの文法を受理できないようです。しかしながら問題となるケースが

Compassで簡単、CSSスプライト作成 第1回 CSSスプライト作成の基礎 CompassでCSSスプライトが手軽にできるのをご存知ですか？　この記事ではCompassでCSSスプライトを作成する基礎を解説します。業務で使うものですから、生成の仕組みもおさえておきましょう。 はじめに 手作業で作ると、ものすごい手間がかかってしまうCSSスプライトですが、Compassを使えば、非常に簡単に実装することができます。このシリーズではCompassのCSSスプライト機能を解説し、Retinaディスプレイ対応のCSSスプライトmixinを作ってみます。 Compassと私 Compassについては、CodeGridでSassの連載時に、簡単に触れました。 SassとCSS設計 - 運用と管理 | CodeGrid Compass Home | Compass Documentation Com

今回はCSS拡張メタ言語をご紹介します。 なにそれ？って言う方も多いと思います。私も最近までそうでした。どうして知ったかというと前回の記事でCSSフレームワークでツイッターブートストラップがLESSを使用されているのです。それでコレなんだろって調べたらわかったんです。因みにツイッターブートストラップのSCSS版もあります。 簡単に言うとCSSをより簡単に記述しようってことです。 CSS記述するとき重複したり、それぞれのブラウザに対応するような記述やあとCSS3対応させるためになんだか長い記述しないとダメですよね。-webkitとか-mozとか。 そういうのを解消したものなんですね。自動的に計算なんかもやってくれる機能もあります。 スポンサーリンク これはかなり便利な機能です。 最初にやるなら断然LESSだと思います。javascriptで簡単に実装できるしすぐに体感できるので。ウェブ上にア

今さらそのネタｗｗｗ何言ってんのｗｗｗｗｵｯｿｗｗｗｗｗ とか言われないために、そろそろSASSとかCompassとかその辺りを使う環境を整えてみませんか？ 便利なのはわかってる。けど・・・ SASSに関する専門書も販売されて講習会なども行われ、これからどんどん目をする機会が増えてくると思います。 すでにネットや周りで噂を聞いて「便利そう」と思ってる人も多いはず。 でもなんで手を出せないのか・・・ 今のCSSで十分 やろうと思ったけどRubyとかgemとかなんとか書いてて、よくわからない あの黒い画面が苦手 よくわからない？CUI（あの黒い画面）が苦手？もうそんなことは言わせない！！そんなあなたにコレ！！ これマジいいんですよ。英語版ですけど。でもほんとタガログ語の人でも使えちゃうレベル。 とりあえずこれでcompassを使ってみるのはどうでしょうか？ WinでもMacでもこれでいけますし

より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！ 目次Sass の基礎知識@mixin の基本的な使い方リンクカラーを一括設定ベンダープレフィックス透明度絶対位置の指定rem を使ったフォントサイズ指定レティナディスプレイ対応画像Compass について軽く。Sass

こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh