Sassを@importから@useに置き換えるための手引き - kojika17
Sassの@importルールは、廃止されることが予定されています。 @useや@forwardといったルールに置き換わるのですが、これらは全く新しいシステムです。 これらの知見が溜まってきたのでご紹介します。 @import と 新しいモジュールシステム Sassの初期の方から実装されていた@importは、テキスト形式でSassファイルを読み込むための機能です。便利な機能ですが、CSSの@importと重複しているため、SassなのかCSSなのか一見してわかりにくい側面がありました。 新しいモジュールシステムは、この問題を解消し、Sassをより柔軟に使用できるようにします。 @importではグローバルに指定されていた変数などは、ファイルごとにカプセル化され、ファイルの内容に基づいて解決できるようになりました。 現在、Dart Sassしか新しいモジュールシステムは使えませんが、Lib
CSS設計・Sassディレクトリ管理の標準化（CROCSS） - Qiita
はじめに HTML+CSSコーディングにおいて、Sass管理ディレクトリを標準化する方法を紹介します。 CSS設計は、サイト種別やプロジェクト規模、分業の有無や人数によっても最適解が異なります。 この仕組みは、様々な設計を同じロジックで受け入れることによって、CSSコードの管理効率を画一的に最大化する狙いのものです。 コーポレート・ポータル・ブログ・EC・LP・管理画面…など、様々な種別のサイトのCSSを、同じ仕組みで設計して管理できるようになります。 前提事項など SassなどのCSSプリプロセッサの使用を前提とします。 本記事の一部は、後で見られるよう別記事として切り出しています。（📝のマークのもの） この記事は標準化ノウハウ公開の一環として書いています。 仕組みの概要や前提事項などについては「UltimateCoding 概要・前提事項」のエントリをご確認ください。 セクション一覧
Sassを使うなら知っておくと便利な色まわりの小技やMixinいろいろ
2017年2月22日 CSS, 色彩 Sassがデフォルトで用意している関数や、それを応用して設定できる小技やMixinをまとめてみました。紹介しているほとんどの小技が、色を一色してすれば他の色も自動生成してくれる…という便利なものです。Sassを勉強中の方はもちろん、ゴリゴリ使いこなしている方も参考にしてみてください！Sassの基本的な情報は、過去記事「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」に書いています ;) ↑私が10年以上利用している会計ソフト！ 目次 透明度の書き方を簡略化 色の明度を調整する 色の彩度を調整する メインカラーの明度や彩度を調整して、リンク色を手軽に設定 背景のグラデーション 文字をグラデーションにする 縞模様の背景 抑えておきたい基本編 1. 透明度の書き方を簡略化 通常色の透明度を指定する時は rgba(0,
Neat - A Lightweight and flexible Sass grid
A lightweight and flexible Sass gridAsk questions on Stack Overflow and file bugs on GitHub.Find feature and API changes in the change log.Follow us on Twitter for announcements. InstallationIf you are using Ruby on Rails, Middleman, or Jekyll, install Neat using RubyGems. Just add the following to your Gemfile. gem "neat"Alternatively, you can install Neat with Bower, Ruby, or NPM. You can also u
Foundation for Sites 6 Docs
Welcome to Foundation 6 We built Foundation for Sites to be the most advanced responsive front-end framework in the world. Installing FoundationThere are a number of ways to install Foundation for Sites. Our installation page will help you find the best option for you. Install Foundation for Sites New to Foundation for Sites?With an easy to understand syntax and consistent structure, you'll learn
Chocolate Framework
Chocolate is an open-source, Swiss (or International) styled, responsive front-end framework built by @rohanlikhite Inspired by the modernist graphic design movement which rose to popularity in the 1950's, this framework was built from the ground up with the twelve-column grid system in mind. This is, quite possibly, the worlds most pretentious front-end css framework. (Eat it Tyler Brûlé). Downlo
Sassquatch
Zero Configuration No servers to start. No browser plugins to install. Heck, you don't even need to have Sass installed. Auto Reload Whenever you save your Sass file, Sassquatch immediately updates the output. It's freaking fast. Editor Agnostic You spent countless hours customizing your editor, and we want you to take advantage of that.
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で変数に16進数の色値を入れるとカラーネームになる件の解決策（案）
先日8日に参加したHTML5 Conferenceのセッション「実践Sass」において、Sassで変数に16進数の色値を入れてコンパイルすると、一部の色値がカラーネームに変換される問題を知りました。 SCSS $color1: #000000; .foo{ color: $color1; } CSS .foo{ color:black; } slideshareにスライド（実践Sass 前編）が上がっています。 16進数の記述とカラーネームが混ざるのはあまり良い気がしないので解決方法を探ってみたところ、Class: Sass::Script::Colorのto_sメソッドを変更することで解決することが分かりました。 ただ、Sass本体を変更するとアップグレードの際や他の作業者との共有が面倒だったりするので、常用しているCompassを利用して解決する方法を考えました（以前紹介したカスタムS
Sass(Scss) Memo: 出力形式 compressed | Culture27
余計な改行や空白は削除されます。 例外として、セレクタの結合子(+ や >)の前後には空白が挿入されます。 最後のプロパティのセミコロン(;)や余分なセミコロンが削除されます。 カラーコードは6桁のまま出力されます。3桁にはなりません。 ただし、Mixinを通したものはどの出力形式でも条件によって出力される値が変わります。 rgbは可能なものはカラーコードに変換されます。 0pxは0にはならず、そのまま0pxで出力されます。 noneは0にならず、そのままnoneで出力されます。 0.5emは.5emにはならず、そのまま0.5emで出力されます。 空の宣言ブロックは出力されません。 CSS/Sassコメント Scss selector-1 { margin: 0; } /* * 複数行CSSコメント * 複数行CSSコメント */ selector-2 { /* 1行CSSコメント */
CSSプリプロセッサやポストプロセッサで出力されたCSSの整形
SassなどのCSSプリプロセッサやAutoprefixerのようなポストプロセッサを利用すると、プロセッサ規定のインデントや改行方法でCSSが整形されます。これについては@myakuraさんがAutoprefixer ― CSSのベンダー接頭辞をいろいろする - fragmentaryの最後で懸念事項として上げられていましたし、僕も2011年の年末にSassで出力するCSSファイルを自社のCSS記述ルールに合わせるヒントで、Sassをカスタマイズして解決する方法を紹介したりもしました。 Autoprefixerのdependenceであるpostcss(Framework for CSS postproccessors)を見ると、Whitespacesという項があり、インデントやスペースを調整できることが解説されています。これを利用すれば、CSS Beautifyのようなことがオフライン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sass Color Generator
イマドキのコーダー環境構築2016
Home
GitHub - dropbox/css-style-guide: Dropbox’s (S)CSS authoring style guide
GitHub - nao215/css-style-guide: A mostly reasonable approach to CSS and Sass.
GitHub - SassDoc/sassdoc: Release the docs!
Concise CSS—Give up the bloat. Stop tripping over your classes. Be Concise.
Adding a random() Function to Sass – CodePen
GitHub - geckotang/cssnite-lp32
