なぜSassが必要なの？
私は毎年Twitterで「SassなどのCSSプリプロセッサを使用していますか？」というアンケートをとっています。その際、「まだSassを使っていない方がいるのか」と驚く方がいる一方で、「なぜSassが必要なのかわからない」、あるいは「Sassを使ったけど必要性がわからないので使うのをやめた」という返信をいただくことがあります。 私自身、はじめてSassを知った時にはその必要性がよくわからず、すぐに自分の仕事に取り入れることができなかったのでそういう方の気持ちはよくわかります。 そこでこの記事では、私が最初にSassを必要ないと思ったのになぜ今はSassを使用しているのか、なぜ必要だと思ったのかということについてお話ししたいと思います。 Sassとは何か この記事を読んでいる方はすでにご存知の方も多いと思いますが、SassとはCSS拡張メタ言語と呼ばれるCSSを便利に記述するための言語のひ
Source MapでSass/Compassを簡単にCSSをデバッグする
Source MapでSass/Compassを簡単にCSSをデバッグする Sassはα版が公開されている3.3.0からSource Mapに対応しています。このSource Mapを利用するとCSSのデバッグや開発を簡単にしてくれるのでその方法を紹介します。 Sass/Compassで作成したCSSをGoogle Chromeのインスペクタで確認しようとすると以下のように対応するCSSファイルの行数が表示されます。 これでは何行目のScssファイルをいじったらよいかわかりませんが、Source Mapに対応させることで簡単にわかるようになります。 これは、「Google ChromeでCSSがSassの何行目に記述されているか確認する方法」のSource Map対応バージョンです。 インストール まずはターミナルから以下のコマンドを入力してSass3.3.0のα版をインストールしましょう
CSS3: 最新 Bootstrap 対応 iOS メディアクエリのテンプレート | siro:chro
Bootstrap のグリッドシステムを利用し、iOS 各デバイスに対応した SCSS メディアクエリを作成しました。 現時点での最新 iOS デバイスである iPad Pro 10.5 にも対応しています。 スタイルコーディング時のテンプレートとしてご活用ください。 目次 Bootstrap 対応 iOS メディアクエリ(SCSS) まとめ Bootstrap 対応 iOS メディアクエリ (SCSS) 冒頭のコメントに Bootstrap と既存 iOS デバイスのサイズを明記しておきました。 デバイスの向きは Portrait ベースで作成しており、ネストされた orientation のコメントを解除しなければ、単体で CSS としても利用可能です。 [code] @charset “utf-8”; /* Note =================================
メディアクエリの書き方はモジュール（ページ要素）ごとにまとめるのがいい
先日、久々に凝ったレイアウトのレスポンシブ・ウェブサイトのCSSをがっつり書いていて、やっぱりメディアクエリはモジュール（ページ要素）ごとにまとめて書いた方が良いというのを実感しました。ブレイクポイントでまとめて書くとブラウザで確認しながら細かいレイアウトの調整をするのが大変なんですね。 レイアウトの調整が細かければ細かいほど、メディアクエリはモジュールごとにまとめて書くのが良いです。途中で書き直すのは結構大変なので、これからレスポンシブなサイトのコーディングを始める方で迷っている方、お気をつけください。 以上、Rriverからのお知らせでした。笑 手短に言ってしまうと、伝えたいことは以上なんですけど、もう少し説明してみます。 メディアクエリをモジュールごとにまとめた方が良い理由 なぜメディアクエリはモジュールごとにまとめて書いた方が良いのか？ それは、以下の3つが理由です： 丁寧なレスポ
Sassの使い方 – 誰にとっても使いやすいCSSにするための工夫 ｜ Tips Note by TAM
CSS Niteで発表されたコーダー白書2016（19ページを参照）によると、業務でHTMLコーディングをしている人のうち、約70%がSassを日常的に使っているそうです。 CSSプリプロセッサーにはStylusやLESS、もしくはPostCSSのようなツールを使う場合もありますが、上記のアンケートの結果や色々なCSSフレームワークを見ていると、Sassがデファクトスタンダートであることは間違いないようです（Sassは基本的に.scssの記法を想定しています）。 Sassは多機能、でもすべてを使わないといけないわけではない Sassで書かれたコードを見ていると、読みにくいコードや複雑になりすぎているコードをよく見かけます。 SassはCSSにプログラミングの機能を持ち込んでいるので、できることは増えましたが、使い方次第で「書いた人が書いたときにだけ分かるコード」になってしまいがちです。 C
Sassを使うなら知っておくと便利な色まわりの小技やMixinいろいろ
2017年2月22日 CSS, 色彩 Sassがデフォルトで用意している関数や、それを応用して設定できる小技やMixinをまとめてみました。紹介しているほとんどの小技が、色を一色してすれば他の色も自動生成してくれる…という便利なものです。Sassを勉強中の方はもちろん、ゴリゴリ使いこなしている方も参考にしてみてください！Sassの基本的な情報は、過去記事「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」に書いています ;) ↑私が10年以上利用している会計ソフト！ 目次 透明度の書き方を簡略化 色の明度を調整する 色の彩度を調整する メインカラーの明度や彩度を調整して、リンク色を手軽に設定 背景のグラデーション 文字をグラデーションにする 縞模様の背景 抑えておきたい基本編 1. 透明度の書き方を簡略化 通常色の透明度を指定する時は rgba(0,
とほほのSass入門 - とほほのWWW入門
Sass は Less, Stylus, Tass, PCSS などと同様の CSS を拡張したメタ言語のひとつです。 Sass は Syntactically Awesome Stylesheets (構文的にイケてるスタイルシート) の略です。「サス」と読みます。 Haml の設計者でもある Hampton Catlin が設計し、Nathan Weizenbaum が開発しました。 CSS に対して変数、ネスティング、Mixins、インラインインポートなどの機能を強化します。 色や値を操作するための多くの関数が用意されています。 if文や for文などの制御構文をサポートします。 Sass構文や SCSS構文で記述したファイルをコンパイラで CSS構文に変換して使用します。 ファイルサイズ圧縮のため、minify(compress)されたファイルを出力することが可能です。 Less
生まれ変わったDreamweaver CC 2017をいじってみた！Codaから出戻る…かも…
2016年11月7日 便利ツール 数日前Adobeのエディターツール、Dreamweaver CC 2017が新機能とともにリリースされました。過去にDreamweaverからCodaに乗り換えた私ですが、苦楽をともにしてきたCodaさんがどうもアップデートのたびにプラグインがうまく動かないなど、使いづらくなってきて…。そんな時に新生Dreamweaverの情報を耳にしたので、さっそく試してみました。 ↑私が10年以上利用している会計ソフト！ Dreamweaver CC 2017をインストール Adobeのツールはサブスクリプションモデルなので、Creative Cloudに契約する必要があります。Photoshop CCやIllustrator CCなど、多彩なAdobeツールが使い放題のコンプリートプラン（月額4,980円）、Dreamweaverのみ利用できる単体プラン（月額2,1
[書評]現場のプロが本気で教えるHTML/CSSデザイン講義
[書評]現場のプロが本気で教えるHTML/CSSデザイン講義 森本恭平さんが『現場のプロが本気で教えるHTML/CSSデザイン講義』という本を出したらしく、出版社よりいただきました。ありがとうございます。 すこしとがった良い内容なので、この書名で内容を伝えたい人に届くのかどうかがちょっと疑問ですね。 本書にはHTML/CSSの基本的な内容は全く書かれておらず、以下の様な今っぽいマークアップ方法が解説されております。 Gulpをつかった開発 Sassをつかった開発 BEMを使ったCSS設計 コンポーネント化 Flexレイアウト レスポンシブ対応 全体的にSassで書かれているため補足などもSassならではの補足が多く、Sassの実践本といったところでしょうか。 HTML/CSSは書けるけど次のステップに行きたいという人にお勧めの一冊です。 スポンサードリンク to-Rについて JavaScr
![[書評]現場のプロが本気で教えるHTML/CSSデザイン講義](https://cdn-ak-scissors.b.st-hatena.com/image/square/549cc881cb8857bf297bca43212fc53b10f38469/height=288;version=1;width=512/http%3A%2F%2Fblog.webcreativepark.net%2Fimages%2F2016-08-31%252017.03.55.jpg)
Sassの変数とmixinで変更に強いメディアクエリをつくる ｜ Tips Note by TAM
レスポンシブWebデザインではメディアクエリ（media queries）を書くことが多くなります。通常のCSSではブレイクポイントを変更したくなったときに、すでに書いてしまった箇所を直していくのはとても大変です。 Sass（scss記法）を使えば、変数や@mixinを使うことで1箇所で管理することが容易になります。今回はSassでメディアクエリを管理する方法を紹介します。 ブレイクポイントを変数（マップ型）で定義する メディアクエリにはブレイクポイントと呼ばれる処理を変更する横幅を決めます。通常のSassの変数でブレイクポイントを定義した場合は以下のようになります。 $breakpoint-sm: 400px !default; $breakpoint-md: 768px !default; $breakpoint-lg: 1000px !default; 今回は変数は変数でも、マップ型
Dreamweaverで覚える最新Web開発ワークフロー: Sass編 | Adobe Blog
Dreamweaver CC ベータ版で追加された CSSプリプロセッサー CSSプリプロセッサーとは、SassなどのCSSメタ言語（CSSの元になるファイル）からCSSファイルにコンパイル（変換）するプログラムのことです。従来、CSSメタ言語をCSSにコンパイルするには、ターミナルやSassをコンパイルするアプリケーションに頼らならければなりませんでした。 Dreamweaverベータ版では、SassやLessのコンパイルに必要な環境が自動で構築されます。Windowsでは面倒なRubyなどの環境構築もDreamweaverをインストールするだけで整います。CSSメタ言語のコンパイルはファイル保存のタイミングで自動的に行われ、コマンドプロンプトなどを使わずに、CSSが生成されます。 本記事では、Sassを中心にDreamweaverベータ版の関連機能の使い方を取り上げます。 Sass自体
Sass Guidelines
An opinionated styleguide for writing sane, maintainable and scalable Sass. The Sass Guidelines project has been translated into several languages by generous contributors. Open the options panel to switch. About the authorMy name is Kitty Giraudel, I am a French front-end developer, based in Berlin (Germany) since 2015, currently working at Cofenster. I have been writing Sass for several years no
実践Sass 前編
17. Scout • 無償 • Compassも対応 • サイトからDLできるver.ではconfig.rbが読めない • githubの最新版は、config.rbとSass3.2対応 • Sass3.2の対応が遅かった （一昨日ようやくリリース）
CSSとSassのコーディングスタイルガイドを作ってみた - Qiita
CSS Styleguide CSSにはスコープという概念が存在しないのでコードを指定する順番を管理してカスケーディングを意図した通りにおこなわせる必要があります。また、インデントや命名規則など好みや考え方が異なることも多いです。 スタイルガイドは知識を共有することで認識のズレをできるだけ無くし、制作をする上での約束事を決めることだろうと考えています。以下のガイドラインはCSSとSass（scss記法）を扱う上でベターだと考えていることをドキュメントとしてまとめたものです。 このガイドラインは2015年11月15日公開（2016年1月14日に改定）されたもので、最新のガイドラインはGitHubで公開しています。 css-styleguide | GitHub manabuyasuda はじめに このスタイルガイドはCSSを扱う上でベターだと思われる方法をまとめたものです。必ずしも正しいもの
Juice: Mixins for life
An extensive mixin for easily changing styles for specific media queries. You can set the default breakpoints using the breakpoint variables. Available preset values: xxlarge, xlarge-only, xlarge-up, xlarge, large-only, large-up, large, medium-only, medium-up, medium, small-only, small-up, small, xsmall-only, xsmall-up, xsmall, xxsmall, iphone3, iphone3-landscape, iphone3-portrait, iphone4, iphone
Sass/ScssフレームワークBourbon使ってみた - my coredump
要約 BourbonたちはしっかりHTML/CSS書きたいとき向け。 （CSSの習熟度によって感想変わりそうではある） きっかけ 以下の記事をみてSass/ScssのフレームワークであるBourbonとその仲間たちを知った。 CSSフレームワークBourbon/Neat/Bitters/Refillsは美しい CSSフレームワークといえばBootstrap便利でよく使ってるんだけど、記事でも言われているようにクソマークアップ問題は感じている。 そこで代替としてBourbonファミリーはどんなもんか自分でも触ってみた。 色々試した結果 akiyoshi83/ex_bourbon · GitHub Bourbonとその仲間たちの現時点での認識は以下の様な感じ。 Bourbon SCSSのMixin集(like Compass) Neat Bourbonを利用したGridフレームワーク Bitt
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blog - LINE ENGINEERING
実践Sass 後編
Bourbon - A Lightweight Sass Tool Set
GitHub - thoughtbot/neat: A fluid and flexible grid Sass framework
