リストなどのセレクタ名にli class="menu01" という風にナンバリングをつけてそこに配置する画像に../img/list_img01.jpgと同じナンバリング同士を設定するなど scss %markBase{ padding:0 15px; background-repeat: no-repeat; } @for $i from 1 through 3{…

ボックスサイズを指定するキープロパティは height(高さ) widht(横幅) padding(内部余白) margin(外部余白) ですが、ミックスインで複数の引数を指定すれば記述は楽になりますが、 この4つをその都度全て書き込んでしまうため、結果的にコードが重くなってし…

メニューバーのロールオーバー時のバーの画像変更はCSSスプライトか opacityで透過度に変化を付けているパターンがあります。 後者の場合はIE6~8がopacityに非対応なので代わりにflterプロパティを使用します。 ただし、この2つのプロパティはそれぞれ透過度…

例えば"border-radius: 10px;"などのペンダープレフィックスが必要なスタイルを書く際に emmetなどのコーディング補助機能などを使えば必要なペンダープレフィックスは自動的に書き足してくれます。 ただ一部のCSS3プロパティで例えば"display:box"などはemm…

過去に作成したcssファイルなどを改めてscssで書き直すのは面倒... でもcssからscssにコンパイルしてくれるネットサービスがあります。 css2Sass http://css2sass.heroku.com/ 上段テキストフォームにcssコードをコピペして covert 2 scssボタンをクリックす…

Sass自体はcssの管理と記述を効率よくできるものですが、簡単なデザインや よほど凝ったものでない限り通常のCSSで十分だと思います。 特に全体で5ページ程度のサイトぐらいでしたらSassを絶対に使わなければならない必要性は あまりないと思います。 情報量…

#{}(インターポレーション)とは変数が参照できない箇所に記述されても 使うことができる機能です。主に画像のイメージパスなどに使われます。 sass $img_path : '../img/bgimage'; section{ background: url(#{$img_path}.jpg); } css(コンパイル後) section…

前回のカラーコードの操作と比べるとエクセル関数と使い方が似ているのでこちらの方が とっつきやすいです。 abs() 数値の絶対値(0からどれくらい離れているか)を出力します。 sass $margin : -15px; section{ .main{ margin: $margin; } .sub{ margin: abs(…

Sassには6種類のデータタイプがある。 6種類の型 Number型(数値) 1,1.2,332,100px,3em,80rem,90%...など Color型(色) red,white,#FFF,#03A3G1,rgba(255,255,0,0.5)...など String型(文字列) 数値、色、true,false以外の文字と"(ダブルクォテーション)､’(シン…

rgba() RGBaプロパティはRGB各色に0~255の数値で指定して、最後に透明度を0~1で指定します。 このRGBの値は#FFFFFFのような16進数表記を使用するとエラーが起きます。 Sassではrgba()を使用することで 16進数表記を自動的にRGB各色に0~255の値を換算してくれ…

ここから先はJavaScriptやPHPなどある程度プログラムを習った人向きです。 Sassでプログラムを組んで何らかの条件一致があったときにそれにそったcssを書き込んだり、特定条件が適応してる間にスタイルシートの繰り返しを命令する制御構文です。 @ifを使って…

初期値から任意の値を直に入力するのではなく、変数$valueに複数の値を前もって入れておき それを可変長引数として受け取る。 sass @mixin box($width:100px,$height:100px){ width: $width; height: $height; } $value : 300px,200px; .mainContent{ @inclu…

@mixinの引数を使えば簡単にボックスサイズの変更が容易になりますが ”marginは初期値のままで、paddingは違う値を入れたい"などスタイルの一部のみ変えたい(第1引数は変えずに第2引数のみ数値を変えたい)という場合は注意が必要です。 まずはわかりやすく、…

Sassで一番使える機能として有名な@mixin(ミックスイン)。 スタイルの集まりを定義しており他の場所に呼び出して使うという点では @extendみたいですが、定義した@mixinのプロパティ値を変更して 使えるという意味では、@extendというよりもPHPなどのユーザ…

@extendでscssファイルをコンパイルすると 継承元のセレクタも自動的に記述されます。継承元のセレクタである#(シャープ)や.(ドット)の代わりに%(パーセント)を代わりに 入れるとコンパイル先のcssに継承元のセレクタが記述されませんので 用途によって変数…

同じルールセット内に複数の@extendを指定。 scss(継承元,_extend.scss) .first{ font-size: 36px; text-indent: 1em; span{ font-size: 80%; color: #666; } } .second{ font-size: 24px; text-indent: 0.7em; span{ font-size: 18px; color: #999; } } .ac…

@extendとは指定したセレクタのプロパティを継承できる機能です。 sass section.content{ width: 600px; height: 400px; padding: 20px 10px; border: 4px solid #472122; } section.side{ @extend .content; } cssコンパイル後 section.content, section.si…

Sassでもcssのように@importが使用できます。 cssのimportと違う点はSassにはパーシャルという機能があります。 Sassの@importルール 基本的にcssの@importと同じですが以下の場合はエラーが発生。 メディアタイプを指定。 screenやtvなどメディアタイプを指…

cssを書いているとwidthやheight、paddingにmarginなど寸法の計算が多々必要になります。 sassではプロパティに四則演算が書き込みができコンパイル後にその結果を出力できます。 sass //足し算 .addition{ width: 100px + 20; } //引き算 .subtraction{ hei…

cssスプライトなどで可変するナビゲーションアイコンを コーディングする時などに『li a:hover{~}』,『li a:link{~}』などと 同じセレクタを繰り返し記述すると可読性が損なわれます。sassでは親セレクタである『li』あるいは『a』の部分を『&』を書くことで…

メディアクエリをネスト出来る。 CSSの場合はネストが使えないので、メディアクエリを各位置が離れてしまい 可読性が損なわれるのをscssのネスト機能を使うことで見やすく管理がしやすくなる。 sass #main{ float: left; width: 640px; @media screen and (m…

変数の基本 変数宣言 Sassで使う変数のルールは他の言語と同じように 変数の宣言とその中にプロパティの値を代入するという基本ルールが前提である。他の言語での変数宣言は$変数名 = 値;だが、Sassでは$変数名 : 値; という風に=(イコール)ではなく:(コロン…

sassは常駐ソフトやインストールアプリなどの自動アップデート機能はないので ターミナルで手動コマンド入力でアップデートする。 rubyのgemをアップデート gem update --system 最新のgemがインストールされている場合は "Latest version currently install…

firefox cmd + u chrome cmd + option + u safari cmd + option + u いちいち右クリックでやってました。 IEは省略。

koalaの環境設定について。 なにはともあれ、日本語表示。 画面左上の歯車アイコンをクリック。 Setting(環境設定)>General(一般)で言語を日本語を選択。 Sassの環境設定 環境設定>Sassから各種設定。 DefaultOptions CompassMode:フレームワーク「Compass」…

meta name="viewport"のcontent属性値について追記。 device-width content="width=device-width; で閲覧するデバイスに沿った解像度に合わせる。 initial-scale=1.0; content="width=device-width; initial-scale=1.0" 続けて、"initial-scale=1.0"と追記す…

sassコマンドやkoalaでコンパイルしたcssファイルはアウトプットスタイルを指定することで 可読性や機能性が異なる記述で出力されます。 現在あるスタイルは以下の4スタイル。 Nasted Sassの階層をインデントで間を一つ開けるタイプ。 アウトプットスタイル…

早速sassを使ってみようCommentsでは koaraを使ってscssをコンパイルしたがsassコマンドで直接コンパイルもしてみよう。 sassコマンド [input]:[output] まずコードが記述されている"style.scss"を MacintoshHD > ユーザ > ユーザ名フォルダ（ホームフォルダ…

index.phpと同じ階層内にstyle.cssを格納しておき、以下の情報を記す。 テーマの情報は日本語記述でもOKだがその場合style.cssのエンコードをUTF-8に設定しておく。 /* Theme Name: テーマ名 Theme URI: テーマのURL Description: テーマの説明 Author: テー…