Sass(Scss) Memo: 変数 | Culture27今回は変数についてです。 $ から始めて、値はCSSと同じようにして設定します。 こんな感じ。 Scss $margin: 2em 0; // $margin に "2em 0" をいれて定義する。 h1 { margin: $margin; }
SassとCompassを使って楽しくCSSコーディング！ - develo.org
HTML、CSS、Javascript、デザイン、絵を描いたり。
なぜ @kotarok さんは mixin より extend を推すのか - mixi engineer blog
こんにちは。最近、実は JavaScript よりも Perl が好きなたんぽぽグループの大形です。 Perl の、仕様書など無いところがたまりません。勉強しても勉強しても...。いえ、今回は Perl の話ではありませんでした。 一昨日の土曜日ですが、会社にお金を出して貰って、 SwapSkills さんの『CSSを便利に使うための LESS入門』にお邪魔してきました。 何を隠そう、いや、隠すことは何も無いのですが、私は今「クライアントサイドのバックエンド担当」として働かせていただいてます。つまるところ、デザイナさんやコーダさんが日々目の前の案件と戦い続けている中で、一歩引いたところからお助けユーティリティを作ったり、俯瞰して工程を見直してみたり、デザインにおける継続テストの仕組みを考えたり、新しく何かの役に立ちそうなものをどこからか引っ張ってきたりするお仕事です。 そんなお仕事の一環と
IE 9以下に存在するセレクター数制限にはまった
IE 9以下に存在するセレクター数制限にはまった 開発中にいきなりCSSが壊れて原因を探っていたらこれに行き着きました。IE 9以下では1つのCSSファイル当たり4,095個までしかセレクターを認識しない。4,096個以上は無視される。ええええ。。 SCSSだと割とカジュアルにセレクター数が増える CSSは出来るだけ1ファイルにまとめたい（リクエスト数削減のため） との組み合わせがやばい。SCSSはセレクターが他のページに影響しないように以下のように書いていました。 // 共通部分 @mixin foo { color: red; .foo { font-size: 2em; // たくさんの指定… ... } } // 影響範囲を以下のページのみに限定したい #page-a { @include foo; } #page-b { @include foo; color: yellow;
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞
CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために
sassを使ってCSSのめんどくさい繰り返し部分を楽に記述する | CSS-EBLOG
sassを使ってCSSのめんどくさい繰り返し部分を楽に記述する カテゴリ：sass 2011年12月20日 22:45 この記事はLess & Sass Advent calendar 2011の20日目として書いている記事です。 sassを使った繰り返し処理の基本 sassにはプログラム言語と同じような処理が存在します。 その中でも繰り返し処理をピックアップして、ちょっとめんどくさい処理を簡単にする方法をご紹介します。 単純な繰り返し処理 sassには繰り返し処理に使える文として、@each と @for があります。 JSなどではおなじみですね。 使い方も、他のプログラム言語のものと同じです。 @eachは指定したリストを順番に処理するもの、@forは指定した数値の間で繰り返し処理をするものです。 また繰り返しではありませんが、めんどくさい処理をまとめる、という意味で@function
【Sassを覚えよう！Vol.10】mixin とか色々活用してスマホ案件で楽をする
気付けば、Vol.10！ ずいぶん長編になってまいりました。 何気に、既に去年1年分のエントリー数を超えてるだなんて！ 今年が頑張ってるのか去年がひどすぎたのかは、ボクには分かりません。 ・・・はい、後者です。 さてさて、Vol.4のSassの基本的な記述方法で書いた「ミックスイン」に関して、もうちょい書いてみたいと思いますが、ミックスインは奥が深くてこれから触れる内容も、触り程度って感じだと思いますが、それでも、タイトルに有るように、スマホ案件なんかではかなり活躍しちゃいます！ ミックスインついでに、@if 、@each 辺りもカンタンにですが触れていきます。 ここまで来ればだいぶSassを使いこなしてる様な気がしますよ！たぶん。 や、日本初の Sass エヴァンジェリストである @kotarok さんみたいな超上級者な方々からしたら、鼻をほじほじしながら ( ´_ゝ｀)フーン 程度なん
Sass の @extend はどこがすごいのか
この記事では Less & Sass Advent calendar 2011 の 16 日目として、Sass の @extend 機能について書いてみます。が、諸事情により締め切りを過ぎてからあわてて書いており、かなりとっ散らかったものになるであろうことをあらかじめお断りしておきます。 さて、まずは @extend の基本的な機能についてざっとおさらい。@extend される側として一連のスタイルを定義したセレクタがあり、そのセレクタを @extend で継承しつつプロパティを追加したりして、新しいセレクタを作ります: // SCSS // 継承元のセレクタ .button { display: inline-block; border: 1px solid gray; background-color: silver; &:hover { border-color: black; }
Scoutが起動（監視）できない（Potato Tips Shinjaga > <050000>デスクトップアプリ > <050010>Web）
「Sass（SCSS）」を簡単に使うことができる「Scout」というAIRアプリが紹介されていたので、早速インストールしてみました。 しかし私の環境、「Windows 7 Ultimate 64bit」では起動はできるのですが、監視を始めようとするとエラーが出てしまいました。 原因を探ると、「Java」が見つからないためのエラーのようです。「\Program Files\Java\jre6\bin\java.exe」を探すようなのですが、私の環境（64bit版）の場合「\Program Files (x86)」にインストールされていたため、見つからなかったようで、「\Program Files (x86)\Scout\javascripts\app\process_interaction.js」の95行目を編集することによって改善できました。 同じような症状に遭遇した方は、確認してみてくだ
【Sassを覚えよう！Vol.3】一番カンタンな環境構築（Scout編）
さてさて、3回目のエントリーからは、実際に手を動かして行きますよっと。 何はともあれ、Sassが使えるようにしないといけないので、この記事では環境構築に関して書いてきます。 まずは黒い画面は一切使わずにGUIで操作が出来るScoutと言うAIRアプリでSassを動作させる方法をご説明します。 恐らく、現状ではコレが一番カンタンな方法だと思うので、取っ掛かりとしてはとても良いかなーと思います。 ちなみに、Scoutのインストールに関しては、まーしーさんの記事も分かりやすいかと思うのでそちらも参照して下さい。 Compass / Sass の導入が簡単にできる Scout を試してみた｜linker journal｜linker Scoutのインストール方法 んでは最初に、下記のサイトからScoutをダウンロードします。 英語なサイトですが、英語力は全く必要無いので躊躇なくいきませう！ Sco
コーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。 ｜https://wp.yat-net.com/name
2012年 01月 12日 コーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。 カテゴリ： Sass タグ：CodingSassコーディング効率化 CSSのメタ言語として登場したSass。去年から認知はしていたのですが中々手を出しておらず、年が開けて「やってみよう！」と思い起こして使って見ました。 Index 1.Sassとは 2.インストール 3.SassファイルをCSSファイルに 4.実際に作る 5.参考文献 1.Sassとは Sassがなんなのか知らない人も居ると思うので簡単に説明すると、CSSファイルを作成するために扱うプログラムのようなもので、直接CSSファイルを作成するのではなく、CSSよりもシンプル且つ構造化した記述でSCSSというファイルを作成し、そのファイルからCSSファイルに変換（コンパイル）します。 コンパイルされたフ
Webデザイナーのための「本当は怖くない」"黒い画面"入門
Editor's Notes#2: \n#3: \n#4: \n#5: \n#6: \n#7: \n#8: \n#9: \n#10: \n#11: \n#12: \n#13: \n#14: \n#15: \n#16: \n#17: \n#18: \n#19: \n#20: \n#21: \n#22: \n#23: \n#24: \n#25: \n#26: \n#27: \n#28: \n#29: \n#30: \n#31: \n#32: \n#33: \n#34: \n#35: \n#36: \n#37: \n#38: \n#39: \n#40: \n#41: \n#42: \n#43: \n#44: \n#45: \n#46: \n#47: \n#48: \n#49: \n#50: \n#51: \n#52: \n#53: \n#54: \n#55: \n#56: \n#57: \n#5
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.css2less.cc/
Scout-App - Site has moved
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker
