The Blog | Welcome to Adobe BlogThe Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。
PostCSSとcssnextで最新CSS仕様を先取り！
どうも、Kaizen Platform, Inc.の@t32kです。今日はPostCSSについて解説しようと思います。PostCSSについてはそれを解説した同僚のスライドも素晴らしいので、そちらも参考にしてもらえば幸いです。 PostCSS とは何か // Speaker Deck PostCSSとはなにか？ PostCSSは、Autoprefixerの作者でも有名なロシアのAndrey Sitnik氏が開発しているツールです。 postcss/postcss 公式のレポジトリのREADMEには以下のように書かれています。 PostCSS is a tool for transforming styles with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax,
[Sass][Design]remを使ったVertical Rhythm
前回、【Sass/SCSS】Modular Scaleを使ったフォントサイズの指定でModular ScaleをSass/SCSSで使う方法について紹介しました。今回はCSS3のremを使ってVertical Rhythmを実現する方法について紹介します。remは対象ブラウザがIE8以上であることが条件になりますが、IE8自体非対象でも良いでしょう。 Example Vertical Rhythmは以外と簡単です。実際にFunctionを作成して実装してみたサンプルがこちら。GRIDLOVERを参考に作成しました。 Function ベースラインを保持ておく変数（$base-line-height: <line-height>;）と行の高さを返すシンプルなfunction（vr([$lines = 1])）を用意します。functionは$base-line-heightと引数の$line
![[Sass][Design]remを使ったVertical Rhythm](https://cdn-ak-scissors.b.st-hatena.com/image/square/28ce70a4ba19573c729e61a380304d78f3fccffd/height=288;version=1;width=512/http%3A%2F%2Fwhiskers.nukos.kitchen%2Fassets%2Fimages%2Fogp.png)
[SCSS][Gulp]これからはじめるGulp（14）：gulp-cachedプラグインで変更されたSCSSファイルだけを処理させる
はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（13）：gulp-changedプラグインで変更されたファイルだけを処理させるでgulp-changedプラグインを使った画像処理の効率化を試しました。今回はgulp-cachedプラグインを活用しSassタスクの処理を効率化してみます。 gulp-cachedについて gulp-cachedは対象となるファイルをメモリにキャッシュし、変更された分だけを処理させることができます。 gulp-cachedをSassタスクに組み込む gulp-cachedをSassタスクに組み込んでみます。 gulp-cachedのインストール sudo npm install gulp-cached --save-dev Password: gulp-cached@1.0.1 node
gulp-ruby-sass 1.0.0 から記述方法が変わるらしい | BUN:Log
先日、gulp-ruby-sass 1.0.0-alpha にアップデートしたところ、Sass のコンパイルがエラーでコケるようになりました。 半年前に書いたgulp-ruby-sass 0.6 にアップデートしたらコケた話のように、オプションの指定方法が変わったのかな？と思いつつ公式リポジトリを確認したところ、タスク自体の書式が変わるようです。 sindresorhus/gulp-ruby-sass at rw/1.0： https://github.com/sindresorhus/gulp-ruby-sass/tree/rw/1.0 今後 1.0 未満のバージョンはサポートされないようですので、覚えておくとよさそうです。 やったことまず、gulp-ruby-sass 1.0.0-alpha にアップデートします。 $ npm update gulp-ruby-sass自分の場合、個別
gulp-sass から gulp-ruby-sass へ - Qiita
『これからはじめるGulp #9：Ruby版Sassが使えるgulp-ruby-sassへの乗り換え』 こんな記事があったので、gulp-ruby-sass に変更してみる。 そして、gulp-ruby-sass 1.0.0 からタスク自体の書式が変更になったようだ。 旧書式で記述されている記事が多いので注意。 ⇒ gulp-ruby-sass 1.0.0 から記述方法が変わるらしい ⇒ Gulp TypeError: Arguments to path.join must be strings タスクの書式 gulp.src ⇒ sass に変更。 それに伴いオプションの設定書式も変更。 ↓ 旧書式 gulp.task('sass', function() { return gulp.src('scss/*.scss') .pipe(sass({ style: 'expanded' })
[Gulp]これからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する
はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（2）：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみるでgulp-sassを使ってSCSSファイルをCSSにコンパイルするタスクを作成しました。今回はそのタスクをベースにSCSSファイルの変更を監視してタスクを実行するようにします。 watchタスクを作る まず、前回のgulpfile.jsをお復習いです。Sassを実行するだけのsassという名前のタスクが作られています。コメントの部分にwatchタスクを作ります。 var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function(){ gulp.src('./src/scss/*.scs
@extendを使うべき時、@mixinを使うべき時 | POSTD
(編注：2020/08/18、いただいたフィードバックをもとに記事を修正いたしました。) 私がクライアントからよく受ける質問に 「@mixinと@extend、それぞれどのような時に使うべき？」 というものがあります。 “引数を使わない@mixinは悪である”。 これは以前からある経験則です。同じコードを2つのインスタンスで重複させるだけの@mixinは不快でさえあります。しかし、@extendを使うべき時、@mixinを使うべき時、これらを見極めることにはもっと深い意味があるのです。 それでは詳しく考察していくことにしましょう。 私は普段、@extendは決して使わないようにとアドバイスしています。@extendには、一見したところ魅力的な特徴がたくさんあるのですが、注意しなければいけない点はそれ以上にあります。言ってしまえば 見かけ倒し だということです。 それでも@extendを使い
howtohp.com - howtohp リソースおよび情報
This domain is registered at NameSilo. If you are the owner, start administering it at NameSilo.com. If this is not your domain, find similar names that work for you. This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it
Railsのプロジェクトリニューアルの機会にHTML/CSSのコーディング規約を作ってみた - Qiita
はじめに 今回、社内でフロントのまるまるリニューアル(RailsのViewは基本的に全て変更)があるので、CSS設計やディレクトリ構成などをどうするか色々まとめてやってます。 コンポーネント化を意識したり、どういうルールを適用したりするかをまとめていたら結構な量になったので共有しようと思った次第です。 BEMやSMACSS、FLOCSSなどを導入したけどそれだけじゃどうも綺麗にならない、だったりどこのファイルに何を書いていけばいいかいまいち分からない…といった方には参考になるかと思います。独自で作ったものであることと、リニューアルの初期段階でこれから問題がいくつか発生する(すでに発生していくつか改善しています)可能性があることを踏まえてご覧いただければと思います。不明点や気になる点はコメントで聞いていただければ幸いです。 以前、基本的なものは僕が普段使っているCSSのルールをコーディング規
cssnextを使って最新のcss syntaxで開発するのが良さそう
ここ最近CSSを扱うことが多かったので、その際にPostprocessorを検討時にcssnextについてまとめた備忘録。 JavaScriptの最近の事情javascriptではES6でコードを書き、BabelでTransplieするという流れが定着しつつある。 これは、これまで必要だったライブラリが不要になり、コードが依存するライブラリを減らすことができ、altJSに頼らないで開発できるという利点からである。 同じことがCSSでも起きている。まずこれまでCSSを牽引してきたSassについて。 Sassの問題点最近のCSSの開発にはaltCSSとしてSass,Less,StylusなどのPreprocessorが使用されている。 特にSassはJavaScriptで言う所のjQueryに近い存在になり、APIもやや複雑になっている感じがある。 Sassを使っていても実際はそのほんの一部の
Sass/Compass よくあるトラブルと 解決方法・回避方法
14. 調整用CSSを用意する <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"><!-- コンパイル後のCSSは編集禁止 --> <link rel="stylesheet" href="temp.css"><!-- スタイル調整はこちらを編集 --> </head> <body> <!-- 中略 --> </body> </html> コンパイル後のCSSファイルとは別に 調整用のCSSファイルを用意する
GruntでSassのビルドとjsファイルの結合・圧縮を自動化 - bata's log
JSファイルの結合と圧縮を自動化したくて色々調べていたのですが、やはりGruntが一番便利だということで導入してみたました。 結論からいうと、もっと早く導入すればよかった。 Gruntの導入 導入部分は下記を参考に。 Windowsの場合 http://webdrawer.net/javascript/firstgrunt.html Macの場合 http://catcher-in-the-tech.net/461/ Gruntfile.js を記述 module.exports = function(grunt) { grunt.initConfig({ //Sassをビルド sass: { options: { style: 'compressed',//CSSのスタイル sourcemap: true,//ソースマップを書き出す noCache: true//キャッシュファイルを生成
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
Sassでの色管理
Sassでは色を変数として定義でき、また様々な関数でそれを操作することが可能になっている。そのため色を論理的に管理することが可能になっているが、これといった手法が確立されているわけではない。このウェブサイトでは少しややこしい形で管理するようにしている。どういう目的でこういう複雑な構造になっているのかを簡単に書いておきたい。 基本色の定義 基本色、つまりテーマカラーであったり、本文の背景色や文字色といった見た目のイメージを決定する色は、色コードを直接指定して定義する必要がある。これはほぼ間違いなくみんな同じように書いているだろう。 $color-dark: rgb(60, 51, 48); $color-light: rgb(252, 249, 240); $color-accent: rgb(17, 136, 187); これらは背景色であったり文字色、そしてリンクの文字色として使っている
Compassの設定ファイル「config.rb」の編集方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのサリーです。 最近買った漫画は「ウメハラ – To live is to game -」です。 さて、王くんのおかげで Sass + Compass を使えるようになりました。わーい！ 王くんのブラボーな記事はこちら↓ CSSの常識が変わる！「Compass」、基礎から応用まで！ Sassファイルの吐き出したCSSファイルの出力スタイルの設定は「config.rb」を書き換えることで簡単に変更出来ました。 今回はconfig.rbの基本的な編集方法についてまとめてみました。 config.rb のデフォルトの記述 config.rbの中身は何もいじらないとこんな感じになっていると思います。 （Codekitなどで吐き出すとCodekitのデフォルトの設定が入るので、またちょっと違います） # Require any additional compass plugin
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gulp + sass で目指せ倍速コーディング（東区フロントエンド勉強会 2015年 第1回） 本編
Compassのsourcemap出力 - Qiita
1216彩票-官网平台
Ionic Framework - The Cross-Platform App Development Leader
