Sass(SCSS)のmixin, extendなどまとめ - 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を書けるってことです
一人PostCSS - Qiita Advent Calendar 2016 - Qiita
About reserved postingIf you register a secret article by the day before the same day, it will be automatically published around 7:00 on the same day. About posting periodOnly articles submitted after the opening date of the year can be registered. (Secret articles can be registered anytime articles are posted.)
PostCSSのやっていきはじめ - Qiita
このAdvent Calendarについて 一人React.js Advent Calendar 2014 のマネをして、PostCSSについてAdvent Calendar形式で説明していきます。「PostCSSとは何か」や、実行の方法のような基本的なところから、PostCSSプラグインの紹介、PostCSSのAPIを使ってプラグインやツールの作り方 といったところまで書いていこうと思います。 僕はPostCSSを開発当初から追いかけていて、自分でいくつかプラグインやツールを作ったり、WEB+DB PRESS に寄稿したり、勉強会などで発表したりしています。このAdvent Calendarの大まかな流れは、東京Node学園祭2016 での発表と同じで、基本的な使い方とPostCSSのプラグインとAPIを追加したものとなります。 「PostCSS: Build your own CSS
Sassで@mixinを作る時に知っておきたい基礎知識 - Qiita
はじめに Sassの**@mixin**はメンテナブルなCSS設計にも役立つ強力な機能です。 一方でゆるくも書けてしまうため、気をつけないと不格好なCSSが簡単に出力されてしまいます。 そこで@mixinを自作するにあたって、知っておきたい（おきたかった）基本知識をまとめました。何かの参考にでもなれば幸いです。 前提条件 ソースコードは**.scss**形式で記述しています Sass 3.4.4で動作を確認しています 使用しているModifierという単語は以下の通りです BEMと呼ばれる命名規則で使われる、基本的なスタイル（セレクタ・class）に追加する形で装飾を調整するclassのこと 目次 @mixinのおさらい 基本的な使い方 @contentの使い方 Modifierに無駄なスタイルを適用させたくない... @contentを使ってみる 制御用の引数を用意してみる 引数に配列（
PostCSSの仕組み - Qiita
$ node parse.js Root { raws: { semicolon: false, after: '\n' }, type: 'root', nodes: [ Rule { raws: { before: '', between: ' ', semicolon: true, after: '\n' }, type: 'rule', nodes: [ Declaration { raws: { before: '\n ', between: ': ' }, type: 'decl', parent: [Circular], source: { start: { line: 2, column: 3 }, input: Input { css: '.qiita {\n color: #fff;\n background-color: #4ea30a;\n}\n', id: '<i
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
PostCSSのASTを操作する - Qiita
PostCSSには2日目で説明した、ASTを簡単に操作するためのAPIが用意されています。ASTはJavaScriptのオブジェクトなので、JavaScriptの構文で直接変換させることもできますが、より便利に、そして効率の良い処理をするためにも提供されているAPIを使います。 また、PostCSSの全てのAPIはAPIドキュメントで確認することができます。 ノードの種類 まずはASTのノードの種類です。PostCSSのASTのノードは以下の5つです。 Rootノード: ASTの1番上のノード（Rootノードは親ノードがない） Ruleノード: 1つのルールセット AtRuleノード: 1つの@ルール Declarationノード: 1プロパティ宣言 Comment: 1つのコメント これらは実装的には PostCSSの Node クラスを継承したもので、Node.type を参照すること
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ページを開く
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
