[B! sass][Compass] ddt2000のブックマーク

SASS（SCSS）とcompassとPreprosの、初心者にも優しいお付き合い｜ツーブロッカ

今までLessを使って作業をしていた自分ですが、先日の「CSS Nite LP38 「Webデザイン行く年来る年（Shift8）」での1コマ ”そうですね～Sass一択ですね” の言葉が、Lessプレイヤーだった自分の心に妙に刺さりました。一択って…俺は、選択肢にも入っていなかったのか… というわけでSassを仕事中にさらっと勉強してみました。おもに初心者向けかと思います。あと、今回は神GUIコンパイラ「Prepros」、そして「compass」にも少し触れてみます！ご存じない方はこれを期に同時に使えるようになっちゃいましょう！まず、Sass（サス）とは「Sass」は、「Syntactically Awesome StyleSheet」の略であり、端的に訳すと「構文的にスゲェスタイルシート」とのことです。記法には2種類あり「Sass記法」「Scss記法」両方を総称して「Sass

ddt2000 2019/04/25

リンク

Compassのキャッシュ「.sass-cache」の書き出しをコントロールする方法 | Webデザインのタネ

Compassを使っていると、必ずできてしまう.sass-cacheフォルダ。中身を確認すると、なんだか訳の分からない文字列で埋め尽くされていますね。サイトのHTMLごとまるっとファイル転送をすると、このフォルダだけ異様に時間がかかったりしてなんとかしたくなってきます。今日はこのCompassのキャッシュの扱い方を紹介します。キャッシュって何だ？ Sassのキャッシュとは、コンパイルの時間を短くするために作られるファイルです。compass createコマンドで作られるconfig.rbでコンパイルをすると、config.rbのファイルと同じ階層に.sass-cacheという隠しフォルダを作り、その中にキャッシュを格納しています。普段コンパイルの時間が短いから不要じゃと思いがちですが、コードの量が多くなると体感としてコンパイル時間が遅くなってしまいます。対策その1：キャッシュファ

ddt2000 2013/10/11

compass
sass

リンク

Source MapでSass/Compassを簡単にCSSをデバッグする

Source MapでSass/Compassを簡単にCSSをデバッグする Sassはα版が公開されている3.3.0からSource Mapに対応しています。このSource Mapを利用するとCSSのデバッグや開発を簡単にしてくれるのでその方法を紹介します。 Sass/Compassで作成したCSSをGoogle Chromeのインスペクタで確認しようとすると以下のように対応するCSSファイルの行数が表示されます。これでは何行目のScssファイルをいじったらよいかわかりませんが、Source Mapに対応させることで簡単にわかるようになります。これは、「Google ChromeでCSSがSassの何行目に記述されているか確認する方法」のSource Map対応バージョンです。インストールまずはターミナルから以下のコマンドを入力してSass3.3.0のα版をインストールしましょう

ddt2000 2013/08/22

リンク

より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集

より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！目次Sass の基礎知識@mixin の基本的な使い方リンクカラーを一括設定ベンダープレフィックス透明度絶対位置の指定rem を使ったフォントサイズ指定レティナディスプレイ対応画像Compass について軽く。Sass

ddt2000 2013/07/02

リンク

[CSS]さまざまなデザインのボタンを簡単に実装できるSass/Compassのボタンライブラリ -Buttons

最後はオプションで上から、サイズ変更、inputやbuttonなどのフォーム要素、ラッパー付きのボタン Buttonsの使い方使い方は非常に簡単です。 Step 1: 外部ファイル Buttons.zipをButtons- GitHubからダウンロードし、外部ファイルとして記述します。 <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/button.css"> Step 2: HTML あとは、HTMLにボタンのスタイルを使うだけで実装できます。デモのHTMLは、こんな感じです。 <a href="#" class="button button-rounded button-flat-primary">press me</a> <a href="#" clas

ddt2000 2013/06/24

リンク

StartUp Sass + Compass [基本と活用]

1. 第１回 Creators Meetup : StartUp Sass+Compass ∼基本と活用∼ 大竹孔明 Sunday, 24 February 13 2. 大竹孔明こうめコーディングを中心に Twitter : @Bamboo_C Web制作をしています Facebook : komei.otake Sunday, 24 February 13

ddt2000 2013/02/24

リンク

「Compass」、基礎から応用まで！ | 株式会社LIG

こんにちは、デザイナーの王です。今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。全くの初心者でも問題ありません！はじめに結論を言うと、CompassでCSSを書くと早い！見やすい！メンテしやすい！コード量がぐっと減る！一度使い出したら最後、もう元には戻れない！一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとはでは「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh

ddt2000 2013/02/07

リンク

Sass、Compass な僕の Dreamweaver スニペット

CSS Preprocessor Advent Calendar 2012の11日目。エディターは何をお使いでしょうか？ CSS Preprocessor を利用しているイケてる皆さんは Sublime Text 2 や、Coda 2、Vim などを利用しているかと思います。僕は CSS Preprocessor は利用しているのですがそれほどイケてませんので、エディターは未だに Dreamweaver 一本です。というわけで、ドリで Sass や Compass を使う方向けに。ドリに .scss ファイルなんかを認識させる以下のまーしーさんの記事を読むとよいでしょう。僕もこれを読んで設定しました。 ※ちなみ Sass のインストールなんかは Codekit にまかせています。その辺は明日西畑さんが書くと思います。 SassとDreamweaverのコードヒントでCSSをさらに

ddt2000 2012/12/11

リンク

コーディング速度を3倍早くするSass（Scss）のフレームワーク”Compass”が本当に便利｜https://wp.yat-net.com/name

2012年 10月 31日コーディング速度を3倍早くするSass（Scss）のフレームワーク”Compass”が本当に便利カテゴリ： Sass タグ：CodingSassScssコーディング効率化 \ CSSのメタ言語Sass（Scss）。これ使うと凄く便利でコーディングスピードが上がるんですが、これをより便利に使えるようにしたフレームワークのCompassがもの凄く便利なので記事にしました。赤い彗星みたいなタイトルになってますが、使いこなせばかなり早くなります。 1.Compassとは 2.インストール 3.初期設定 4.Sass（Scss）ファイルをCSSファイルに 5.実際に作る 6.参考文献 compassとはオープンソースのCSSオーサリングフレームワークです。Sassがベースになっており、mixinで予めベンダープレフィックスが定義されていたりと、Sassをより便利に使え