GitHub - davidkpiano/sassdash: The Sass implementation of lodash.You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
10 SCSS utilities I can’t live without – Hacking UI
Every front-end developer needs a battle-tested SCSS arsenal for starting new projects. Here are 10 of the best SCSS utilties I find myself using most often. You can download the entire file to use in your projects from the UtilityBelt Repository on Github. Download “UtilityBelt.scss” Triangle Sagi likes to call this the chupchick (don’t ask me why). It’s great for adding a point to tooltips or s
Scut
Scut is a collection of Sass utilities to ease and improve our implementations of common style-code patterns. About You can think of the word Scut as an acronym for Sass-CSS Utitilies. Or think of it this way: Scut will help you, the frontend laborer, do your scut work. (But do be careful how you use the word in polite company. It's meanings are ... many.) Visit the Github repository Experiment wi
Fun with Sass & font icons - Jayden Seric
Fun with Sass & font icons ⚠️ This article is outdated: CSS in JS is far superior to Sass, and font icons are no longer a good idea. Use inline SVG React components and in certain situations plain old .svg files in img tags. Icon fonts have been been best-practice for a while now. They allow us to use tons of fully styleable cross-browser vector icons with one lightweight HTTP request. Folk typica
フリーのSass,LessコンパイラKoala【Win,Mac】
KoalaはWin,Mac,Linuxなどマルチプラットフォーム動くGUIのコンパイラです。 対応言語はSass(Compass),Less, CoffeeScriptです。 インストールはこちらからご使用のOSを。 現時点のバージョンはv1.0.0v1.3.0です。リリースしたてですね。 動作には予めRubyのインストールが必要です。 ※v1.3.0になったので少し修正しました（2013.6.2） koala使いかた ややフラットUIてきなインターフェイス。 プロジェクト登録 「＋」ボタンでフォルダを選択するか、 作業フォルダをドラッグすればプロジェクトが登録されます。 基本これだけでSass,Less,Coffeeのコンパイルをしてくれます。 書き出し設定 scssの緑のファイルアイコンをクリックすると画面右にオプションメニューが現れます。 「dynamic compilation」を
Source Maps 101 | Envato Tuts+
In today's modern workflow, the code that we author in our development environments is considerably different from the production code, after running it through compilation, minification, concatenation, or various other optimization processes. This is where source maps come into play, by pointing out the exact mapping in our production code to the original authored code. In this introductory tutor
CSS の書き方についてのメモ | Unformed Building
どんな感じで書けば楽できるかとか、後から修正しやすいかとか、そんなことです。 ボタンのスタイリングを例に、自分の通った道を追ってみます。 今回使う HTML は次のようになっています。 <div class="buttons"> <button class="edit">Edit</button><button class="publish">Publish</button><button class="delete">Delete</button> </div> これを CSS でスタイリングしていきます。 1. とりあえず個別指定 こんな極端な書き方する人はあまりいないでしょうけど、例として。 .edit { margin: 0 5px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; widt
Sass で Singleton を実現し、安心してクラスを再利用する | nodot
この article は Less & Sass Advent Calendar の23日目のエントリーとして書かれています(あれれ?!)。 概要 CSSメタ言語を導入する目的の一つにリソース再利用性の実現というものがある。Sass の場合、mixin や extend によって実現している。特に extend によるスタイルの継承は強力である。 しかし再利用できるようなクラスをまとめたライブラリを import して利用すると、実際には使われていないクラスも出力されてしまい、ファイル容量が無駄に肥大する。使うクラスだけコピーするとか、使わないクラスは削除するなどの手動管理は手間がかかる。 そこでクラス自体を出力するような mixin を作れば、必要なクラス定義だけを include でき、不要な CSS コードを出力しなくて済む。しかし、extend したいクラスを必要になる度に inc
WindowsでWebStorm-PhpStormからSassをディレクトリ単位でwatchする
単にSassファイルをwatchするだけなら、以前書いた記事とはてなダイアリーで書いたもので大丈夫なんですが、分割されたSCSSファイルごとにやるのもあれだし、partialなんかはどうするのってなるので、ディレクトリ単位でwatchしておきたいわけです。 まあ前のと同じようにディレクトリを指定すればいいんだろうと思ったらエラー。 で、調べてみたら、--watchコマンドのディレクトリ指定時のパスの書き方が問題のようです。 SASS -watch path:path broken on Windows - Sass | Google グループ つまり、パスを指定するときはバックスラッシュじゃなくてフォワードスラッシュ（普通のやつ）で書いてね、ってことみたいです。 次の問題はPhpStormのExternal Toolsの設定なんですが、Parametersのマクロにはフォワードスラッシュの
Sass入門 ～より効率的なCSSコーディング | Gihyo Digital Publishing … 技術評論社の電子書籍
Sass入門 ～より効率的なCSSコーディング 著者 上村光星，富田梓，對馬慶子，山田敬美 著 発売日 2012年5月22日 更新日 2012年10月19日
sassの抑えておきたいfunctionの使い方 « NAVER Engineers' Blog
こんにちは。 年末の予定はぶっ通しでスカイリムにつぎ込むことが決定したUIT富田です。 今回は、Less & Sass Advent calendar 2011の6日目として、 sassのfunctionについて解説します。 すっぽりハマった四則演算の落とし穴 sassは値の四則演算をサポートしており、10進数だけでなく、16進数の値であってもよしなに計算してくれます。 color: #a3a4a5 + #111111; ↓ color: #b4b5b6; 16進数と10進数でもエラーにならず計算してくれます。（普通あまりやらないとは思いますが） color1: #000000 + 1; color2: #000000 + 15; ↓ color1: #010101; color2: #0f0f0f; この16進数の計算は、結果が#fffffを上回った場合、上回った分は切り捨てて、す
【SCSS】eachの中でループした回数を使う
@forなら繰り返してる回数がわかるけど、 @eachはわからないのでなんとかやったらできた。 scss// カウンターをグローバルにしておく $_counter: 0; @each $value in category_1 ,category_2 ,category_3 ,category_4 ,category_5 { .btn_#{$value} { left : 30px * $_counter; &:before{ // console.log相当 content:$_counter; } } // 加算 $_counter:$_counter+1; } css.btn_category_1 { left: 0px; } .btn_category_1:before { content: 0; } .btn_category_2 { left: 30px; } .btn_cate
Simple CSS color management with SASS | 12 Spokes
May 2, 2012 Simple CSS color management with SASS Chris How-to, SASS, Web Design & Development 0 When I first got my CSS on (did I really just say that?) back in 2006, managing color values in my style sheet was pretty simple: I had my colors for text, and then my colors for elements with solid backgrounds, and that was about it. If I had my act together, maybe I’d write a comment at the top of my
Refactoring >14,000 lines of CSS into Sass | Wildbit
Beanstalk is a mature product and during its’ 5 years of existence the design and UI have been changed a lot. Our CSS grows accordingly and lately it consisted of 5 files, 14,211 lines and 290 KB of code. We handcrafted our CSS from the start but more recently it had become quite hard to manage. With the growth of new tools like Sass and LESS I decided to rebuild our stylesheets into something cle
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://mnmlkit.co.uk/crumpet
GitHub - LinkedInAttic/archetype: Archetype is a Compass/Sass based framework for authoring configurable, composable UI components and patterns.
GitHub - luqmaan/sass_to_scss: Convert Sass to SCSS
14islands
A couple of Sass functions | Hugo “Kitty” Giraudel
GitHub - drublic/Sass-Mixins: Sass mixins for general use
