Middleman を使ってブログを作る (心折られずに) - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
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を使って実装したタブとボタン このコンテンツに、下記のデザイン更新を加えてみましょう。 全体の角丸をなくす 青い背景部分を赤い背景にする デザイ
font-sizeの単位をvwにしてデバイスサイズに合わせて拡縮する - Qiita
スマートフォンのフォントサイズは固定でいいのか問題 スマートフォンのコーディングでpxなどの固定値を使うとiPhone6 plusなどの画面幅の広い端末でフォントサイズが小さく違和感を覚えることがないでしょうか。 フォントサイズだけではなくマージンやパディングなどでも同じことが言えるのですが、画像はmax-width: 100%などとしているため画面幅に応じてある程度大きくなるのに対し、フォントサイズなどを固定値でコーディングしてしまうと、画像や画面幅に比べて小さく見えてしまい、余白が目立ったり不自然なレイアウトに見えることがあります。 デザイナーの本来の意図を汲み取るのであれば、画面幅が広くなったときはフォントサイズなどもそれに応じて大きくなるのが一番良いのではないかと思っています。 （追記） ただし、個人的にfont-sizeを拡縮できるようにして思ったのはどんなプロダクトでも推奨でき
SassのビルドもWebpackでHot Module Replacementしたい - Qiita
Rails + モダンJS環境で新規アプリ作成の続きです。 上の記事ではRailsのSprocketsを切って、JSの環境をnpmによせました。となってくると、 Sassのビルドもnpmによせたい！ただ、gulpなどは使いたくない！ ということで、WebpackにSassのビルドも任せて、CSSでもHot Module Replacementをしようとやってみました。以下、CSSのソースは src/css/ に置くこととしています。 前回と、今回で作成したサンプルはこちらです。 https://github.com/ufotsuboi/rails-webpack-sample 注意 今回はCSSは全体に読み込む、JSは一部のみといった、JSとCSSを完全にわけて扱いたいような状況を想定しています。 SPAのようなJSもCSSも全部のページで読み込むといったような状況であれば、webpack
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
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
Sassを使ったz-indexの管理 - Qiita
