gulp-sassとgulp-ruby-sassの違いをざっくりと調べた | おれめも v2
C/C++で書かれたLibsassをwrapしているnode-sassを使用。 Sassのgemをインストールしなくてもgulp-sassのみで使用可能。 Sassのgemを使用。 gulp-ruby-sassを使用するときは、あらかじめgemのインストールが必要。 処理速度処理速度はgulp-sassのほうが速いらしい。 gulp-ruby-sassは一度gemに処理を投げているからなのかな…？ 出力形式出力形式はgulp-ruby-sassのほうが豊富(nested/compressed/compact/expanded)。 gulp-sassはLibsassが'nested’, ‘compressed'の2つしかサポートしていないため。 書き方 gulp-sassでコンパイルするときは、ソースの指定で /*.scss のような指定方法が可能。 また、ソースの指定には gulp.src
Sass Guidelines
An opinionated styleguide for writing sane, maintainable and scalable Sass. The Sass Guidelines project has been translated into several languages by generous contributors. Open the options panel to switch. About the authorMy name is Kitty Giraudel, I am a French front-end developer, based in Berlin (Germany) since 2015, currently working at Cofenster. I have been writing Sass for several years no
RUBYOPTを使った外部エンコーディングの指定
今年からSassでcontentプロパティーなどでマルチバイトの文字列をエスケープせずにばしばし書くことにしたので、遂にWindowsでもUTF-8をデフォルトにしないとダメそうな感じになった。この場合、環境変数LANGを変えようとか良く書かれているけれど、Ruby以外に影響を及ぼさない真っ当な手段としてはRUBYOPTの方を使うべきなようだ。 特に設定していないとマルチバイト文字列を含むSassファイルをコンパイルしようとすると以下のようなエラーメッセージを吐いて落ちる。 C:\>scss test.scss Error: Invalid Windows-31J character "\xE2" on line 2 of test.scss Use --trace for backtrace. test.scssの2行目には➔が含まれている。このファイルに@charset "UTF-8"
Sassだとrgbaでの色指定に16進数カラーコードが使える
感動しました…Sassのファンになります CSSのrgba(r,g,b,a)、背景を透過させたい時とかに便利。ただ、rgbaで色書くのが面倒。Sassとか使ってる人だったら色を変数に入れるとかやってると思うけど、#00ffffみたいな16進数のカラーコードだと、パッと見rgba()には使い回せず書き直すしかなさそうに思える。 が!!!!!いけるみたいです!!!!! ここに書いてありました。 .hoge { background-color: rgba(#00ffff, 0.5); } と書くと、 .hoge { background-color: rgba(0, 255, 255, 0.5); } と出力してくれます!!!!ヤバいですね!!!!! ということは、変数が使えるということ。 $color: #00ffff; .hoge { background-color: rgba($col
10 SCSS utilities I can’t live without – Hacking UI
Every front-end developer needs a battle-tested SCSS arsenal for starting new projects. Here are 10 of the best SCSS utilties I find myself using most often. You can download the entire file to use in your projects from the UtilityBelt Repository on Github. Download “UtilityBelt.scss” Triangle Sagi likes to call this the chupchick (don’t ask me why). It’s great for adding a point to tooltips or s
Autoprefixerによる、CSS3の管理 - kojika17
CSS3を使用する時に、ベンダープレフィックスを付けていますか？ 自分でプレフィックスをつけたり、SassなどのCSSメタ言語やツールを利用するなど、さまざまな方法がありますが、せっかく付けたベンダープレフィックスも適切でない場合もあります。適切にベンダープレフィックスを付与するツールに、CSS Postprocessorの「Autoprefixer」というものがあるので紹介します。 ベンダープレフィックスをいつまで付け続けるのか ベンダープレフィックスはブラウザの試験的、または独自拡張で実装されているものであり、W3Cの仕様がある程度固まると、ブラウザはベンダープレフィックスが外すことが推奨されています。 現在、CSS3の一部の仕様は、すでに勧告や勧告候補まで上がっているものがあり、最新のブラウザではベンダープレフィックスなしで作動するCSSも増えてきています。またグラデーションやFle
hail2u-scss-functions v1.0.0
自分で作って自分で使っているSassのユーザー定義関数をhail2u-scss-functionsという名前でBowerパッケージ化した。他人の作ったユーザー定義関数はいろいろあって使うの嫌だけど、自分のはコピペすることなく手軽に使えるようにしておくと良い気がする。 他人の作ったユーザー定義関数は、使用と運用において問題が起こることが多いと思う。 使い方を覚えるのが面倒 引数の型を覚えるのが面倒 自分のユーザー定義関数と名前がかぶる 汎用的に見えて汎用的じゃなかったりすることが多い 使い方や引数の型については、型違いならコンパイル時にエラーになるように書けばある程度改善するけど、バックグラウンドでコンパイルすることが多いためそれほど劇的な効果は得られない。もうちょっとエラーを包括的にデバッグできる仕組みがないと、ユーザー定義関数は自分で書いて自分で使う以外には辛そう。 関数名の問題は公開す
Sassの@contentを使用したMedia Queries
表題についての補足。 @mediaに@contetを利用する方法は、Sassの見通しが良くなるというメリットがあるけども、CSSを見ると余計な記述が増えているのが分かる。 .foo { @include mediaquery-smartphone { width: 100%; font-size: 100%; } } .hoge { @include mediaquery-smartphone { width: 100%; } } ↓ @media only screen and (max-width: 499px) { .foo { width: 100%; font-size: 100%; } } @media only screen and (max-width: 499px) { .hoge { width: 100%; } } @mediaのmixinを展開すると、「@media
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説 上村 光星 10月12日にSass 3.3.0.rc.1が出ました。まだリリース候補ですが、どのような機能が追加されるのかはChangelogにあります。今回は「&」と@at-rootについて解説します。 HTML+CSSの命名規則にBEM方法論、もしくはHTML+CSS向けに派生したMindBEMdingを取り入れる方が増えてきているようです（筆者は使っていませんが…）。「&」の新機能と@at-rootは、このBEMのためといっても過言ではありません。 Sass 3.2の「&」 「&」は親セレクタを参照する特別なキーワードとして、Sass 3.3よりも前からありましたが、擬似クラスや擬似要素、セレクタの連結など、用途が限られていました。 // Sass 3.3よりも前の「&」の用途の例 .foo { &:hover
CSSポストプロセッサー時代の到来
SassやLESSといったCSSプリプロセッサーは市民権を得たと言って良いと思う。しかしそれらCSSプリプロセッサーは開発という段階にのみ利をもたらすもので、今のところはそれ以上ではない。CSSを実際にユーザーに届けるまでには、開発だけではなくレビューとリリースという段階もある。レビューとリリースも確実性を持って効率的に行うためには、CSSポストプロセッサーと総称されるようなツール群が必要になるだろう。 この文書はFrontrend Advent Calendar 2013の4日目への記事として寄稿した。明日は@hilokiさんがスタコラサッサと書くようだ。 目次 CSSポストプロセッサーとは CSSプリプロセッサーの出力するCSS CSS Lint 開発用とレビュー用、リリース用のCSS CSSポストプロセッサーのユースケース ベンダー拡張プリフィックスの付加 Media Queries
howtohp.com - howtohp リソースおよび情報
Get a new domain registered at NameSilo.com. Find out who owns any domain name with the WHOIS tool. This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Compassの設定ファイル「config.rb」の編集方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのサリーです。 最近買った漫画は「ウメハラ – To live is to game -」です。 さて、王くんのおかげで Sass + Compass を使えるようになりました。わーい！ 王くんのブラボーな記事はこちら↓ CSSの常識が変わる！「Compass」、基礎から応用まで！ Sassファイルの吐き出したCSSファイルの出力スタイルの設定は「config.rb」を書き換えることで簡単に変更出来ました。 今回はconfig.rbの基本的な編集方法についてまとめてみました。 config.rb のデフォルトの記述 config.rbの中身は何もいじらないとこんな感じになっていると思います。 （Codekitなどで吐き出すとCodekitのデフォルトの設定が入るので、またちょっと違います） # Require any additional compass plugin
WebデザイナーのためのSass/Compass入門 先生：石本 光司
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/228/room ーーーーーーーーーーーーーーーーーーーーーーーRead less
ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン
さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。 今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。 改良のポイントは次の通りです。 文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取った
わたしの作業環境：Sass＆Compass編 World of granshe.
お疲れ様です、完全社畜と化しております。 でもそれには理由があって、今後のために「今」必要だという、自身の判断でやっています。 なので、今までのキャリアの中では、仕事量に比べて、精神的には非常に前向きに仕事ができてます。 ということで、ネタとしては今さら感満載ですが、 最近作業環境をガラッと？変えました。 今度社内勉強会に向けてまとめようと思ってるので、事前にここに書いてみます。 一応サブタイトルとして 「Sass＆Compass＋Sublime＋LiveReload」ってついてまして（自分の中で）、 3本立てでお送りする予定です。 時間がなかったので、とりいそぎSass＆Compassから。 Sass＆Compass 今回の隠れサブタイトルの中で最初に導入したものがコレです。 最初は、「CSS3のprefixをつけてくれる便利なやつ」だと思ってたのですが、 それだけじゃない。 そして今も
やさしいSassとCompassの導入方法（Windows、Mac） | ajike switch
いまさらですが、SassとCompassの環境を導入しました 以前から使いたいなとは思っていたのですが、弊社の体制や運用面でのネックがあったりして見送っていました ただ、最近すこし時間に余裕があり、ガイドラインレベルでCSSメタ言語の運用などを考えることができ、懸念点を解消できたので導入にいたりました 前置きはさておき、今回は環境構築についてです 私の作業環境がときにWindowsだったりMacだったりと『アホか！』な感じなので、両方の方法について書いてます なお、ふだん黒い画面をさわることがないので…そちらの使い方はあまり自信がないです… Rubyのインストール Macは最初から入っているようですが、Windowsはインストールしなければいけないようです Windowsユーザは、下記URLからダウンロードしてください RubyInstaller 次に、念のためRubyがインストールされて
2013年9月13日発売予定の「Web制作者のためのSassの教科書」を執筆しました
インプレスジャパンから、9月13日に「Web制作者のためのSassの教科書」が発売します。 キッカケは、2012年の1月頃に書いていた、Sassを覚えよう！で、それをインプレスジャパンの編集の方が読んで気に入って頂いたらしく「Sassの執筆をしませんか？」というお話を頂きました。 お話を頂いた当時は、「Sassの書籍って売れないんじゃ？本にするほどでは...」って感じであまりノリ気では無かったり、執筆を始めると主業務もこなしつつになるので、忙しくなるなーと思ってお断りしようとかも考えてました。 そう思っては居たけれど、一度打ち合わせをしたら書くこと前提になってた風味で、気付けば執筆をすることに＞＜ 今回、執筆のお話を頂いて書くことが決まってから、1人でやり切れる自信も無かったので、Sou-Lablogとか書いてる、SOUさんを誘って、共著でSassの本を書くことになりました。 書き始めたら
[Sass] Retina対応のスプライトシート用 sass mixin « きんくまデザイン
こんにちは。きんくまです。 Retina対応を調べてました。 わかりやすくまとめられてました。 >> Webサイト＆WebアプリのRetina対応方法まとめ | KRAY Inc で、sassでmixinとかあるんじゃないかなと思ったら公開されてました。 >> FREE! Sass (SCSS) mixin for including retina images (useful when developing for iOS). どちらも貴重な情報ありがとうございます！ んで、これを組み合わせて、スプライトシート版にしたいなーと思って、ちょっとだけ加えたのがこれです。名前が長いんで、適当に短くするとよいかも。 @mixin background-image-retina-with-spritesheet($file, $type, $width, $height, $posX, $posY
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tom Blanchard on Twitter: "If you're using grunt-contrib-sass and `sourcemap: 'none'` isn't working, try `'sourcemap=none': true` instead."
Sass Compatibility