SassというCSSコーディングを身につけよう!in Coda2!!超簡単な僕のSass覚書。
半年ほど前から良く話題になるSassとかLessとかってなんだろうなーって思いつつめんどくさそうだからこの手の記事は回避していました。 ですが、いつものようにTwitterでつぶやいていたらSassかなり良いよって言われて 「へーそうなんだ〜」と興味を持ち始めて 少しずつですが記事を読みあさりながらSassってこうゆう感じなんだーっていうのが掴みかけてきたので記事にしたいと思います。 Coda2で検索して来た方へ この記事ではCoda2の事についてあまり触れていません。ですが、こちらの記事でがっつりcoda2の魅力を語っていますので是非ご覧になって下さい。 参考記事：Coda2の使い方をマスター出来るチュートリアル[完全版] Sassってなーに? CSSを拡張しよう!っていう感じのメタ言語らしいです!サスって読むらしいです。なんだか僕的にはいい響き!「ググる」とかと似ているかも。「Sass
Online StyleSheet Generator | OneClickCSS
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
Sass のカスタム関数の書き方
Sass は ネイティブ関数 のほかに、@function ディレクティブ を使ってカスタム関数を自由に定義することができます。僕もより共有や再利用のしやすいものを作るべく試行錯誤していますが、ここではそのうち最近試しているいくつかのパターンについて書いてみました。ご意見求む。 接頭辞 attr() や calc() など CSS のネイティブ関数や percentage() や type-of() といった Sass のネイティブ関数と名前が衝突するのを防ぐため、カスタム関数の関数名に接頭辞をつけることを検討しています。現行の CSS/Sass だけではなく将来追加される新しいネイティブ関数も考慮するとやはり何らかの対策をしておきたいところで、接頭辞は現実的な解であるように思います。Sass リファレンスの 関数ディレクティブの項 でも以下のように接頭辞の採用を勧めています: It is
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック：ズルいデザイン（1）（1/2 ページ） デザインが自分でイイ感じに作れたらいいなあというプログラマのみなさん。少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します Webプログラマ、Webエンジニアの皆さんが、個人で作るWebサービスやハッカソンなどで、短期間に集中してサービス開発してローンチしたいときに、もうちょっと自分でイイ感じにデザインできるといいなあという声をよく聞きます。 この企画は、そんなプログラマが、少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 ズルいデザインはSassとCompassを利用し
CSS Preprocessor Advent Calendar 2012 - Adventar
Sass、Less、StylusなどCSS Preprocessorに関するAdvent Calendarです。 Sass LESS Stylus
パフォーマンスからみるSass/Compass 第1回：Nestingと@import - MOL
Sassとかいろんな機能ありますよね、でもぶっちゃけそんなにいっぱい機能あっても使わないし( ･´ω･｀) 案外、//ダブスラでコメントアウトできるのが一番嬉しかったりもします今日このごろです。 @import というわけで、そんな僕がSassを使うと思ったのも@importを使いたかったからという至極単純な動機によるものです。@import自体は普通のCSSでも使えますが、パフォーマンス的に難がありまして、あんまり使う気になれない、かといってファイル管理はページ単位やコンポーネント単位でちゃんとやらないと後々めんどいなというジレンマもあります。 そうゆうわけで、なんで普通の@importがダメなのか説明します。 IEにおいて@importはページ下部に置いた<link>タグのような挙動をします。 Best Practices for Speeding Up Your Web Site Y
CodaにSass導入！まとめ。 | Webデザイン日々独学
フクヤマです。Sassさんに色気がないので着色してみました。 CodaではじめてSaasを使った感想 Zen.Codingを知ったときも感じた、ゲームなどで新しい強い武器を手に入れた気分です。効率の違いが目に見えてわかりますからね。Sassのscssは覚えることも少ないですし、JavaScriptやPHP、その他プログラムを少しでもかじっていればスイスイ書けると思います。(Mac OSX Lion, Coda ver1.7.5) 1.Sassの準備 2.scssからcssを自動で書き出すプラグインを入れる 3.試してみる 4.Sass.modeで色付けする 5.scssファイルでもzen codingを使えるようにする Sassの準備 ターミナルを使いますが、4回 入力とreturnキーを押すだけですので、難しく考えないでください。 まずは、アプリケーション > ユーティリティ > ターミ
【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編 | DevelopersIO
はじめに 早速ですがみなさん、黒い画面（コンソールやターミナル）はお好きですか？ ちなみに僕は最近やっと黒い画面に対していくつかの呪文使えるくらいになりました。文系理系でもどちらでもなくさらに低学歴の僕にとっては潜れば潜るほど黒い画面がつきまといます。（今では好きですよ、黒い画面） 今回は、すぐに使えるSCSS入門｜基礎編ということで、「黒い画面など見たくない！」というあなたにも、GUI操作だけですぐに使えるアプリケーションのインストールからSCSSの基本的な利用方法について、実際の開発に使えるポイントを押さえて解説していきたいと思います。 SCSSを覚えて生産的で楽しいWebサイト制作・アプリケーション開発をしていきましょう。 まだSCSSを知らない方向けに「SCSS」って？ 前回の記事「Media Queriesの記述を少し楽にしてくれるSCSS（Sass） Mixin（自作）」からの
【Sassを覚えよう！Vol.7】ファイルを分割して管理を楽に（partialについて）
ちょっと間が開いてしまいましたが、今回はSCSSファイルの分割に関してです。 通常のCSSの場合は、分割した複数のファイルを読み込み用の「import.css」みたいなファイルを用意して管理することが多いかと思います。 もしくは、head要素内に各CSSファイルを読み込んだりしますよね。 ただ、これだと分割するファイルが多くなればなるほど、読み込むごとにHTTPリクエストとその読み込みがブラウザで行われるため、Webサイトの読み込みが遅くなってしまうって問題があります。 まぁ体感速度的にどの程度影響があるかはアレですが。 それでも、CSSファイルを1つにすることで、ちょっとでも表示が早くなるかも知れないならやって損は無い訳ですが、それで管理面で問題が生じてしまうのも困ったちゃんなので、分割するCSSは必要最低限にしていることが多いかと思います。 そう言った問題も、Sassなら分割したSCS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TEST CORDING » Sassの@functionの使い方まとめ – プログラマブルな処理は@function
Css preprocessorの始めかた
すぐに使えるSCSS入門 の記事一覧 | DevelopersIO
ワンクリックでHTMLからCSS/LESS/SASSを自動生成してくれる『OneClickCSS』 | IDEA*IDEA