Sassの@importルールは、廃止されることが予定されています。 @useや@forwardといったルールに置き換わるのですが、これらは全く新しいシステムです。 これらの知見が溜まってきたのでご紹介します。 @import と 新しいモジュールシステム Sassの初期の方から実装されていた@importは、テキスト形式でSassファイルを読み込むための機能です。便利な機能ですが、CSSの@importと重複しているため、SassなのかCSSなのか一見してわかりにくい側面がありました。 新しいモジュールシステムは、この問題を解消し、Sassをより柔軟に使用できるようにします。 @importではグローバルに指定されていた変数などは、ファイルごとにカプセル化され、ファイルの内容に基づいて解決できるようになりました。 現在、Dart Sassしか新しいモジュールシステムは使えませんが、Lib
CSS in JSに夢を見たが、なかなか一筋縄では行かなかったので1、webpackにおけるCSSと本気で向き合ってみた。 しかしまだ理解が甘いところがあったのでloader, pluginまわりの関係性を整理した。 （前置き）webpackの基礎情報 css関連の本題にはいる前に、webpackの基礎を再確認する。 Webpackの特徴 webpackの特徴的な事項として、CSSや画像など、javascriptでないデータも基本的に全てをjavascriptで扱ってしまう、という事が挙げられる。 同等の対抗として挙げられるbrowserifyやrollupは、あくまでも「javascriptのmodule解決」にフォーカスしているのに対して、webpackは全く違う方向を向いている loaderとpluginの違い 結構あやふやに扱っていたが、上記のwebpackの基本部分を明確にして考
こんにちは。BASE で Design Group に所属している三佐和です。主に ネットショップ作成サービス「BASE」 のフロントエンドを担当しています。 背景 BASE のデザインチームはここ最近で人数が急激に増え、活動が活発になってきており、その中のプロジェクトの一つとして、現在スタイルガイドの刷新に取り組んでいます。 しかし、人数が増えていく一方で、コーディングのルールの統一をコードレビューや個人の裁量に任せていたり、マークアップからリリースするまでに時間がかかってしまうことが問題になってきていました。 そこで、新しいスタイルガイドでは、デザイナーやエンジニアの作業工数を短縮し、より効率よく開発を進めるために、コーディングルールの整備とリグレッションテストを導入することにしました！ やったこと stylelint を使ってコーディングルールを管理 BackstopJS でテストを
こんにちは、クレイの亀井です。もうすっかり秋ですね！コンビニやケーキ屋さんに芋栗南瓜のスイーツがもりだくさんでテンション上がりっぱなしです さて本題に入ります。先日9月30日にクレイ社内で Sass 勉強会を開催し、CSS 設計について発表しました。そのことについて今回はブログに書こうと思います。 開催することになった経緯 数ヶ月前から社員のキャリアアップのため、『クレイ社員補完計画』が開始しました。週に4時間まで自分の好きなことを勉強する時間をとれ、2ヶ月に一度ブログや勉強会などの場で成果を発表します。 私ははじめ別のテーマにしていたのですが、いまいちモチベーションが上がらず、相談した結果 Sass をテーマに勉強会を開催することになりました。 社会人になってから2年半、スライドを制作して発表をするという経験がなかったのですが、いつか外部の勉強会で LT などしてみたいと思っていたためい
この投稿はCSS Architecture Advent Calendar 2014の2日目の記事です。 よりオブジェクト指向なCSSの記述を助ける、YACPというCSSプリプロセッサーを作っています。具体的な、セレクタの命名規則やディレクトリ構成の話ではないです。 Object Oriented CSS 数あるCSSの設計手法のベースとなる、OOCSS (Object Oriented CSS、オブジェクト指向CSS)というものがある。OOCSSはその名の通り、CSSのクラス設計（ルールセットの定義）にオブジェクト指向プログラミングの考え方を少し取り入れたようなものだ。 OOCSSの原則として、「構造と見た目の分離」、「コンテナとコンテンツの分離」というものがある。OOCSSが提唱していることは要するに、HTMLの構造に依存しないセレクタを書き、レイアウトと見た目に関するルールセットは別
このウェブサイトのSassファイル群はずっとフラットなファイル構成でやっていた。主にSassが相対パスの修正を行うことができないことが理由だったけど、最近はポストプロセスすればどうにでも出来そうな感じなので、あまり気にせず整理することにした。単純にカテゴリ分けするだけでも良いのだけど、BEMを応用してやってみている。 CSSのクラス名及び変数やプレースホルダー・クラスにはまだ手を付けず、まずはBEMツリーとルールセットの配置の対応を作るところから始めた。 ファイル名でブロック ディレクトリでブロックのネスト セレクターの1段階のネストでエレメント &を使ったセレクターのネストでモディファイア 以上のようなルール付けの元にやってる(未完成)。 ブロック scss/ ├ _header.scss └ header/ ├ _logo.scss └ _site-navigation.scss ファ
前二回の記事では、Sass 3.3で追加された「&」の新機能と@at-rootと新しいデータタイプ「マップ」について解説しました。 最後となる今回は、新しく追加された関数やいくつかの変更点を解説します。少し長くなりましたので目次を作りました。気になるところからお読みください。 新しく追加された関数 文字列用の関数 リスト用の関数 call() unique-id() 変数、ミックスイン、関数の存在を調べる関数 inspect() 変更点 リスト関連 @each if() @extend !globalフラグ ※Source Mapについては、丁寧に解説しているブログ記事が既にいくつかありますので、ここでは省略させていただきます。 文字列用の関数 新たに追加された文字列用の関数は6つあります。 str-length($string) str-insert($string, $insert,
前回の記事では、Sass 3.3で追加される「&」の新機能と@at-rootについて解説しました。今回は新しいデータタイプの「マップ」について解説します。 マップは色々な使い道があると思いますし、使い方によってはかなり便利なものですので、ライブラリを作っている方などは特に覚えておくと良いと思います。 マップとは マップは任意の名前と値のペアが集まったもので、名前をキーにして値を設定したり、取り出して使います。 マップの書き方ですが、名前と値をコロン（:）で区切り、複数記述する場合はカンマ（,）で区切り、それらを丸括弧（()）で囲みます。CSSのスタイルの書き方とちょっと似ていますね。 // マップ $map: ( key1: value1, // key1にvalue1を設定 key2: value2, key3: value3, ); // CSSのスタイル selector { pro
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説 上村 光星 10月12日にSass 3.3.0.rc.1が出ました。まだリリース候補ですが、どのような機能が追加されるのかはChangelogにあります。今回は「&」と@at-rootについて解説します。 HTML+CSSの命名規則にBEM方法論、もしくはHTML+CSS向けに派生したMindBEMdingを取り入れる方が増えてきているようです（筆者は使っていませんが…）。「&」の新機能と@at-rootは、このBEMのためといっても過言ではありません。 Sass 3.2の「&」 「&」は親セレクタを参照する特別なキーワードとして、Sass 3.3よりも前からありましたが、擬似クラスや擬似要素、セレクタの連結など、用途が限られていました。 // Sass 3.3よりも前の「&」の用途の例 .foo { &:hover
こんにちは、ぺちこです。 先日水族館に行ったら「ペンギン12種模型セット」なるものをショップで発見し、危うく買うところでした。 Suicaペンギンのモデルはおそらくアデリーペンギンですが、私が愛してやまないのはジェンツーペンギンです。どうでもいいですね。（興味をもった人はみんな友達） さて、以前にデザイナーのせいとくんが Sassの導入方法と Sassの基本テクニックについてまとめてくれていましたが、今回はそれらを踏まえて、コーディングに役立つextend＆mixin集を作ってみました！ 日々ちょこちょこと作っては使いまわして・・を繰り返しており、あると便利なものは先にまとめておけば楽ではないかと、やっと気付きました。 サンプルで作ったhtmlとscssファイルを一式ダウンロードできるようにしていますので、そのまま使っても良し、各自（各社）毎のコーディングルールに合せて改良しても良し、要ら
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
SassConfに合わせたのか、Sassの3.3 RC.1が出た。これで3.3での追加機能も固まったようなので、CHANGELOGをちゃんと読んだところ、1か月ほど前に取り込まれていた新しいデータ型であるマップについてもちゃんと入っていた。マップは、いわゆるハッシュとか連想配列とかいう名前で呼ばれるもの。 マップの書き方はリストとほとんど同じで、リストの各要素にコロン(:)区切りでキーと値をワンセットで書く、というようなもの。例として、プロ野球セ・リーグの各チーム色を背景色にしたクラスを吐くもの作ってみる。 $team-colors: ( giants: #f90, tigers: #fc0, carp: #f00, dragons: #009, baystars: #269, swallows: #03c ); @each $team, $color in $team-colors {
CSSをリファクタリングしようと思うと、どっから手をつけたら良いかわからなくないですかね？僕はわかりません。 特にSassのような@importでいろいろファイル分割していると、あれこれなんのファイルだったお（＾ω＾;）ってことがよくありませんかね？僕はないです！ ということで、あなたがCompassプロジェクトを使用しているのならば、config.rbのある場所で下記のコマンドを打ってみましょう。 そうすると下記のようなCSSに関する情報が表示されます。 どこで何回ミックスインが定義されて使用されているか、ファイルサイズがどれくらいかプロパティがどれだけ宣言されているかなど、一目瞭然ですね。これで、どこからリファクタリング・手をつけていったらいいのかなど参考にできるかと思います。 ちなみに、statsコマンドのヘルプは下記 $ compass stats --help Usage: co
Leave a Reply Your email address will not be published. Required fields are marked * Name * Email * Website To create code blocks or other preformatted text, indent by four spaces: This will be displayed in a monospaced font. The first four spaces will be stripped off, but all other whitespace will be preserved. Markdown is turned off in code blocks: [This is not a link](http://example.com) To
Sass(Scss)配列と値の取得の書き方のまとめ Sassの配列の書き方 一番基本的な書き方。 配列名を宣言して、値をコンマでつなぐ。 $array: hoge1, hoge2, hoge3, hoge4; 下記のように、コンマなしで半角スペース空けても同様に配列として扱える。 $array2: hege1 hege2 hege3 hege4 hege5; Sassの配列の値の取得 配列の取得は以下のようにして指定する。尚、数値は0からではなく1から始まる nth(配列名, 数値)； Example nth($array, 1); nth($array2, 2); ↓ hoge1 hege2 Sassの配列の値の長さの取得 length(配列名) Example length($array); length($array2); ↓ 4 5 Sassの配列の位置を取得 index(配列名,
Less & Sass Advent calendar 2011の11日目です。 Sassは自分がコーディング担当の案件は、確実に使っているのですが、まだまだ表面的な使い方しかできてないのかなと、Advent Calendarの他の記事を見ると感じます。 さて、Sassを使ってCSSを書いていく時には、ほぼ例外なく、watchオプションのお世話になることと思います。 弊社のデザイナーのやり方などを見ると、イマイチ理解して使ってない感じもしたりしたので、少し細かく説明する記事があってもいいのかなと思って、この記事を書くことにしました。 知ってる人には当たり前すぎて、得るものがないかもしれませんが、その点はご了承下さい... watchオプションとは？ Sassはfilename.sassまたは、filename.scssを使って、Sassの記法、もしくはSCSSの記法で書いたファイルを、コマ
2013-06-13 libsass and SassC 最近知ったんだけど、Sass を C++ で実装している libsass と SassC っていうプロジェクトがあるんですね。作者はオリジナルの Sass と同じ人？ なんで Ruby じゃなくてわざわざ C++ かというと、sass ファイルが肥大化してきたり、 Compass なんかのフレームワークをゴリゴリ使っているとコンパイルに結構な時間がかかってくる問題があって、まぁ遅いんです。CSS を書くために良い CPU 積んだマシンとか買いたくないですし。そこで libsass 書いてますって話になります。 Sassc and Bourbon: it works. - Damian Le Nouaille 手元に良いサンプルがないのでここに書かれているのを参考にしますが、 I have a project (more than 5
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
