超絶・超速のnode-sassでsassコンパイルのすすめ
さて今回はsassを取り上げてみます。sassといったらcompassが出てくるほど有名ですが、すでに開発終了してから4年以上たっているわけでしてしかもコンパイラとしての機能しか使っておらず、他にいろいろ調べたらlibsassというライブラリがありsassをC・C++で実装したものということです。 Node、Ruby、Go、Python等の言語からも使えるようでしてnodeなら必ず入れるのでnodeで提供しているnode-sassを入れることにしました。nodeとnpmはセットなのでpackage.jsonのscriptsに記載して運営する方法をご紹介いたします。 gulpとかもありますがいろいろ入れたりするのが面倒なのでpackage.jsonだけで使う方法です。とてもシンプルで使いやすいですのでおすすめな方法です。 node-sass導入方法 node,npmは入っている状態での方法に
1分でできるnode-sassとautoprefixerを使用したSCSSコンパイル方法
node-sassとautoprefixerでコンパイル 昔はSASSのコンパイルにはCompassを使用することが多かったが、現在では新しいプロジェクトであればnode-sassとautoprefixerを使用するのが一般的だ。 node-sassはRubyを使用したCompassよりも処理速度が速く、さらにautoprefixerを使用すればCSSのベンダープレフィックスが自動で付与されるためコーディングの手間が激減する。 Yarnを使用すればすぐに環境構築可能 node-sassとautoprefixerの環境構築は難しそうに思えるが、Yarnを使用すれば1分でできる。 Yarnがインストールされていない場合はあらかじめインストールしておく。 $ yarn -vでバージョンが出なければインストールされていない。 インストール | Yarn node-sassとautoprefixer
CSS Grid Layoutをガッツリ使った所感 - ICS MEDIA
CSS Grid Layout Moduleはレイアウトを構築できる新しいCSSの仕様です。従来はfloatやFlexbox( display: flex )で対応していたようなレイアウトを効率的に構築できます。 この記事では、CSS Grid Layoutをガシガシ使ってどうだったのか？をお伝えします。 Grid Layoutで作ったサイト 2017年4月にリニューアルした私の個人プロジェクト「Beautifl - Flash Gallery🌈」でGrid Layoutを採用しました。一般公開されている事例でCSS Grid Layoutを使っているサイトを見かけないので、ベンチマークとして見てもらえたら幸いです。 ※Beautifl - Flash Galleryは2009年に公開したサイト🌏。従来はIE 7対応をベースに構築してましたが、リニューアルでは脱jQuery🌀の方針の
The Command Line for Web Design: Powering Up Front End Code | Envato Tuts+
As a web designer there are three languages you’re pretty much guaranteed to work with one way or another: CSS, HTML and JavaScript. In this tutorial you’re going to leverage the command line to make your development with these three languages more powerful and more efficient. You’ll learn how to use command line to: Compile preprocessor (Stylus, Sass and LESS) code for CSS Autoprefix CSS Compress
» gulp-autoprefixerよりもいい感じ。gulp-pleeeaseを使ってcssを処理しよう | isee ウェブに関するブログ
gulp-autoprefixerよりも高機能なgulp-pleeeaseの紹介。いろいろやってくれるとても良いやつ。gulp-autoprefixerはもう古いかも? css3を使ってスタイルを記述する際にベンダープレフィックスを自動で付けてくれるgulp-autoprefixer。とても便利ですよね。 しかし、gulp-autoprefixerよりも高機能でいい感じなのが、pleeeaseです。pleeeaseはベンダープレフィックスを付けてくれるだけでなく、cssのminifier(圧縮)、mqpacker(メディアクエリをまとめる)、remのpx変換などをいっぺんに処理してくれます。 gulpで簡単に使うことができるので、早速導入してみましょう。 gulpって??という方→GulpでSassのコンパイルとlivereloadをやってみる gulp-pleeeaseのインストール
ベンダープレフィックスを調整してくれるgrunt-autoprefixer ｜ Tips Note by TAM
どうもこんにちは。中川です。 冬ですね。寒いですね。まもなく今年も終わりですが楽しい1年だったでしょうか。 そんな前置きはさておき、今回はgrunt-autoprefixerを紹介したいと思います。 ※今回はgruntが使える状態を前提として書いています。 autoprefixer Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use. Write your CSS rules without vendor prefixes (in fact, forget about them entirely): Can I useを見て、書いたcssのベンダープレフィックスを追加したり、外したりしてくれる便利なもの。 実際、ベンダープレフィックスが必要なのかそうでないのか、なかなか分からないもので
Autoprefixerによる、CSS3の管理 - kojika17
CSS3を使用する時に、ベンダープレフィックスを付けていますか？ 自分でプレフィックスをつけたり、SassなどのCSSメタ言語やツールを利用するなど、さまざまな方法がありますが、せっかく付けたベンダープレフィックスも適切でない場合もあります。適切にベンダープレフィックスを付与するツールに、CSS Postprocessorの「Autoprefixer」というものがあるので紹介します。 ベンダープレフィックスをいつまで付け続けるのか ベンダープレフィックスはブラウザの試験的、または独自拡張で実装されているものであり、W3Cの仕様がある程度固まると、ブラウザはベンダープレフィックスが外すことが推奨されています。 現在、CSS3の一部の仕様は、すでに勧告や勧告候補まで上がっているものがあり、最新のブラウザではベンダープレフィックスなしで作動するCSSも増えてきています。またグラデーションやFle
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SCSSと付き合う上でやって(知って)よかったこと8選 - Qiita
Edit in JSFiddle