今更だけれどSassぐらい知っとこうと思ったのでいろいろと自分用にメモ。 導入とかは省いて構文などのメモです。 SassにはSassとSCSSと言う2種類の記法があるらしいですけど、 ナウなヤングたちはSCSS記法って聞いたのでSCSS記法でメモってます。 基本的なこと 記号いろいろ 記号 意味
![Sassメモ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b58175ef98a5ac6dda07bdb5ad6a6deab30fcc85/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9U2FzcyVFMyU4MyVBMSVFMyU4MyVBMiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YWYyZDBmNDUwZTYzOTZkMTc2ZThkYTJlNTAyZjYxYzM%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdG9tb3l1a2lfb2thd2EmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTY0Y2Y5MTIxMTEwMjgzODQ3MmY3ODZkMGZhZTQ5Yjkz%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D2eae24b1f4676559aa94dda81ed98715)
SCSSを導入しようかと検討する際に、このブログの記事を参考にしてくれた奇特な方が居たそうな。どうもありがとう。 で、声をいただくと書かない訳にはいかないので、条件分岐のIf文と反復処理の構文に絞った内容で書いてみようかと思う次第です。 SCSSとはCSSの拡張言語です。長くなったり、複雑になって管理できなくなったりするCSSを効率的に書けるようにします。効率的にする機能として、以前に紹介した変数やパーシャル、これから紹介する条件分岐のif文と繰り返し処理のfor文などがあります。他にも継承させる@extendや関数化できる@mixinなどがありますが、これは別の機会で。 条件分岐の使い方デザイナーならjavascriptとかで触れたことがある条件分岐、if文の使い方です。 公式サイトを見ると、基本的な記述例と以下内容が記載されています。 Note: Control directives
同じレイアウトのスタイルで、一部の色やアイコンだけを変えたい、というときに便利です( ˇωˇ ) 使用方法 html <section id="nav"> <ul> <li class="nav_home"><a href="#">HOME</a></li> <li class="nav_about"><a href="#">ABOUT</a></li> <li class="nav_company"><a href="#">COMPANY</a></li> <li class="nav_contact"><a href="#">CONTACT</a></li> </ul> </section> <!-- / #nav --> 以前、$colorsに直接色コードを配置しておりましたが、あらかじめ変数を定義しておくと、のちの管理がしやすくなります�( ˇωˇ ) /* ===========
jQueryのeachと$.eachの使い方のメモです。あんまり深い知識はないので簡単な使い方ですが。。基本的にはeachは指定した要素を繰り返し処理してくれるのに対し、$.eachは配列やオブジェクトを指定して1つずつ処理してくれます。例えば、ある親要素の子要素を指定してeachで1つずつ配列に格納して、その配列を$.eachで処理したりといったこともできますね。こんな使い方でいいのかわかりませんが。以下サンプルコードです。 [ads_center] こんな感じのマークアップがあったとします。 <div id="sample"> <p>sample</p> <p>sample</p> <p>sample</p> <p>sample</p> </div> で、eachを使って#sampleの子要素pに順番をつけて、配列を作りたい場合は以下のようにしてあげるといいかもしれません。 var a
説明 resetとendを使って配列の最初と最後の値を取得することが出来るので、これを使用して比較します。 resetとendの使い方 $array = array(1, 2, 3, 4, 5); echo reset($array); // 1 echo end($array); // 5 resetとendはそれぞれ最初と最後の値を取得するだけなので、配列の値がユニークな場合のみ有効ですが、以下の方法で最初と最後を取得できます。 $array = array(1, 2, 3, 4, 5); foreach ($array as $value) { if ($value === reset($array)) { // 最初 } if ($value === end($array)) { // 最後 } } 配列がユニークではない場合でも最初と最後を取得する方法 配列の値がユニークではない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く