[B! Sass] free_riderのブックマーク

CSS最適化から圧縮までできる「gulp-pleeease」 | ブログ - Blog | 佐藤純平 - Jumpei Sato

はじめに CSSのベンダープレフィックスの付与はいちいちやると面倒ですよね。必要ないのも書いてしまっていたり。。今回はそんな問題を解決してくれる、「gulp-pleeease」の紹介です。 gulp-pleeeaseとはタスクランナーGulpのプラグインのひとつです。 Sassの使用から、CSSのベンダープレフィックスの付与、圧縮、メディアクエリを一つにまとめる等、使えるオプションが豊富なのが魅力です。まずインストール「Node.js」、「Sass」はインストール済みの想定で進めます。ディレクトリで下記のコマンドを入力します。なお、下記のコマンドはMac用です。「package.json」の作成 npm init 「gulp」のインストール sudo npm install --save-dev gulp 「gulp-pleeease」のインストール sudo npm ins

free_rider 2018/02/02

gulp
Sass

リンク

WindowsにCompassをインストールしてSASS/SCSS環境を構築する

SASSはRubyのgem（プログラム）なります。 Macには最初からRubyが入っているのですが、Windowsだと入っていないのでインストールしましょう。インストーラーを使用すると簡単です。下記URLからダンロードしてください。ここでは現時点で最新版の「Ruby 2.0.0-p0」をダウンロードしてみます。 RubyInstaller インストールするときに、環境変数のPATHをチェックしておきます。スタートアップメニューの「アクセサリ」から「コマンドプロンプト」を起動します。 ruby -v と入力して ruby 2.0.0p0 と表示されたらインストール完了です。 Compassのインストール「コマンドプロンプト」から下記のコマンドを順に実行します。 gem update --system gem install compass 下記コマンドでインストールされたか確認し

free_rider 2016/01/06

リンク

カスタマイズ性抜群！Sassに対応したCSSフレームワークがアツイ！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは。デザイナーのはるえです。レスポンシブWebサイトを作成する際に重宝されているCSSフレームワークですが、「自由度が低い」「使わないUIパーツは邪魔になる」「カスタマイズするのに手間がかかる」「結果CSSファイルが肥大化してしまう」など、利用するうえでのデメリットも多々ありました。実際フレームワークって、レスポンシブの大枠ができちゃってるし、コンポーネントが充実してる分あまり作り込む必要がないんで楽っちゃ楽なんですが、テンプレートに束縛されちゃデザイナーとしては面白くないしあまり頼りたくないってのも正直なところ。似たりよったりになるし。。過去にCSSフレームワークの代表的存在「Bootstrap」を利用しましたが、柔軟性の低さに苦しめられたのを覚えています。ですが最近はCompassのようにSassファイルが収められたシンプルでカスタマイズ性の高いCSSフレームワークが増

free_rider 2013/11/20

リンク

box-shadowで表現する、「セミフラット」なズルいデザインテクニック

box-shadowで表現する、「セミフラット」なズルいデザインテクニック：ズルいデザイン（3）（1/2 ページ）世の中、フラットデザイン流行りですが…… iOS 7がフラットデザインを採用したのを皮切りに、Webデザインのトレンドがフラットデザイン一色になってきましたが、立体感を完全に排した色面と空間、シンプルな描画の組み合わせだけのデザイン表現は、ある種ごまかしが効かず、また適切な利用方法を喚起させるようなUIも表現がなかなか難しいものです。例えば、「ボタンは押せるもの」であると表現するための「押したくなる感じ」を喚起させる立体感は、ユーザビリティ面でもまだまだ有効です。今回は、流行のフラットデザインの中でも違和感なく使えて、また適切なアフォーダンスの表現が可能になる、「やりすぎていない立体感」を目指した、box-shadowを活用した各種ボックス表現の作り方を紹介します。 NGな

free_rider 2013/08/22

リンク

「Sublime Text」のみでCompassとSass（Scss）を使えるようセッティングしてみたのでその手順と参考にした記事まとめ

HOME>Web>「Sublime Text」のみでCompassとSass（Scss）を使えるようセッティングしてみたのでその手順と参考にした記事まとめ Compass、Sass（Scss）とは？ Sass（Scss）とは？ Sass（Scss）とは、CSSを記述するために開発されたメタ言語のこと。長くなりがちなコードを短くできたり、関数などを使用してより便利にスタイルシートが書けるという代物です。CSSの管理が非常に楽になります:) Sassには、プログラムのような書き方をする「Sass」と、よりCSSに近い記述が可能な「Scss」とがあるのですが、根本的には変わりありません。（記述方法が違う）ちなみに、私はScssを利用しております。どんなことができるのではちょいと実例をば。ScssではCSSを簡単に書くためのルールがたくさん用意されておりますのでさっくりとご紹介。 [css]