Z63 | 8 Sass mixins you must have in your toolbox
At their core, Sass mixins are blocks of code that you define once and can then re-use anywhere, if you are familiar with any programming language you can think of them as functions. A mixin can take multiple parameters and make calls to functions to in the end output CSS, and they are super useful when you want really clean and DRY code. Some of the mixins below are already included in the Compas
「Sublime Text」のみでCompassとSass（Scss）を使えるようセッティングしてみたのでその手順と参考にした記事まとめ
HOME>Web>「Sublime Text」のみでCompassとSass（Scss）を使えるようセッティングしてみたのでその手順と参考にした記事まとめ Compass、Sass（Scss）とは？ Sass（Scss）とは？ Sass（Scss）とは、CSSを記述するために開発されたメタ言語のこと。長くなりがちなコードを短くできたり、関数などを使用してより便利にスタイルシートが書けるという代物です。CSSの管理が非常に楽になります:) Sassには、プログラムのような書き方をする「Sass」と、よりCSSに近い記述が可能な「Scss」とがあるのですが、根本的には変わりありません。（記述方法が違う） ちなみに、私はScssを利用しております。 どんなことができるの ではちょいと実例をば。ScssではCSSを簡単に書くためのルールがたくさん用意されておりますのでさっくりとご紹介。 [css]
Sencha Touch 2 Recipes #2: オリジナルのテーマを作る
Solution: Sencha Touch の SCSS ファイルに、カスタマイズ用の変数を追加してコンパイルすることで、オリジナルテーマの CSS を作ることができます。 今回は、Google+ 風な配色を意識したテーマをアプリに適用してみたいと思います。 作成した SCSS は以下。 この SCSS から作った CSS を適用すると、以下のような見た目のアプリが、 それっぽい雰囲気を醸し出すアプリに変わります。 – サンプルページ # WebKit系のブラウザ（Chrome, Safari）もしくはスマートフォンでのアクセスをお願いします _o_ http://recipe2.senchafy.com/ ツールバーの左にあるアイコンをタップすると、テーマのリストが出るので、そこで「G++」を選択すると、見た目が切り替わります。 Discussion: Sencha Touch は、テ
SublimeText（Windows、Mac）をSassで使いやすい設定にする | Web制作者のためのSassの教科書 - 公式サポートサイト
ここでは、Win,Macともに最近ユーザーが激増している「Sublime Text」でSassを快適に使えるようにするための、設定例を紹介します。 この設定は、著者の森田がSassのコーディングをする時に使っている設定（2013年8月現在）になりますので、あくまでも一つの参考として読んで頂き、使いづらいと感じる部分は、自分なりにカスタマイズしてより使いやすいエディタにしましょう。 キャプチャーはMacで撮っておりますが、Windowsも同じやり方で設定できます。 Sass用の設定を追加 まずは、SublimeTextを起動します。 SublimeTextを起動した状態 まず、機能を拡張するためにパッケージコントロールをインストールします。「Sublime Package Control」のサイトへアクセスしましょう。Installationページに記載されているソースをコピーします。 バー
やさしいSassとCompassの導入方法（Windows、Mac） | ajike switch
いまさらですが、SassとCompassの環境を導入しました 以前から使いたいなとは思っていたのですが、弊社の体制や運用面でのネックがあったりして見送っていました ただ、最近すこし時間に余裕があり、ガイドラインレベルでCSSメタ言語の運用などを考えることができ、懸念点を解消できたので導入にいたりました 前置きはさておき、今回は環境構築についてです 私の作業環境がときにWindowsだったりMacだったりと『アホか！』な感じなので、両方の方法について書いてます なお、ふだん黒い画面をさわることがないので…そちらの使い方はあまり自信がないです… Rubyのインストール Macは最初から入っているようですが、Windowsはインストールしなければいけないようです Windowsユーザは、下記URLからダウンロードしてください RubyInstaller 次に、念のためRubyがインストールされて
これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応) | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいとです。 全く関係ない話ですが、ポケットモンスター X・Yが発売されたそうですね。「金・銀、ブラック・ホワイトときたら、次はパステルカラー辺りが来るはずや！間違いない！」と思っていた僕の予想はまんまと外れました。まあそれはいいとして、 今回はSassについてちょっと語らせていただきます。Sassというと、「効率、コーディングスピードが超上がるらしい」とか、「LINE株式会社、株式会社DeNAとかも採用してるらしい」という話を聞きます。僕もSassについては勉強しているんですが、当初はわかりにくい部分もありました。 それは「そもそもSassが何なのかよくわからない。プログラミング言語？？」ってことと、「インストールが上手くいかない！コマンドプロンプト使い方わからない！Dreamweaver（以下DW）動かない！GUIソフトってなに！？」ってことです。
Sassを極める！デザイナーがすぐ実践できる基本テクニック12連発 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 前回、これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応)というSassの基礎に関する記事を書かせていただきました。 そこで今回は、もう一歩つっこんでもっと使いこなせるようになろう！という趣旨のもと、ちょっと使えるようになったからっていい気になっている僕がSassのテクニックやら関数をまとめてご紹介いたします！ たくさんある機能の中から、今回は比較的簡単で実用性の高いものをチョイスしました。 目指せSassマスター！WEBデザイナーもコーダーもすぐに実践したくなるSassの基本テクニック12連発もくじ もくじ テクニック1 アンパサンド（&） テクニック2 演算 テクニック3 round() テクニック4 rgba() テクニック5 コメントアウト テクニック6 変数 テ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSコーディングで泣かないためのSassの基礎知識と10の利点