MacでSCSSを使うための手順（Sass+Compass） - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Sinatra + haml + Sass + CoffeeScript + Backbone.js ON heroku のサンプルコード - Qiita
最近の統合的フレームワークって何？ 日進月歩のこの世界、少し気を許すとすぐに次のトレンドが来てしまう。 そんな中、恐らく現状（2013/11/05）で、 トレンドに近い統合的フレームワークをご紹介します。 まずは、それぞれのライブラリを説明したのちに、 実際の構築方法をおって説明していきます。 ※ ソースはこちら https://github.com/siluejp/sinatra_start heroku いわゆるサーバを貸してくれるとこ。 RubyをメインにしたPaaSです。誰でも無料で始められます。 最近では、有志のおかげで、Ruby以外にも言語が拡張されて色々できるようになってます。 無料版は一定時間使用していないと、起動時に時間が掛かるなどのデメリットもあります。 あと、クレカ登録しないとadd-onが使えない。 でも、コマンドラインだけで手軽にサーバーが追加できるので重宝させて
Rails での適切な Sass の構成手法について（翻訳） - Qiita
Sass のディレクトリ構成やファイル管理の仕方は、プログラムを管理しやすくする上でとても重要だと思いますが、まだまだ日本語での記事はあまり見かけません。 そこで、海外サイトで素晴らしい記事（Q&Aでのコメント）を見つけましたので、御本人の許可をいただいて和訳させていただきました。 Sass ファイル読み込みの際のかなり基本的な部分についての解説ですが、とても丁寧にアドバイスされており、CSS/Sass 初心者にもわかりやすい内容だと思います。 Rails での Sass のコンパイルはどうなっているの？ Stack Overflow で、（質問の概要をざっくりまとめると） 『Rails の stylesheets の読み込み順についてよくわかりません。 思った通りにコンパイルできないのですが、どうしたらエラーを解決できますか。』 という質問が投げられていました。 以下、その質問に対しての
BracketsでSassをライブプレビューする - Qiita
本記事はBrackets Advent Calendar 2014の20日の記事です。 ライブプレビューがとても簡単に行えることが魅力のBracketsですが、実はSassのライブプレビューにも対応しています。 方法は デフォルト機能によるもの エクステンション（brackets-sass）によるもの の2通りあり、それぞれメリット・デメリットがあります。 以下、それぞれの方法でライブプレビューを実行するための解説をしていきます。 ディレクトリツリー |──index.html | |──sass/ ──main.scss | |──_var.scss | |──_module.scss | |──css/（コンパイル前は空フォルダ） デフォルトの機能 メリット 必要なのはSassの実行環境のみ Compassにも対応 デメリット 反映されるのがファイル保存時のコンパイル後で、
黄金比レイアウトが簡単にできる modular-scale まとめ - Qiita
はじめに Webデザインに簡単に取り入れられる Tips として、黄金比などを使った美しいレイアウトが簡単にできる modular-scale という Sass extension を紹介したいと思います。 実際どのようなレイアウトを実装できるか、modular-scale 作者の Tim Brown が紹介しています。デモページはこちら↓です。 Example Page modular-scale とは ベースとなるサイズ（ size ）と比率（ ratio ）を指定することで、 デザインを組むときの指標となる、サイズのスケールを生成してくれるツールのことです。 modularscale.com こちらの↑本家サイトで、自分で設定を変えて、様々な美しいスケールを作成できます。 例えば、ベースサイズを [16px] に設定します。 そして、比率は [1:1.618 - golden sec
全容をざっくり理解するために、Sass+Compassの覚え書き - Qiita
人もすなるSassというものを猿もしてみむとてするなり。 デザイナーでござる、などと言っているならいつまでも「会社ではチョットー」「環境ガー」と言い訳をして無視するのも難しくなってきたCSSメタ言語。 えー今それ？ という感じで恐縮ですが、ドットインストールや各種ブログを渡り歩けば書いてある内容を自分用にマージしてみました。すでにご存じの方には目新しい内容はないかと。 文章も数値も引用ばかりでほとんど自分の言葉では書いてないですけど、特にWebクリエイターボックスさん、ありがとうございます。 間違っている点があれば指摘していただけると幸い。あと無駄に長いです。 0. 環境 Mac OS X 10.8.5 Sublime Text 3 Sass 3.3.10 Compass 0.12.6 1. 概要 Sass + Compass を使って、効率良く css をコーディングしよう！ Sass
ChromeのDeveloper ToolsでSassのデバッグ - Qiita
ChromeのDeveloper Toolsでスタイルシートのデバッグをするときに、コンパイル後のCSSファイルでなくSassのファイルの場所を表示するようにする。 CSSソースマップを使うわけだが、古い情報が多かったので今さらながらメモ。Compassを使用している想定。 環境 OSX 10.9.5 Google Chrome 42 Sass 3.4.13 Compass 1.0.3 sourcemapの生成 Sassのコンパイル時にsourcemapを生成させる。 config.rbにsourcemap = trueを追加するだけ。 sass_options = {:sourcemap => true}とかsass_options = {:debug_info => true}は不要。 環境設定によって振り分けて、以下のように編集する。
CSSのメタ言語Sass(SCSS)、LESSの完全入門 - Qiita
はじめに これまで、CSSは素でstyle.cssのようなファイルにスタイルを書く方法が主流でした(私も最近までこちらでした)。 ですが、CSSだけで書いていると、どうも拡張性や保守性に欠けたりしてしまいます。 仕事だとあるあるだと思いますが、同じようなスタイルをひたすらコピペで違うクラスやIDを使っていたり、どうしても一部だけ違うデザインを適用させたくなってcolor: red;!important;とか使って設計が崩壊していったりと、開発する上でCSSだけで書いているとルールを作るのも大変だし、チームで苦労することになります。 そこで、最近ではメタ言語と呼ばれる、CSSをよりプログラミングに近い形で書ける言語が出てきました。 これらのメタ言語とは、よりCSSを抽象的に書くことができて、プロセッサと呼ばれるものを使ってCSSを生成します。 つまり、もっと直感的にCSSを書けるってことです
Sassで@mixinを作る時に知っておきたい基礎知識 - Qiita
はじめに Sassの**@mixin**はメンテナブルなCSS設計にも役立つ強力な機能です。 一方でゆるくも書けてしまうため、気をつけないと不格好なCSSが簡単に出力されてしまいます。 そこで@mixinを自作するにあたって、知っておきたい（おきたかった）基本知識をまとめました。何かの参考にでもなれば幸いです。 前提条件 ソースコードは**.scss**形式で記述しています Sass 3.4.4で動作を確認しています 使用しているModifierという単語は以下の通りです BEMと呼ばれる命名規則で使われる、基本的なスタイル（セレクタ・class）に追加する形で装飾を調整するclassのこと 目次 @mixinのおさらい 基本的な使い方 @contentの使い方 Modifierに無駄なスタイルを適用させたくない... @contentを使ってみる 制御用の引数を用意してみる 引数に配列（
gulp-sass, gulp-plumberを使うときの注意 - Qiita
gulp, gulp-sassでSassのコンパイルをwatchしようとしたら、アレ？ってなったのでメモ。 .scssファイルでコンパイルエラーとなるような内容を書くと、watchのプロセス毎落ちてしまうので、gulp-plumberで防御しようとした。 .pipe(plumber()) の書き方だと一度エラーとなったあと、二度とコンパイルを行わないゾンビプロセスになってしまうという問題にぶち当たった。 以下のようにgulpfileを書いたところ解決。 'use strict'; var gulp = require('gulp'), sass = require('gulp-sass'), plumber = require('gulp-plumber') ; gulp.task('compile:sass', () => { return gulp.src('src/**/*.scss
webpackを使ってsassをコンパイルできるようにしよう！ - Qiita
const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = [{ entry: { bundle: './src/app.js' }, output: { path: path.join(__dirname, 'public'), filename: '[name].js' }, module: { loaders: [ { loader: 'babel', exclude: /node_modules/, test: /\.js[x]?$/, query: { cacheDirectory: true, presets: ['react', 'es2015'] } } ] } }, { entry: { style: './
Bootstrap 4を使うならSassを使って3倍幸せになろう - Qiita
Bootstrap 4のデザインを編集するにはCSSの更新が必要ですが、CSSだけを使うよりもBootstrap 4で導入されたSassを使う方が効率的にかつ細かくデザインをカスタマイズできます。本エントリーでは、Sassを使った効率的なデザインカスタマイズ方法を紹介します。 Bootstrap 4のデザインのカスタマイズ方法 Bootstrap 4のコンポーネント機能を用い、タブとボタンを実装したコンテンツを例にとって説明します。デモはjsdo.itにアップしています。 なお、基本的なBootstrap 4の導入方法については記事「5分で導入できるBootstrap 4 超入門 〜タブを作ってみよう〜」を参照ください。 ▲ Bootstrap 4を使って実装したタブとボタン このコンテンツに、下記のデザイン更新を加えてみましょう。 全体の角丸をなくす 青い背景部分を赤い背景にする デザイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Middleman を使ってブログを作る (心折られずに) - Qiita
Sass(SCSS)のmixin, extendなどまとめ - Qiita
Use Bootstrap-Sass 3.x and Font Awesome (bower-rails vs. rails-assets) - Qiita
全部はいらないよね？bootstrap-sassをカスタマイズして使う方法 - Qiita
gulp-sass から gulp-ruby-sass へ - Qiita
gulp-sass で sourcemap を使う - Qiita
BEMでmodifierを作る時に便利な&の変数化パターン - Qiita
Sassメモ - Qiita
