Sassメモ - Qiita今更だけれどSassぐらい知っとこうと思ったのでいろいろと自分用にメモ。 導入とかは省いて構文などのメモです。 SassにはSassとSCSSと言う2種類の記法があるらしいですけど、 ナウなヤングたちはSCSS記法って聞いたのでSCSS記法でメモってます。 基本的なこと 記号いろいろ 記号 意味
Sassの@importでreset.cssやnormalize.cssを読み込む - Qiita
Sass の @import によるインライン展開は .css 拡張子に対応していないので、.css ファイルしか用意されてない HTML5-Reset や normalize.css、sanitize.css などはそのままではインポートできません。 ※.css ファイルを指定すると CSS の @import url(...) になってしまいます。 .scss バージョンを公開している人もいますができれば公式のものを使いたいし、自分でリネームしてリポジトリに置くというのも避けたいところです。 これらの条件をクリアするために、私は Bower でインストールしたあと gulp で .scss にリネームしていたのですが、node-sass-package-importer を使うとそんな手間もいらず簡単にインポートすることができたので紹介します。 インストール node-sass-pac
Sass: Built-In Modules
Only Dart Sass currently supports loading built-in modules with @use. Users of other implementations must call functions using their global names instead. Sass provides many built-in modules which contain useful functions (and the occasional mixin). These modules can be loaded with the @use rule like any user-defined stylesheet, and their functions can be called like any other module member. All b
CSSフレームワークBourbon超速入門 - Qiita
はじめに やあ （´・ω・｀) 今回Bourbon（バーボン）というcssフレームワークを初めて触ってみました。特長やら何やらをざっとまとめてみましたので、興味のある方の参考にでもなれば幸いです。 なお説明はすべてバージョン4.2.4を想定しています（2015/08/31最新） 目次 Bourbon（バーボン）とは Bourbonに依存するフレームワークの紹介 機能の紹介 使い方 Bourbon（バーボン）とは sass用のmixin/functionsをまとめたcssのフレームワークです。基本@includeやfuncName()のように使うので、htmlに依存しません。まぁcompassと同じようなものかと思います。 公式サイト http://bourbon.io/ 特長 軽量でシンプル Neat, Bittersといったcssフレームワークの基になる コンポーネントやモジュールといっ
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
CSSとSassのコーディングスタイルガイドを作ってみた - Qiita
CSS Styleguide CSSにはスコープという概念が存在しないのでコードを指定する順番を管理してカスケーディングを意図した通りにおこなわせる必要があります。また、インデントや命名規則など好みや考え方が異なることも多いです。 スタイルガイドは知識を共有することで認識のズレをできるだけ無くし、制作をする上での約束事を決めることだろうと考えています。以下のガイドラインはCSSとSass（scss記法）を扱う上でベターだと考えていることをドキュメントとしてまとめたものです。 このガイドラインは2015年11月15日公開（2016年1月14日に改定）されたもので、最新のガイドラインはGitHubで公開しています。 css-styleguide | GitHub manabuyasuda はじめに このスタイルガイドはCSSを扱う上でベターだと思われる方法をまとめたものです。必ずしも正しいもの
メディアクエリ用 Mixin - Qiita
目的 Sass でメディアクエリをいちいち書くと長くなるし DRY でなくなるので、 Mixin にして簡潔に書けるようにする。 実装 // Breakpoints $large-screen: 1200px; $medium-screen: 992px; $small-screen: 768px; @mixin respond-to($media-list...) { @if index($media-list, large) { @media screen and (min-width: $large-screen) { @content; } } @if index($media-list, medium) { @media screen and (min-width: $medium-screen) and (max-width: $large-screen - 1) { @con
【Sassを覚えよう！】もくじ的なのと参考リンク
需要が有るのか無いのかも分からず、半分以上は勢いで書いてたSassを覚えようシリーズですが、少しでも利用する人が増えるきっかけになれば幸いです。 カテゴリ一覧から全部見れますけど、一応【Sassを覚えよう！】の全記事一覧です。 【Sassを覚えよう！Vol.1】はじめに 【Sassを覚えよう！Vol.2】何がすごいの？プログラムが出来なくても使える？効率がホントに上がるの？ 【Sassを覚えよう！Vol.3】一番カンタンな環境構築（Scout編） 【Sassを覚えよう！Vol.4】Sassの基本的な記述方法 【Sassを覚えよう！Vol.5】環境構築（黒い画面編） 【Sassを覚えよう！Vol.6】黒い画面での実際の運用に関して 【Sassを覚えよう！Vol.6.5】バッチファイルを使ってカンタンに黒い画面でSassを利用する 【Sassを覚えよう！Vol.7】ファイルを分割して管理を楽に
gulpでsassをコンパイルするタスクを作る - yutaponのブログ
何番煎じかわからないけど、gulpを使ってみたら中々良かったのでまとめてみます。 gulp.jsとは gulp.js はフロントエンド用のタスクランナーってやつです。 同じタスクランナーの競合に Grunt がありますが、後発だけあってストリームを駆使して可読性の良い設定ファイルが書けます。 Gruntでできることは大体gulpでもできるので、どちらを使ったら良いかは好みの問題かも知れません。 この記事ではsassのコンパイルをするタスクと、関連してベンダープレフィックスを自動で付与するところまで紹介します。 gulpのインストール npmコマンドでサクッと入れます。 $ npm install -g gulp これでgulpコマンドが使えるようになりました。 gulpでsassのコンパイルをする gulpでsassをコンパイルするのに、こちらのプラグインを使います。 gulp-ruby-
WindowsでSass環境を構築 - Qiita
Sassでコンパイルできる環境と、生成された CSS をWebブラウザで localhost として参照できるようになるところまで。 サーバサイドのことをよく知らない人用。 scss ファイルはすでにチームメンバーが git にコミットしていて、新たなメンバーが参入し、開発環境を構築する、という状況を想定してます。 インストールするものは3つ。 Ruby Sass Nginx（ApacheでもOK） Ruby をインストール Ruby-1.9 から RubyGems（後述）が標準付属となったため、1.9 以上をインストールする。今回は安定版の Ruby 1.9.3-p392 をダウンロード http://rubyinstaller.org/downloads/ インストーラのオプションが3つあるので、「環境変数のPATHに通す設定」にチェックを入れる。 コマンドプロンプト起動 Window
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
