Windows対応のSassとかのフリーのコンパイラ
気付いたら、三ヶ月更新なし・・・(；´Д｀) 最近は、Sassの勉強をやり直したりなんやかんやと過ごしてたり、ねこブログなんぞ始めたりしてました。 良ければ見てください！＞＜ ねこねこキューブ ～ スコティッシュフォールド『アル＆イブ』の今日この頃。 さて、今回はSassをコンパイルしてくれるGUIツールをちょっとご紹介。 以前、Scoutってのを紹介しましたが、こちらは最近更新がされてないってのも有りまして、Windowsで使い勝手良い他のコンパイラを紹介出来ればと。 Windowsで使えるってのが大事です。ボクはWindowsな人なので。 Koala 一つ目は、Koala と言うコンパイラで、更新頻度も高い感じでRubyさえインストールされていれば、すぐに使えます。 このコンパイラは、次のアップデートでほぼ確実に日本語対応が決定してます。 また、動作もかなり軽い感じで、相当使い勝手が良
今日から使える！ Sass/compass ゆるめ勉強会
Sass/Compass ってよく聞くけど、なんか難しそう…って思っている主にデザイナー/HTMLコーダーさん向けの勉強会で利用したスライドです。勉強会にはハンズオンが組み込まれていたので、この資料には中途半端な部分がありますがご容赦ください。 (*'-'*) 内容的には、基礎的な事柄を、活用のための考え方を添えて解説しています。何かの参考になれば幸いです。Read less
より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集
2017年2月22日 CSS 以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！ ↑私が10年以上利用している会計ソフト！ 目次 Sassの基礎知識 @mixin の基本的な使い方 リンクカラーを一括設定 ベンダープレフィックス 透明度 絶対位置の指定 rem を使ったフォントサイズ指定 レティナディスプレイ対応画像 Compassについて軽く。 Sas
Sassを極める！デザイナーがすぐ実践できる基本テクニック12連発 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 前回、これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応)というSassの基礎に関する記事を書かせていただきました。 そこで今回は、もう一歩つっこんでもっと使いこなせるようになろう！という趣旨のもと、ちょっと使えるようになったからっていい気になっている僕がSassのテクニックやら関数をまとめてご紹介いたします！ たくさんある機能の中から、今回は比較的簡単で実用性の高いものをチョイスしました。 目指せSassマスター！WEBデザイナーもコーダーもすぐに実践したくなるSassの基本テクニック12連発もくじ もくじ テクニック1 アンパサンド（&） テクニック2 演算 テクニック3 round() テクニック4 rgba() テクニック5 コメントアウト テクニック6 変数 テ
[CSS]さまざまなスタイルのツールチップが簡単に実装できるSassでつくられた -Simptip
classを変更するだけで、ツールチップを表示する方向、カラーを変更したり、フェードやスライドのアニメーションで表示したりなど、さまざまなスタイルのツールチップを実装できるSassでつくられたスタイルシートを紹介します。 実装にはSassの知識は必要なく、簡単に利用できます。 左から、角丸、半アロー、スライド、フェードの4種類 これらのスタイルはclassを変更するだけで、簡単に使い分けができます。他にもさまざまなスタイルが用意されています。 Simptipの使い方 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" type="text/css" href="simptip-mini.css" /> </head> Step 2: HTML ツールチップのスタイルはclassで、中身はdata
【開発環境】コーディングを超高速化するためにDreamweaverからSublime text2+Emmetに乗り換えた時のメモ – T2
【開発環境】コーディングを超高速化するためにDreamweaverからSublime text2+Emmetに乗り換えた時のメモ 11月 18, 2012 admin 導入はめちゃくちゃ簡単 下記記事でインストールまで簡単に。 直近だと下の2つ見ておけば大体おｋ Permalink to Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ [Event][SublimeText]第0回 Sublime Text 2 勉強会 で Emmet について話してきた ダウンロード Dev Builds 初期設定等は上記記事にある設定をリスペクトしました笑 Packageのインストール Sublime TextはHTML5等パッケージをインストールする事で使えるようになります。 Dreamweaverではファイルを新規作成時、H
Modular CSS naming conventions – TheSassWay.com
The more you write your own stylesheets, the more you begin to value using good names in your code. Naming is by far one the most difficult and debated activities of a developer. To many, naming is an art form. Rather than making up my own names I sometimes consult a pattern library like Dan Cederholm’s Pears or a front-end framework like Bootstrap to find a good name for a concept. Naming convent
【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる | DevelopersIO
はじめに Webサイトの高速化について調べてみるとCSSの@import url();は使わない方が良いという指摘をよく見かけます。 問題となるのはパラレルロード（複数のリソースを同時にロードする）ができなくなる場合があることと、CSSの読み込み順序が変わってしまうことがあるようです。 実際にどれだけ読み込み速度に問題があるのか、3つの読み込み方で試してみたいと思います。 比較する3つの読み込み方 今回はこの3つで読み込みを比較してみます。 CSSの@import url();で読み込む HTMLのlink要素で別々に読み込む Sassで@importして1つにまとめてlink要素で読み込む 対象ブラウザ 今回の検証ブラウザはChromeとInternet Explorerです。 どちらも備え付けの開発者ツールで検証します。 今回計測したサンプル サンプルはこちらに公開しているので問題があ
Sassのfunctionでオーバーライドさせる
background: url(#{$root}/img.jpg); とすることで、ディレクトリを何回も書かなくてもいい。 というのを、最近見かけたが、インターポレーション付で$rootなんて、いちいち書くの面倒くさい。 「コピペでええやん」という声もありそうだが、それなら変数にせずに、ディレクトリをそのままコピペしてもいいし、あとから変更を加えたいなら、一括置換で問題ないのではないだろうか。 ただ、ディレクトリをコピペするのも面倒くさいので、url()をfunctionでオーバーライドできないか、やってみたところ、できたのでソースを載せておく。 SCSS @function url($imgName) { @return url(dir/#{$imgName}); } .test { background: url("img.jpg"); background: url(img.jpg)
「Web制作者のためのSassの教科書」をいただきました | Webデザインのタネ
下3つはIE7を無視したサイトならとくに@includeを使う必要がないかもしれませんが、自動的にIE用に別途スタイルを書いてくれるのもありがたいですね。 CompassのTypographyモジュールのリファレンス（英語） CompassのUtilitiesモジュールのリファレンス（英語） 英語のリファレンスは画面の左側がメニューになってるになっているので、そっちを見てコードを見ていくと全体感がわかりやすかったです。 Compassのヘルパー（275ページ） Compassのヘルパーはimage-width()とかimage-height()みたいな便利なものもありますが、これ知っておけばもっと省力できた！っていうのがセレクター系のヘルパーです。 headings関数 h1, h2, h3, h4, h5みたいに連続する見出しにスタイルを当てることが多いので、ないかなーと思ってたのですが
SassMeister | The Sass Playground!
SassMeister is a playground for Sass. Add some Sass and SassMeister will show you the rendered CSS.
君は知っているか、あのCompassのstatsコマンドを！ - Qiita
CSSをリファクタリングしようと思うと、どっから手をつけたら良いかわからなくないですかね？僕はわかりません。 特にSassのような@importでいろいろファイル分割していると、あれこれなんのファイルだったお（＾ω＾;）ってことがよくありませんかね？僕はないです！ ということで、あなたがCompassプロジェクトを使用しているのならば、config.rbのある場所で下記のコマンドを打ってみましょう。 そうすると下記のようなCSSに関する情報が表示されます。 どこで何回ミックスインが定義されて使用されているか、ファイルサイズがどれくらいかプロパティがどれだけ宣言されているかなど、一目瞭然ですね。これで、どこからリファクタリング・手をつけていったらいいのかなど参考にできるかと思います。 ちなみに、statsコマンドのヘルプは下記 $ compass stats --help Usage: co
SMACSSを試す - rono23
Railsで小さなwebアプリを作り始めたけど、その際に、SMACSS（スマックス）を試して見ることに。 SMACSSを選んだのは、単にBEMはちょっと見た感じ好きになれなかったり、メリット・デメリットとか調べるのがめんどくさかったからです。 あと、「この手のやつは、サービスを中長期的に運用してみて、初めてその真価がわかるよー」的なことをお世話になっている方々から伺ったのも1つです。 ぐだぐだ言ってないで、さっさ動くもの作って、公開しろ、ハゲチャビン！ 公開しねぇ奴に発言権ねぇから！おめーの席ねぇから！お゛め゛ぇ゛の゛席゛ね゛ぇ゛がら゛あ゛！ SMACSSは、CSSの書き方を5つにカテゴライズしたスタイルガイドみたいなもんです。 SMACSSの5つのカテゴリー base : body, h1, aとか layout : .l-grid、. l-constrainedとかレイアウト関連。クラ
SassとBEM
SCSSファイルを整理し直している時、一気にBEMなクラスを使って書きなおしてやろうかとも考えていた。けど途中でSassならSCSSファイルの分割とその中での工夫によってBEMの構造を表現できそうと感じたので、今はそういう方向で試行錯誤している。実際BEMのウェブサイトでもファイルシステムを使ったBEMの表現方法という似た話が書かれているので荒唐無稽な考えではなさそう。 SCSSファイル名でblockを表現 その中でplaceholder selectorを使ってelementとmodifierを表現 外からはこのplaceholder selectorは使わない 既存のマークアップを利用したセレクターから@extendでBEM構造を関連付け HTMLファイルではBEMなクラスは振らない 必要な場合はシンプルなクラスを振る イメージはこのような感じ。HTMLでのマークアップの簡潔さは維持で
2013年9月13日発売の「Web制作者のためのSassの教科書」を執筆させていただきました。
どうも、ソウラボこと森田壮です。 インプレスジャパンさんから、2013年9月13日発売の 「Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語」 を執筆させていただきました。 CSS HappyLifeの平澤隆さんと共著です。 本書の内容や、見どころを紹介させていただきます。 Amazon以外（楽天ブックスなど）のリンクは本書サポートサイトにのっております！ 本書の内容 はじめに 以下、本書の紹介文です。 Webサイト制作に必須のCSSを、より便利に効率的に書けるようにパワーアップさせた 「Sass」（サス）についての教科書的な解説書が登場！ ・Sassって聞いたことはあるけど、導入が面倒そうという方 ・Sassを始めてみたいと思っているが、今一歩踏み出せない方 ・勉強コストとの天秤に掛けて、Sassのメリットがイマイチ見えてこない方 ・周りでSas
ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン
さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。 今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。 改良のポイントは次の通りです。 文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取った
[Sass(SCSS)+Compass]mixin、変数、CSSスプライトなど便利な記述を大公開！ | Cappee Design
残暑お見舞い申し上げます、@cappeeです。 おひさしブリーフ。 さて、以前「Sublime Text 2 + Sass + Compass + Emmet 最強説！導入方法と自動アップロードの設定まとめ」という記事を書かせていただきました。 実際にサイト制作に導入して四苦八苦しながらどうやったら効率的にスマートなコーディングができるか、2ヶ月いじってやっとこさ納品しました。 そこで今回は、私なりに効率化するために記述したmixin、変数、CSSスプライトなど便利な指定方法を惜しげもなく公開したいと思います。（大げさ） サイトやデザインによって記述すべき指定は異なるかと思いますので、参考にでもしていただけたらなと思います。 最初の記述 文字コード まずはSass(SCSS)ファイルの最初に文字コードを指定します。 @charset "utf-8"; Compass Compassを使う場
Sass/Compassの社内運用に関するありがたいスライドから学んだことのまとめ
これはありがたい！と思えるSass/Compassに関するスライドが2つほどSlideshareにアップされていたので、このブログでも紹介させていただきます。去年行われたHTML5 Conference 2012でNHN Japanのマークアップエンジニアの方から発表されたもので、すでにSassを使ってCSS運用を始めている方からの貴重な情報です。 前編、後編とあるので、それぞれに対して自分なりに重要だと思ったこと、また、それらに対する考察をまとめてみました。自分が管理・運営しているウェブサイトのCSS管理も、Sass/Compassを使ってやりたいなぁと思う今日このごろです。時間的な初期投資は必要だけど、長期的に考えたらメリットも多く時間の節約にもなりそうです。 今回の投稿では、まずは前編から。 前編で気になったところのまとめ 「実践Sass 前編 — HTML5 Conference
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
css2sass
gumbyframework.com
