How to lint your Sass/CSS properly with Stylelint
Last updated on the 27th February, 2016 . Stylesheet linting. Not many people do it. Many more people should—especially diverse teams that have a lot of hands touching the codebase. In this article I’m going to talk about why we should lint our stylesheets, and how to implement stylesheet linting into our build pipelines for both vanilla CSS and Sass. Table of contents: Introduction What is lintin
もっとSassろう！慣れてきたら使いたいワンランク上のコーディング方法4選
同じレイアウトのスタイルで、一部の色やアイコンだけを変えたい、というときに便利です( ˇωˇ ) 使用方法 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に直接色コードを配置しておりましたが、あらかじめ変数を定義しておくと、のちの管理がしやすくなります�( ˇωˇ ) /* ===========
Gulp.jsとPostCSSを使ってCSSの面倒な作業をなくそう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ここ最近はいろいろと勉強したいことがあふれかえってます。うまく時間を作って知識を増やしていきたいところです。こんにちは、CTOの林です。 近年のエンジニアリングは自動化の方向へどんどん流れています。 Grunt,Gulp,WebPack,CI,Chef,Ansible…… etc. もちろんCSSにも自動化の流れが来ています。 過去にこんなことがありませんでしたか？ CSSのインデントや記述の仕方がバラバラ パフォーマンス・チューニング？？ とりあえずベンダープレフィックスを全部つけておけばいいだろう！ 圧縮を納品前にやって、圧縮したら崩れた 今日は普段の制作ですぐに使えるCSS自動化の方法を紹介しつつ、実際に使えるパッケージを導入するところまでを行いたいと思います。 ※11月18日にいいオフィスで行われた「書籍『最強のCSS設計』出版記念イベント＆勉強会―CSS設計、チーム開発を成功させ
案件テーマ開発環境 : WordPress | FindxFine
WordPress › Theme Directory › kanagata プラグイン Category Archives « WordPress Plugins List Calendar « WordPress Plugins Min Calendar « WordPress Plugins Resize Editor « WordPress Plugins concrete5 Infotown Table 簡単な操作でテーブルを作成するアドオンを公開しています。 EC-CUBE3 EC-CUBE3のプラグインは2016年1月28日(木)に開発元である株式会社ロックオン主催のEC-CUBEプラグインアワード3.0で開発プラグインInfoTownLinkWpがCPI賞と入選のW受賞を果たしました EC-CUBEプラグインアワード3.0 結果発表 / ECサイト構築・リニューアル / E
Sass Guidelines
An opinionated styleguide for writing sane, maintainable and scalable Sass. The Sass Guidelines project has been translated into several languages by generous contributors. Open the options panel to switch. About the authorMy name is Kitty Giraudel, I am a French front-end developer, based in Berlin (Germany) since 2015, currently working at Cofenster. I have been writing Sass for several years no
ちゃんとCSSを書くために - CSS/Sass設計の話
The document summarizes Hiroki Tani's presentation at the QCon Tokyo 2014 conference on modern CSS architecture. Some key points discussed include: - Adopting modular approaches like OOCSS and SMACSS to separate structure from skin/style and improve maintainability. - Using techniques like BEM naming to further decouple CSS from HTML. - Developing reusable CSS modules and components with flexible
CSS Nite LP26「CSS Preprocessor Shootout」のフォローアップを公開しました｜CSS Nite公式サイト
ベストセッション20192019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。 2010年から2019年のベスト・セッションCSS Niteベスト・セッション2019CSS Niteベスト・セッション2018CSS Niteベスト・セッション2017CSS Niteベスト・セッション2016CSS Niteベスト・セッション2015CSS Niteベスト・セッション2013CSS Niteベスト・セッション2012CSS Niteベスト・セッション20112010年のベスト20セッション CSS Niteについて CSS Nite（シーエスエス・ナイト）は、Web制作に関わる方のためのセミナーイベント。2005年10月にスタートし、2017年10月で丸12年。 これまでに、600回を超える関連イベントを通し
Michiel de Graaf - Retina for web workflow - Designer and writer of CSS & HTML
The biggest pain of retina becoming the standard for computer displays is the extra work that's involved in making it work on the web. But it's possible to automate your retina (@2x) for web workflow thanks to Slicy, CSS preprocessors like Sass or Less and retina.js. Slicy A beautiful and very clever app by MacRabbit. Slicy turns photoshop layers into normal and retina images by simply naming a la
Takazudolog - OOCSSとSass
CSS Preprocessor Advent Calendar 2012の10日目、@Takazudoです。 僕はSassが好きです。なぜならSassにはextendがあるからです。その理由を、社内勉強会で発表した、以下のスライドで話したことを補足しつつ、書きます。 OOCSS + Sass OOCSSってなんぞ まず、Sassのextendが素敵な点を紹介する前に、OOCSSについて簡単に紹介します。 OOCSSというのは、Nicole Sullivanという人が言い出した考え方です。そのプレゼン資料やビデオなどは、本人が発表したものが、slideshare等にアップされています。 Object-oriented CSS Object Oriented CSS by Nicole Sullivan · Fronteers The Cascade, Grids, Headings, an
【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編 | DevelopersIO
はじめに 早速ですがみなさん、黒い画面（コンソールやターミナル）はお好きですか？ ちなみに僕は最近やっと黒い画面に対していくつかの呪文使えるくらいになりました。文系理系でもどちらでもなくさらに低学歴の僕にとっては潜れば潜るほど黒い画面がつきまといます。（今では好きですよ、黒い画面） 今回は、すぐに使えるSCSS入門｜基礎編ということで、「黒い画面など見たくない！」というあなたにも、GUI操作だけですぐに使えるアプリケーションのインストールからSCSSの基本的な利用方法について、実際の開発に使えるポイントを押さえて解説していきたいと思います。 SCSSを覚えて生産的で楽しいWebサイト制作・アプリケーション開発をしていきましょう。 まだSCSSを知らない方向けに「SCSS」って？ 前回の記事「Media Queriesの記述を少し楽にしてくれるSCSS（Sass） Mixin（自作）」からの
UXの効果が数字でわかる！5つのUX KPI : DeNA Creator(クリエイター) Blog
プログラミング教育や社員の健康をサポートする「CHO室」の取り組みなど、DeNAのCSRに関する情報を発信するブログ
【Sassを覚えよう！】もくじ的なのと参考リンク
需要が有るのか無いのかも分からず、半分以上は勢いで書いてたSassを覚えようシリーズですが、少しでも利用する人が増えるきっかけになれば幸いです。 カテゴリ一覧から全部見れますけど、一応【Sassを覚えよう！】の全記事一覧です。 【Sassを覚えよう！Vol.1】はじめに 【Sassを覚えよう！Vol.2】何がすごいの？プログラムが出来なくても使える？効率がホントに上がるの？ 【Sassを覚えよう！Vol.3】一番カンタンな環境構築（Scout編） 【Sassを覚えよう！Vol.4】Sassの基本的な記述方法 【Sassを覚えよう！Vol.5】環境構築（黒い画面編） 【Sassを覚えよう！Vol.6】黒い画面での実際の運用に関して 【Sassを覚えよう！Vol.6.5】バッチファイルを使ってカンタンに黒い画面でSassを利用する 【Sassを覚えよう！Vol.7】ファイルを分割して管理を楽に
Sass を今すぐ実務で使おうよ！ « NAVER Engineers' Blog
はじめましての tacamy です。 さて今日は Less & Sass Advent calendar 2011 の 3 日目です。 「Sassかぁ。まーたしかに便利そうだけど、 実務で使えるか分からないし自分には関係ないかな。」 とか思ってませんか・・・！？ ぜんぜんそんなことないですよ！( ･`ω･´) その証拠に、NAVER では半年ほど前から、 新規サービスはすべて Sass を使って制作していますが、問題なく使えています。 むしろ効率化できて、CSS を書く工数が減った気もします（個人の感想です）。 小難しいテクニックは、このあとの 22 人が書いてくれると思うので（丸投げ）、 今日の記事では、Sass を実務で使うことに絞って書いてみます。 実務でSassを使うメリットって？ 制作の工数が減る CSS3 を使うときのベンダープリフィックスをいちいち自力でつけたり、
(S)CSSの書き方メモ
HTML5時代に向いていそうな(S)CSSの書き方を模索しています。SCSSで書くのでモジュール式に色々分割した方が良さそうだな……とか色々試してますが、なかなかこれ！ というものに辿りつけません……。ということで、ここ最近の書き方をメモがてら晒してみる試みです。 実際にこのサイトで使っているSCSSファイルを抜粋しつつ列記していきます。 style.scss style.cssになるSCSSファイルではCSSは書かないようにします。ただし例外としてCSS文法での@importルールはその必要性からここに書きます。Webフォントなんかで使いますね。それ以外はSCSSの@importでモジュール化した各種SCSSファイルを読み込んでいきます。 @import url("http://fonts.googleapis.com/css?family=Pacifico"); @import "va
Sass でもう一度 CSS を楽しく!
僕もようやく Sass をはじめました。評判どおり、ヤバいです。CSS を書くすべての人に習得してほしいとすら思います。とくに、最近 CSS を書いていてもつまらなかったり、設計に行き詰まりを感じたりしている人は、迷わず Sass を試してみるべきです。Sass のサイトには “Sass makes CSS fun again”—「Sass でもう一度 CSS を楽しく」というフレーズが掲げられていますが、ハッタリではありません。 しかし、実際に Sass を導入するのは敷居が高いと感じる人も多いのではないかと思います。コマンドラインとかよくわからん、独自構文の学習コストが気になる、実際に仕事で使えるのか疑問…など。 そこでこの記事では、僕が Sass をはじめるにあたって感じていた不安などをもとに、「Sass は難しくないよ!」というアピールを試みます。少しでも Sass 導入の障壁を取
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/debiru/items/28d54b5c1e295d880cd3
inspiretrends.com
Mobile Slide-in menu
OOCSS + Sass
compass-style.org is almost here!