libsass.js - An Emscripten Experiment | Rodney Rehm
Sebastian Golasch and I set out to run the Sass compiler in the browser. Why, you ask? because we can! Or, well, we couldn't - and that needed changing. We'd heard about Emscripten, but never really used it. TL;DR: See the Sass.js demo and the libsass.js repository for trying to compile it yourself. It all started with Lea's tweet. Now I wonder if there’s any JavaScript version of @SassCSS that I
Sass v3.3, v4.0 での変更点についてメモ
Sass3.3 がそろそろリリースっぽいので、追加機能・変更点についてうまくまとまった記事があったので、学んでみた。 ちなみに、変更点はこちら 実際に動作を確認するにはpreバージョンのsassをインストールします。 [shell] gem install sass –pre sass –watch source_dir:output_dir [/shell] で確認できます。 ＆セレクタに関連する構文の改善たとえば、以下のようにした場合 [ruby] $module: ".module"; #{$module}–element { #{$module}__child { //valid color:orange; } & #{$module}__child { // valid color:orange; } #{$module}__parent & { // valid
Sassでlinear-gradient()のmixinをつくる その5 - fragmentary
CSS Preprocessor Advent Calendar 2012の記事の続編…というか完結編です。 3月まで持ち越すつもりはなかったのに…… Part 7: あとはもう、まとめる 今回はPart 4, Part 5, Part 6で作ったmixinをひとつのmixinにします。どのmixinも type-of() 関数で、mixinの最初の引数を調べて処理を分岐する作りになっているので、分岐先の処理を統合するだけですね。 // config $lg_support_prefixes: '-webkit-'; $lg_support_webkit_gradient: true; $lg_support_svg_gradient: true; @mixin linear-gradient( $first, $rest... ) { $prefixes: $lg_support_pre
Takazudolog - OOCSSとSass
CSS Preprocessor Advent Calendar 2012の10日目、@Takazudoです。 僕はSassが好きです。なぜならSassにはextendがあるからです。その理由を、社内勉強会で発表した、以下のスライドで話したことを補足しつつ、書きます。 OOCSS + Sass OOCSSってなんぞ まず、Sassのextendが素敵な点を紹介する前に、OOCSSについて簡単に紹介します。 OOCSSというのは、Nicole Sullivanという人が言い出した考え方です。そのプレゼン資料やビデオなどは、本人が発表したものが、slideshare等にアップされています。 Object-oriented CSS Object Oriented CSS by Nicole Sullivan · Fronteers The Cascade, Grids, Headings, an
CSSプリプロセッサのfunctionを拡張してみた (CSS Preprocessor Advent Calendar 8th day)
CSS Preprocessor Advent Calendar 2012の8日目でございます。飛び道具的な好奇心に基づき、functionの拡張について調べてみた次第。 今回は、下記の2つの関数をサンプルとして扱います。どちらも実用的なものではありませんが、あくまでサンプルということで、、、。 reverse - 与えられた文字列を逆順に並べ直して返す randomColor - ランダムなカラーの16進数を返す Sass編 Sass - Syntactically Awesome Stylesheets Module: Sass::Script::FunctionsにあるAdding Custom Functionsを参考にします。じつは、LESSとStylusは使ってたんですが、Sassって使ったことないんですよね...。 sass_add_func.rb Sass::Script:
Sass の if 関数 - jmblog.jp
これは CSS Preprocessor Advent Calendar 2012 の 5 日目の記事です。 今日はあまり知られていない Sass の if 関数について紹介したいと思います。 Sass には、条件分岐のための制御構文として @if ディレクティブ（いわゆる if 文）が用意されています。 $type: ocean; p { @if $type == ocean { color: blue; } @else { color: black; } } Sass の紹介記事の中では必ずと言っていいほど出てきますし、皆さんも一度は使ったことがあるのではないでしょうか。 実はこの @if ディレクティブ以外に、Sass には if 関数が標準で用意されています。 上のコードを if 関数を使って書き直すと、次のようになります。 $type: ocean; p { color: if(
いまどきの SCSS 運用方法 - tokuhirom's blog
最近は scss をつかっています。SCSS の運用についてまとめておこうとおもったので、まとめます。 scss --watch を手元でうごかす運用などをすると、scss と css の両方を git レポジトリにコミットすることになって残念ですし、生成された css を直接いじる人があらわれてまきもどったりするのでそういった運用は避けています。 開発環境についてPlack::Middleware::Scss::Lite ( https://github.com/tokuhirom/Plack-Middleware-Scss-Lite ) というミドルウェアを配置して利用しています。これはリクエストがあったタイミングで scss コマンドがはしります。 実行する際、scss コマンドは、エラーメッセージも stdout に出力するので、stdout を capture することが肝要です
GitHub - sass/libsass: A C/C++ implementation of a Sass compiler
LibSass - Sass compiler written in C++ Currently maintained by Marcel Greter (@mgreter) and Michael Mifsud (@xzyfer) Originally created by Aaron Leung (@akhleung) and Hampton Catlin (@hcatlin) Warning: LibSass is deprecated. While it will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects
Sassの存在意義への補足
Sassの存在意義の話があんまりうまく伝わってない感じなので、3の別々に書けてSassで関連付けられるということについて少しだけ書く。抽象的な概念の話なので具体的な説明というのもなかなか難しいけど、CSSフレームワークを使う時にどうなるかみたいなことを取り上げる。 Twitter Bootstrapを始めCSSフレームワークはいくつもあるが、それらはだいたいユニークなクラス名を持っている。例えばTwitter Bootstrapで2カラムレイアウトを作る場合は以下のようなHTMLにしなくてはならない。 <div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div> div要素はsectionやaside要素などを使っても良いが、クラス名はこうでなくてはならない。Sass (やLESS)があ
TASS - Ultimate lightweight stylesheet language
Back to the source. TASS does not provide any complex syntaxes or functions, so this is just little better CSS. TASS is like SCSS in SASS and can be used with only browsers like LESS because written in JavaScript. Check it out! <link rel="stylesheet/tass" type="text/x-tass" href="styles.tass"/> <script type="text/javascript" src="tass.js"></script> Download Variables $base-color : #333; $base-back
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&CompassでPath風のメニューを作ってみた - teppeis blog
2012/12/31 フォロー記事書きました: 1年前のSass/Compassを振り返ってみた みんな気になってしょうがないPathのアレを、Sass, Compass, CSS3 Animationsのお勉強をかねて作ってみました。Chrome, Safari, Firefox, IE10で動きます。 Demo: http://teppeis.github.com/menu-like-path/ Source: https://github.com/teppeis/menu-like-path 「CSSでPath風メニュー」っていうのは国内外ですでにたくさんあるので、気になったところなどSass&Compass寄りでいくつか書きます。 SCSSの記述量はCSSの約5分の1 今回作ったもので、SCSSで約300行（後述の自作ライブラリ含む）、コンパイル後はCSSで約1550行になりました
LESS & Sass Advent Calendar 2011
.day1 { content: "Sassで行こう！"; voice-family: hell2u; } .day2 { content: "CSSとフレームワークとメタ言語"; voice-family: debiru; } .day3 { content: "Sass を今すぐ実務で使おうよ！"; voice-family: tacamy; } .day4 { content: "LESS初心者向けのナニカ"; voice-family: sigwyg; } .day5 { content: "スマートフォン向けサイト作成時のSass活用法"; voice-family: mattari_panda; } .day6 { content: "sassの抑えておきたいfunctionの使い方"; voice-family: a_t; } .day7 { content: "Sass実戦
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
Sass で Singleton を実現し、安心してクラスを再利用する | nodot
この article は Less & Sass Advent Calendar の23日目のエントリーとして書かれています(あれれ?!)。 概要 CSSメタ言語を導入する目的の一つにリソース再利用性の実現というものがある。Sass の場合、mixin や extend によって実現している。特に extend によるスタイルの継承は強力である。 しかし再利用できるようなクラスをまとめたライブラリを import して利用すると、実際には使われていないクラスも出力されてしまい、ファイル容量が無駄に肥大する。使うクラスだけコピーするとか、使わないクラスは削除するなどの手動管理は手間がかかる。 そこでクラス自体を出力するような mixin を作れば、必要なクラス定義だけを include でき、不要な CSS コードを出力しなくて済む。しかし、extend したいクラスを必要になる度に inc
簡単に使える Compass のオススメ機能 - log
こんにちわ。 Gaji-Labo の @neotag です。今日は Less & Sass Advent calendar 2011 の24日目です。 アドベントカレンダーは乗り遅れるとネタ切れ危険ですね。 さて、 Compass という Sass 用の Framework がありまして。それがそこそこ便利なので、使い方が簡単なものをかいつまんでご紹介です。 http://compass-style.org/ インストール方法は下記のとおり。 $ gem install compass 目次 sass --watch のオプションをプロジェクトごとに管理 画像の高さと横幅を取得 Sprite を自動生成 開発用CSSと納品用CSSで画像の読み込み先を変更する 開発用と本番用で色々変えてみる ■その1 sass --watch のオプションをプロジェクトごとに管理 この記事を公開する前に確認
Sassの!defaultフラグの使い方と使われ方
Sassを書く時には変数を多用することと思います。それら変数は自分で定義して自分で使うので、同じプロジェクト内で再定義する必要はあまりありません。しかし他人や自分の作ったSassファイルを流用する場合、その中で使われている変数の値を最適化する必要が出てきます。もしその変数がハード・コーディングされているだけだとしたらどうでしょうか？ その場合変数を直接書き換えることになるでしょう。こういったSassファイルの再利用における問題を解決するためにSassには!defaultというフラグが用意されています。 Less & Sass Advent Calendar 2011もついに18日目ですね。ゴールまであと少しです。 まずはSassリファレンスの!defaultを扱っている部分を読んでみましょう。参考にざっと以下に訳してみました。 変数の値を指定する時、!defaultというフラグを付けておく
レスポンシブ対応に使えそうなLESS/Sassの書き方 | Good thinking
Responsive Web Designを考えたCSSコーディングに役立つLESS/Sassのコードを紹介します。 本記事はLess & Sass Advent Calendar 2011の13日目の記事です。 ※投稿日付が15日になっていますが、私の勘違いで投稿が遅れてしまいました。。（関係者の方ごめんなさい） LESS/Sassの前にResponsive Web Designの定義の話 まず先にResponsive Web Designとはどういうものであるかを確認しましょう。 Ethan Marcotteが提唱したResponsive Web Designは、次の3つの要素で構成されたものとなります。 A flexible, grid-based layout,（柔軟で、グリッド型のレイアウト） Flexible images and media, Media queries
Sass(Scss) Memo: 出力形式 compressed | Culture27
余計な改行や空白は削除されます。 例外として、セレクタの結合子(+ や >)の前後には空白が挿入されます。 最後のプロパティのセミコロン(;)や余分なセミコロンが削除されます。 カラーコードは6桁のまま出力されます。3桁にはなりません。 ただし、Mixinを通したものはどの出力形式でも条件によって出力される値が変わります。 rgbは可能なものはカラーコードに変換されます。 0pxは0にはならず、そのまま0pxで出力されます。 noneは0にならず、そのままnoneで出力されます。 0.5emは.5emにはならず、そのまま0.5emで出力されます。 空の宣言ブロックは出力されません。 CSS/Sassコメント Scss selector-1 { margin: 0; } /* * 複数行CSSコメント * 複数行CSSコメント */ selector-2 { /* 1行CSSコメント */
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Design Tips To Help You Succeed - Web Design