Lonely Planet & GitHub: CSSの構成と方針 - ワザノバ | wazanova
http://ianfeather.co.uk/css-at-lonely-planet/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約5時間前 CSS STATSが話題になったからでしょうか、自社のCSSの構成を分析して、記述方針について紹介するポストが続いています。 1) Lonely Planet Lonely Planetは旅行サイトらしく、写真/動画満載の構成です。 Quick Facts Sass Indented Syntax 150+ソースファイル キャッシュを考慮してコンパイルしたCSSは二つのスタイルシートに CSSはページ当たり35kb (gzip) 基本的には、remとpixelでサイズ指定。一部 em あり。 Preprocessor Railsを使っているが、Sprocketsは
Sassでの色管理
Sassでは色を変数として定義でき、また様々な関数でそれを操作することが可能になっている。そのため色を論理的に管理することが可能になっているが、これといった手法が確立されているわけではない。このウェブサイトでは少しややこしい形で管理するようにしている。どういう目的でこういう複雑な構造になっているのかを簡単に書いておきたい。 基本色の定義 基本色、つまりテーマカラーであったり、本文の背景色や文字色といった見た目のイメージを決定する色は、色コードを直接指定して定義する必要がある。これはほぼ間違いなくみんな同じように書いているだろう。 $color-dark: rgb(60, 51, 48); $color-light: rgb(252, 249, 240); $color-accent: rgb(17, 136, 187); これらは背景色であったり文字色、そしてリンクの文字色として使っている
Sharing Data Between Sass and JavaScript with JSON | Viget
Traditionally stylesheets describe the majority of the presentation layer for a website. However as JavaScript becomes necessary to present information in a stylistically consistent way, it becomes troublesome to keep these mediums in sync. Data visualizations and break-point based interaction are prime examples of this; something I bumped into on my most recent project. I should note that this is
Sass 3.2 からは placeholder selector を使おう - nodot
Sass 3.2 からは placeholder selector を使おう この article は CSS Preprocessor Advent Calendar 2012 の25日目のエントリーとして書かれています(あれれ?!)。 ご挨拶 2012年も皆様の願い空しくクリスマスは中止されず、それどころか今年も元気に Santa Tracker がサンタクロースを追いかけ回していたわけですが、CSS メタ言語 lover の皆様におかれましてはいかがお過ごしでしょうか。僕個人は今年の師走は今までにない師走っぷりで、一番ヤバい時は某 b 社にいた20代の頃を思い出す感じでした。いつもだいたい忙しいピークは夏に来るんですが今年は違いましたね。でもひとまず何とか乗り切れました。そう、もちろん Sass があったからです。これがなかったらと思うと恐ろしいですね。2012 年の冬、僕を救ってく
Sassの@eachで同じスタイルをラクチンに管理をする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、はやちです✌(´ʘ‿ʘ｀)✌ この春デザイナーからフロントエンジニアになりました。 新しい部署になり覚えることもたくさんありますが、落ち着いてがんばります( ∵ ) 今回は、繰り返し処理を行える文＠eachを使って繰り返しのスタイルを楽に管理する方法をご紹介致します。 画像を使い分けたい場合 以下のように、背景にアイコンを配置分けする方法をご紹介します( ˘ω˘)☝ HTML HTMLではこのリストを使っていきたいと思います( ˘ω˘)☝ <section id="nav_image"> <h1>画像を使い分ける場合</h1> <ul> <li class="icon_home"><a href="#">HOME</a></li> <li class="icon_about"><a href="#">ABOUT</a></li> <li class="icon_company"
Sass/Compass徹底入門を監修しました - MOL
2014年3月18日に発売される、Sass and Compass in Actionの邦訳版である『Sass&Compass徹底入門 CSSのベストプラクティスを効率よく実現するために』を監修した。 Sass&Compass徹底入門 CSSのベストプラクティスを効率よく実現するために Wynn Netherland, Nathan Weizenbaum, Chris Eppstein, Brandon Mathis, 石本 光司 (株式会社サイバーエージェント) 翔泳社 2014-03-18 Amazonで詳しく見る by G-Tools 監修の依頼を受けて音速でハイと答えたのだけど、監修って何するんだろうねって感じだった。いや、原書の『Sass and Compass in Action』は以前から購入していて、Sass/Compassの開発者であるNathan Weizenbaumや
Sassの変数命名規則とBEM
$type-subtype-component-contextというような形でSassの変数を命名していたけど、これにもBEMを使うかという感じになってきた。ただでさえ長いのが、セパレーターで更に長くなるけど、元々そんなに短くないので気にしないことにした。BEMをクラス名で使うような形で単純に利用するケースと、3.3で導入される予定のマップを使って構造化して定義し、複雑に参照するケースを比較して検証している。 検索ボックスに使う、以下の8つの色の変数定義を例にする。 検索フォーム 背景色 入力フォーム 文字色 背景色 枠線色 フォーカス 枠線色 ボタン 文字色 背景色 オンマウス 枠線色 BEMを使った簡単な実装 $color-bg_searchbox: #f9f9f9; $color-fg_searchbox__input: black; $color-bg_searchbox__inp
Sass 3.3で追加された「関数」や「変更点」のまとめ解説
前二回の記事では、Sass 3.3で追加された「&」の新機能と@at-rootと新しいデータタイプ「マップ」について解説しました。 最後となる今回は、新しく追加された関数やいくつかの変更点を解説します。少し長くなりましたので目次を作りました。気になるところからお読みください。 新しく追加された関数 文字列用の関数 リスト用の関数 call() unique-id() 変数、ミックスイン、関数の存在を調べる関数 inspect() 変更点 リスト関連 @each if() @extend !globalフラグ ※Source Mapについては、丁寧に解説しているブログ記事が既にいくつかありますので、ここでは省略させていただきます。 文字列用の関数 新たに追加された文字列用の関数は6つあります。 str-length($string) str-insert($string, $insert,
Sass初心者から上級者まで超オススメの本！「Web制作者のためのSassの教科書」がいいぜ！！
書籍概要 Webサイト制作に必須のCSSを、より便利に効率的に書けるようにパワーアップさせた「Sass」(サス)についての教科書的な解説書が登場! Sassって聞いたことはあるけど、導入が面倒そうという方 Sassを始めてみたいと思っているが、今一歩踏み出せない方 勉強コストとの天秤に掛けて、Sassのメリットがイマイチ見えてこない方 周りでSassを使い出した人がいて、焦りを感じている方 CSSを今よりも効率的に書きたいと思っている方 これらの方がSassを導入するきっかけとなり、ひと通りSassの機能を使いこなせるようになるのが本書の目標です。 （中略） 本書では、Sassの機能だけでなく、Sassの概要から利用環境の整え方まで 丁寧に解説しています。また、より実践的な内容やCompassなどのフレームワークなど、Sassを使いこなすために必要な内容を網羅しています。 via: Ama
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説
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
hamashun me : 「Web制作者のためのSassの教科書」は、初心者から上級者までお勧めできる一冊
著者の平澤さん、森田さんから献本いただきました！ ありがとうございます！ 本書は、Sassの初心者から上級者までお勧めできる一冊です。以下の状態の人には、特にお勧めできるでしょう。 Sassを使ってみたいけど、いまいち挑戦できない ネストや変数、extend や mixin は使ってるけど、他の機能も気になる Sassは実務である程度使ってるけど、使いこなしの幅を広げたいので、他の人が書いたコードを見たい Sassを使ってみたいけど、いまいち挑戦できない 最初の方を読むと、「これは初心者向けの本かな？」と感じるかもしれません。本書のSass導入解説は、そう思える程に親切丁寧なのです。 どれくらい丁寧かと言うと、インストールだけで 11 ページも使っていたり、スクリーンショットには Win と Mac の両方（フォルダのスクショまで！）が載っていたりする程です。 「Sassを使ってみたいけど
2013年9月13日発売予定の「Web制作者のためのSassの教科書」を執筆しました
インプレスジャパンから、9月13日に「Web制作者のためのSassの教科書」が発売します。 キッカケは、2012年の1月頃に書いていた、Sassを覚えよう！で、それをインプレスジャパンの編集の方が読んで気に入って頂いたらしく「Sassの執筆をしませんか？」というお話を頂きました。 お話を頂いた当時は、「Sassの書籍って売れないんじゃ？本にするほどでは...」って感じであまりノリ気では無かったり、執筆を始めると主業務もこなしつつになるので、忙しくなるなーと思ってお断りしようとかも考えてました。 そう思っては居たけれど、一度打ち合わせをしたら書くこと前提になってた風味で、気付けば執筆をすることに＞＜ 今回、執筆のお話を頂いて書くことが決まってから、1人でやり切れる自信も無かったので、Sou-Lablogとか書いてる、SOUさんを誘って、共著でSassの本を書くことになりました。 書き始めたら
SCSSファイルの組織立て
ファイル間の移動が面倒とか補完が効きやすいからとかいうひどい理由からあまりSCSSファイルを細かく分けてなかった。積極的にplaceholder selector利用するようになったりで見通しが悪くなることが多かったのもあって、もうちょっと組織立ててやった方がいいなとこのウェブサイトのSCSSで色々試してる。変数定義のカテゴリ分けとクラス名の追加・整理、そしてSCSSファイルのパーツ単位での分割まではやった。 色を変更する時は色の変数を格納しているSCSSファイルを編集すれば良い、というような形にするためにバンバン変数を作ってやることにした。そうすることによって設定する基本カラースキームの色は直接CSSプロパティーの値で使わないようになり、論理的な値指定を行えるようにもなる。 クラスの追加・整理は読めないとかよく言われる属性セレクタ使うのやめたのが大きな変更。他にも子要素セレクタとかCSS
パフォーマンスから考えるSass/Compassの導入・運用
- The document discusses the introduction and use of Sass and Compass for a large-scale e-commerce site. - Key aspects covered include using Sass features like nesting, mixins, extends and @import to organize CSS, Compass features like sprite generation and creating a style guide. - The results of adopting Sass/Compass included improved development speed and a 40% increase in site traffic over 4 m
NAVERでのSassの使い方 « NAVER Engineers' Blog
NAVER UITのSass Mixins職人（他称）の上村です。 今日はLess & Sass Advent calendar 2011の21日目です。 3日目に書かれている通り、NAVERでは半年ほど前から実務でSassを使っています。 今回は弊社で使用しているSassのディレクトリ/ファイル構成やMixinsについて解説します。 基本ディレクトリ/ファイル構成 今のところcss/sassディレクトリは下記のような構成を基本としています。 project |~css/ | |-category-A_TRUNK.css | `-category-B_TRUNK.css |~sass/ |~core/ | |-_setting.scss | |-_style-mixin-base.scss | |-_style-mixin-layout.scss | |-_style-mixin-mod
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - twbs/bootstrap-sass: Official Sass port of Bootstrap 2 and 3.
phpsass.com
ちゃんとCSSを書くために - CSS/Sass設計の話
1216彩票-官网平台
GitHub - zakelfassi/jQuery-Mobile-1.3.0-SASS---Compass: jQuery Mobile 1.3.0 SASS / Compass
