Sassで連想配列が使えるようになってたので使ってみた。 - QiitaSassで連想配列が使えずに泣いたあの日はもういない。 無駄に配列２つ用意したあの日よグッバイ。 ということで、早速サンプルいってみよう。 $member_color:( madoka:pink, homura:black, sayaka:blue, kyoko:red, kyube:white ); @each $name, $color in $member_color { .color_#{$name} { color: $color; } }
Classy CSS: Sassスタイルシートへのプログラマティックアプローチ | POSTD
この記事を書き始めたのは、現在使われているCSSの命名規則やスタイルの融合についての見解を Atomic OOBEMITSCSS という題名で風刺的な記事にまとめ、SitePointに投稿した数週間後です。それが8月頃のことだったのですが、この投稿はその後の私の生活に影響を及ぼしました。冗談のつもりで「 Atomic OOBEMITSCSS 」という題名をつけたがために、世間の人々はその題名を取り上げ、話題にしたのです。（正直言って、その内容について直接人々に質問することは、私にとって非常に愉快なことでした）。そして今年のSassConfで @extend の利用について議論したことがきっかけで、この見解を再検討する必要性に気づきました。 Classy CSSについて 上記で紹介した記事（「Atomic OOBEMITSCSS」）では、コンポーネントをマークアップする方法について（Pint
Ayre – Sass powered responsive grid system
Introduction Grid units are defined by a minimum ideal width and a maximum number. The total number of units is increased dynamically based on the viewport size. Column widths, margins and breakpoints are specified in grid units. Documentation & Examples Using a unit width of 75px, a limit of 12 units, 10px gutters and 20px page margins. All of these variables can be customised, see the Options se
How to Use Sass to Build One Project With Multiple Themes | Envato Tuts+
The frontend-developer’s workflow has undergone big changes in recent years. More complexity, higher requirements and bigger projects move us toward new technologies such as preprocessors. Personally, I love my preprocessor workflow and wouldn't want to miss Sass for my projects these days - without it I would be a mess. One situation in particular where Sass has helped me out is in creating a sin
Sass Mixins to Kickstart Your Project — SitePoint
Mixins are great, aren’t they? They are like functions that output CSS. According to the Sass docs: Mixins allow you to define styles that can be re-used throughout the stylesheet without needing to resort to non-semantic classes like .float-left. Mixins can also contain full CSS rules, and anything else allowed elsewhere in a Sass document. They can even take arguments which allows you to produce
Sass/Compass よくあるトラブルと 解決方法・回避方法
14. 調整用CSSを用意する <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"><!-- コンパイル後のCSSは編集禁止 --> <link rel="stylesheet" href="temp.css"><!-- スタイル調整はこちらを編集 --> </head> <body> <!-- 中略 --> </body> </html> コンパイル後のCSSファイルとは別に 調整用のCSSファイルを用意する
DOCSSA - The Ultimate Driving Machine
Are you looking to invest in the stock market but don’t know where to start? Trading apps are an excellent way for beginners and experienced investors alike to trade stocks, ETFs, and more from the comfort of their own smartphones. With the rise of mobile technology, trading apps have become increasingly popular for those looking to take control of their financial future. Whether you’re a seasoned
Sass/Less/Stylusでの変数入力を補助する「List stylesheet variables」(Sublime Text Package) | Program | position: absolute;
このエントリーは、膨大にあるSublime Textのパッケージ群の中で、執筆に参加した『Web制作者のためのSublime Textの教科書』の中で紹介していないパッケージのList stylesheet variablesを取り上げます。 監修のこもりさんが、Web制作者のためのSublime Textの教科書のFacebookページにて書籍に掲載していないパッケージを続々紹介しているのですが、そこでList stylesheet variablesが取り上げられました。 "インストールしてプリプロセッサのファイルを開いて、「Ctrl＋Option＋Lキー（Windowsの方は、Ctrl＋Alt＋Lキー）」を押すとあら不思議、定義済みの変数がわらわらとリストされます。もちろん絞り込みもできるので、選択してEnterキーを押せばキャレットの位置に挿入されます。" ということで、パッケージ
My Current CSS and Sass Styleguide — SitePoint
It’s never easy to find a way to write consistent, future-proof, and robust CSS. It’s taken me months, if not years, to come up with a clean way to write mine. In fact, my process is still evolving, and I expect it to change even more. In the meantime I have accumulated enough knowledge to write an article about how I feel about writing CSS. I don’t claim that these suggestions are for everyone, a
Sassの変数スコープと!global
Sassの変数スコープの仕様では、ローカル・コンテキストからグローバル変数を上書きできていた。LESSでは多くのプログラミング言語と一緒で上書きはできないという素直な仕様になっている。Sass 3.3では上書きしようとすると警告が出るようになり、!globalフラグを使い明示的に上書きしていることを教える必要があるようになった。将来的には仕様が変更され、警告なしでLESSと同じ挙動になるようだ。 Sassではローカル・コンテキストでグローバル変数を上書きでき、そのスコープを抜けてもそのままになる。 $color: #f00; .test-local { $color: #0f0; color: $color; // #0f0 } .test-global { color: $color; // #0f0 } 対してLESSでは上書きされない。 @color: #f00; .test-loc
Architecture for a Sass Project — SitePoint
Remember when we used to do everything with nothing more than plain old CSS? All we had was a single CSS file, longer than a sleepless night. Yay! Thousands and thousands of lines — usually poorly written — of CSS where we were struggling to find the one value we had to change to fix some obscure and frustrating IE bug. Well those days are behind us, folks. Dealing with CSS has become more interes
Friendlier colour names with Sass maps — Blog — Erskine Design
Code and technology Friendlier colour names with Sass maps For us front end devs, Sass is a marvellous, marvellous thing, but although it gives you numerous powerful tools, it’s fairly unopinionated about exactly how you should put them to use. If you’re not careful, it’s just easy to end up with mess of poorly structured code as it was in the dark pre-Sass days. One thing we’ve struggled with rec
Sache: Find Sass and Compass Extensions for your next project
Discover Sass & Compass Extensions Find the perfect tool for your next Sass or Compass project. Add Your Own
モバイルアプリ向けUIフレームワークionicがSassで作られている＆AngularJSに最適化されていて俺得すぎる | mah365
HTML5でモバイルアプリを作るなら、UIはionicで決まりなのでは！と思えるぐらい良いライブラリです。AngularJS＆Sass派の人はぜひ使ってみてはいかがでしょうか。 はじめからAngularJSで使うことを念頭に置かれているのが良い はじめからAngularJSで使うことを念頭に置かれているので、モバイルアプリで当たり前に使う機能をAngularJSから簡単に操作できるように、ionic-angular.jsというライブラリが用意されています。 ナビゲーション（Views and Navigation） テーブルビュー（List） タブバー（Tab Bar） スライドメニュー（Slide Menu） などなど、一通りの機能がAngularJSから操作できるようになっています。 設計方針もCocoa Touchっぽくしているとのことで、iOSネイティブで開発していた人にもとっつき
Grunt vs Gulp - Beyond the Numbers
Just when you think that you're in control, Just when you think that you've got a hold, Just when you get on a roll, Here it goes, here it goes, here it goes again. OK Go - Here It Goes Again And so the evolution of front-end development continues with Gulp, the new build system that has already garnered praise amongst many web developers. After spending some time reading the docs and playing arou
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
4digits.net | DNS propagation
Sass Color Generator
GitHub - sturobson/Sassifaction: A Sass mixin library
Sassとかまとめ
✨Home | Una Kravets Online✨
