stylelintとBackstopJSで安全にcssを書ける環境を作った - BASEプロダクトチームブログ
こんにちは。BASE で Design Group に所属している三佐和です。主に ネットショップ作成サービス「BASE」 のフロントエンドを担当しています。 背景 BASE のデザインチームはここ最近で人数が急激に増え、活動が活発になってきており、その中のプロジェクトの一つとして、現在スタイルガイドの刷新に取り組んでいます。 しかし、人数が増えていく一方で、コーディングのルールの統一をコードレビューや個人の裁量に任せていたり、マークアップからリリースするまでに時間がかかってしまうことが問題になってきていました。 そこで、新しいスタイルガイドでは、デザイナーやエンジニアの作業工数を短縮し、より効率よく開発を進めるために、コーディングルールの整備とリグレッションテストを導入することにしました！ やったこと stylelint を使ってコーディングルールを管理 BackstopJS でテストを
Sassline
Baseline first. Set text on the web to a baseline grid with Sass & rems A starting point Sassline aims to spread better typography across the web. It can be used for prototyping, blogs or full website builds. It has recommended base typography styles and Sass mixins to work proportionally from the baseline grid using rems. Meticulous vertical rhythm Due to the way CSS handles text setting a baseli
Switching from Ruby Sass to LibSass — SitePoint
If you’ve been following the recent major announcements from the Sass community, you may have seen the huge LibSass 3.0 announcement at SassConf 2014. For some time now, the Sass Ruby gem has been getting more advanced features, while LibSass has been updated less quickly. This means that many people using LibSass to compile their Sass (usually through node-sass in a Grunt/Gulp workflow) have been
gulpでruby-sassからnode-sassへ移行するときのハマりどころ - Qiita
node-sass 3.0が出て、Libsassも3.2に上がった。これによって@at-rootなど（個人的に）重要な機能が使えるようになったので移行した。 互換性に関してはsass-compabilityが有用。 なんでlibsassにしたいのか？ gulp-sassのコンパイルが超早い。 今回の環境では100ファイルぐらいで6〜8秒ぐらいなのが1〜2秒ぐらいになった。 gulp-ruby-sassの独特な記法から逃れられる rubyを別途依存させる必要がない とかあたり。 互換性が担保されているとはいえ、ちょいちょい引っ掛かりがあった。 不正な色コードはエラーになる 今まではカラーコードが不正でも無視してくれていたが、libsassでは怒られてしまう。まあこれは普通になおすかそもそも効いてなかったので消せばよかった。
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
concat/minifyしたファイルへのリンクを grunt-usemin を使って自動で書き換える
最近、HTML,CSS,JavaScript を記述するのに、Jade,Sass,LESS,Stylus,CoffeeScript などのプリプロセッサが便利で使っていますが、CSSFrameworkを利用することもありファイルが複数に分かれていることが多くなってきました。 grunt に限らず自動化処理を実行して、本番環境用に結合( concat )･圧縮(minify) して複数あるファイルを1つにまとめてアップロードする方も多いと思います。 しかし、HTML内で CSS( meta link=~ ) JavaScript (script src=~) は 本番環境では minifyファイルを、開発環境では元々の複数にわかれたファイルのパスを設定することになります。 (Sassのinclude 等を使えば最終的には1ファイルに纏まりますが、CSSファイルのみの構成などもあるので････
How to Use the Double Ampersand Selector in Sass
The Sass ampersand (&) symbol is used to reference the parent selector in a nested rule. For example, the following targets .btn on :hover: .btn { ... &:hover { background: dodgerblue; } } We can also place the & after a selector to reverse the nesting order: .btn { ... .navbar & { background: lightsteelblue; } } This outputs a descendant selector that targets a .btn element inside .navbar: .btn {
Unison.js
Unifying named breakpoints across CSS, JS, and HTML What is Unison.js Unison.js is a small plugin (1.2kb minified) that allows you to declare named breakpoints in one place and automatically sync them across your javascript and markup. When all of your front-end technologies share breakpoint information, complex responsive tasks such as conditional loading and image swapping become much simpler an
The Sass and Compass book 'Sass and Compass for Designers'
Sass & Compass for Designers Read the book 'Sass and Compass for Designers' by Ben Frain to learn how to easily write more maintainable CSS with the Sass preprocessor and its companion authoring framework Compass. Whilst Sass and Compass may initially seem complex, this book clearly explains the core concepts and tools in layman's terms (if you can write CSS and HTML, you can easily master Sass an
ズルいデザイン（2）：SassやCompassを使って、ズルいデザインテクニック (1/2) - ＠IT
SassやCompassを使って、ズルいデザインテクニック：ズルいデザイン（2）（1/2 ページ） SassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介。グラデーション、角丸のお手軽かつ効果的な使い方とは？ シリーズ第2回、前回に続き、今回もSassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介します。 今回は、グラデーション、角丸のお手軽かつ効果的な使い方について解説します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 1: ズルいグラデーション CSS3ではグラデーションを扱えるようになったことから、画像を使わずに自在にグラデーションを描画して、CSSだけでよりリッチなビジュアル表現が可能になりましたが、一口にグラデーションといっても、う
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック：ズルいデザイン（1）（1/2 ページ） デザインが自分でイイ感じに作れたらいいなあというプログラマのみなさん。少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します Webプログラマ、Webエンジニアの皆さんが、個人で作るWebサービスやハッカソンなどで、短期間に集中してサービス開発してローンチしたいときに、もうちょっと自分でイイ感じにデザインできるといいなあという声をよく聞きます。 この企画は、そんなプログラマが、少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 ズルいデザインはSassとCompassを利用し
Using Sass source maps in WebKit Inspector
Here’s a second topic I talked about in my Fronteers 2012 jam session presentation. If you’ve been using a CSS preprocessor in your workflow, you’ve no doubt encountered this issue: you’re inspecting some element and want to edit the CSS, but finding that selector proves to be difficult as the inspector shows you file names and line numbers for your compiled CSS. If you’re using Firefox and Sass y
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VS Code で Prettier と Stylelint を連携して CSS/SCSS ファイル保存時にオートフォーマットをかける - Qiita
Using Sass with the Angular CLI | DigitalOcean
How do you organize your SASS files? - Designer News
gumbyframework.com
Can't compile gumby.scss (modular-scale unreachable) · Issue #71 · GumbyFramework/Gumby
Ionic Framework - The Cross-Platform App Development Leader
https://qiita.com/debiru/items/4771e270902de7c5cc6e
inuit.css – a powerful, scalable, Sass-based, BEM, OOCSS framework.