タグ

sassに関するhokacchaのブックマーク (29)

  • Twitter Bootstrapの少しだけ便利な使い方 - gnnk

    Less & Sass Advent calendar 2011の11日目です。 Twitterが提供しているTwitter Bootstrapの使い方についてです。 (僕が利用しているのが、SassのためSass Twitter Bootstrapでの説明となります。) CSSのフレームワーク・ライブラリというと、今までにも Brueprint YUI YAML 960 Grid System など、いろいろ存在していましたが、基的に、HTMLにクラスを追加して利用するのが、通常の使い方になります。 Twitter Bootstrapに関しては、Less(Sass)でつくられていることから、同梱のcssファイルをそのまま使うのではなく,scssファイルから、自分でcssファイルを作成することにより、もう少し便利な使い方ができると思います。 (当然、今までのフレームワーク的な使い方

  • watchオプションの使い方 - あと味

    Less & Sass Advent calendar 2011の11日目です。 Sassは自分がコーディング担当の案件は、確実に使っているのですが、まだまだ表面的な使い方しかできてないのかなと、Advent Calendarの他の記事を見ると感じます。 さて、Sassを使ってCSSを書いていく時には、ほぼ例外なく、watchオプションのお世話になることと思います。 弊社のデザイナーのやり方などを見ると、イマイチ理解して使ってない感じもしたりしたので、少し細かく説明する記事があってもいいのかなと思って、この記事を書くことにしました。 知ってる人には当たり前すぎて、得るものがないかもしれませんが、その点はご了承下さい... watchオプションとは? Sassはfilename.sassまたは、filename.scssを使って、Sassの記法、もしくはSCSSの記法で書いたファイルを、コマ

    watchオプションの使い方 - あと味
  • Sass実戦導入への後押し | graphic designer saucer

    Less & Sass Advent calendar 2011の7日目です。 勢いで参加登録をしたのは良いのですが、記事を投稿するBlogをもっていなかったため自作しました。 はい。完全にスタートの仕方を間違いました…おかげで超大変でしたBlog作るのが。 heroku + padrino + postgresql にてかろうじて動いております。 さて、前回までのみなさんの記事で、Sassの概要や導入方法、ベンダープリフィックスを気にすることなく開発が進められる有用性、便利なfunction methodなど、Sass/Lessの良さ感じていただけたかと思いますが、この投稿ではSassの実戦導入に向けて、もうちょっとだけ背中をそっと押せる内容を書いてみようかと思います。 実際、僕もSassを導入するか検討していた時期に心配していた事だったりします。 「Sassって便利なのは解るけど、コン

    hokaccha
    hokaccha 2011/12/07
    おもしろい
  • LESS初心者向けのナニカ - Archiva

    Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い!情報の正確性は自己責任で判断してください。 こんにちは『Less & Sass Advent calendar 2011』4日目。Sig.@sigwygがお送りします。「ハードル下げるよ」と言っていたtacamyが文量ある良記事を上げており、高まるハードルに恐々としている今日この頃。皆さん如何お過ごしでしょうか。まあ僕はマイペースで行きます。久しぶりのBlog記事ですしね!(言い訳) さて、小狡く予防線を張ったところでLESS紹介です。LESSはCSSに変数やら関数やらネストやらを実装します。Sassと同じようなCSS拡張とかメタ言語とか言われるモノです。この辺りの解説はdebiruくんの記事が詳しいので割愛。

  • Sass を今すぐ実務で使おうよ! « NAVER Engineers' Blog

    はじめましての tacamy です。 さて今日は Less & Sass Advent calendar 2011 の 3 日目です。 「Sassかぁ。まーたしかに便利そうだけど、 実務で使えるか分からないし自分には関係ないかな。」 とか思ってませんか・・・!? ぜんぜんそんなことないですよ!( ・`ω・´) その証拠に、NAVER では半年ほど前から、 新規サービスはすべて Sass を使って制作していますが、問題なく使えています。 むしろ効率化できて、CSS を書く工数が減った気もします(個人の感想です)。 小難しいテクニックは、このあとの 22 人が書いてくれると思うので(丸投げ)、 今日の記事では、Sass を実務で使うことに絞って書いてみます。 実務でSassを使うメリットって? 制作の工数が減る CSS3 を使うときのベンダープリフィックスをいちいち自力でつけたり、

    hokaccha
    hokaccha 2011/12/03
    sass & less Adevent Calendar 3日目
  • CSSとフレームワークとメタ言語 | debilog

    Less & Sass Advent calendar 2011 の 2 日目を書きます。ウェブページを作るときのアプローチに触れた後で、アドベントカレンダーのテーマである LESS や Sass が、ウェブページ制作者にとってどのように役に立つものなのかを紹介したいと思います。 あなたが HTMLCSS を書くことになったら HTMLCSS も自分で書く HTML テンプレートスキンを使う CSS フレームワークを使う CSS フレームワークの紹介 メタ CSS 言語 CSS の構成要素 CSS の仕様ではできないこと CSS のメタ言語を使う Sass 3 系の登場 他のメタ CSS 言語 終わりに あなたが HTMLCSS を書くことになったら 個人や団体のウェブサイトを作りたいとき 個人で使っているブログなどの CMS をカスタマイズしたいとき 仕事でウェブアプリ

    hokaccha
    hokaccha 2011/12/02
    less sass Advent Calendar 二日目
  • Sassで行こう!

    Translation of: Getting Started with Sass - A List Apart CSSの持つその簡明さは欠かせない特徴の一つで、それは最も歓迎されている点でした。CSSによるスタイルシートは、セレクターといくつかの適用したいスタイル情報を含むルールを羅列したものに過ぎません。しかし、WebサイトやWebアプリケーションが巨大に、そして複雑になり、様々なデバイスや画面サイズに対応せざるを得なくなった現在、この簡明さという特徴―fontタグやテーブル・レイアウトの淘汰に大いに役にたったもの―が大きな足かせになっています。 簡単な計算機能や変数を追加するなどといったCSSの修正案が過去に提示されましたが、どれもブラウザー・ベンダーには採用されませんでした。仮にこういった新しく素晴らしい拡張されたCSSがあるブラウザーに実装されたとしても、それが実用に耐える程度に

  • CodeKit - THE Mac App for Web Developers

    All the Cool Kids Compile Sass, Less, Stylus, CSS, CoffeeScript, Pug, Slim, Haml, TypeScript, JavaScript, ES6, Markdown, JSON, SVG, PNG, GIF and JPEG right out of the box. Dead-Simple Configuration Want compressed CSS? Just check a box. Need to transpile JavaScript? Check a box. Every tool's options are available in a beautiful, clean UI. No more hacking build scripts. Bleeding-Edge Tools Autopref

  • SASSIENCE ~ 世界が嫉妬するCSSへ

    SASSIENCE ~ 世界が嫉妬するCSS