タグ

_sassに関するkkanaのブックマーク (10)

  • 2時間でSassを習得!Sass初心者向け講習スライド大公開! | WebNAUT by Beeworks

    ※この記事は2014年2月4日に執筆された記事です。現在は仕様が異なる可能性があります。 CSSを効率的に書ける言語として昨今話題のSass。 これから導入をお考えの方に向けて2時間でマスターできる初心者向けのSass講習スライドを公開致します。 普段CSSを書く人も書かない人もSassがどういうものかを知る良い機会ですので、是非ご覧ください。 スライドに沿って実践すればSassの基を短時間でマスターできます! この講習では目で見るよりも実際に触れる事で理解が深まるよう、実習スタイルを取っています。 実習に使うファイルセットはこちらからダウンロードして上記のスライドと合わせてお使いください。 https://webnaut.jp/download/markup_140204/sass.zip(3.5MB) Sassの良さを活かすためには、チーム全員がSassを理解することが大切 Sass

    2時間でSassを習得!Sass初心者向け講習スライド大公開! | WebNAUT by Beeworks
    kkana
    kkana 2014/02/05
  • CSS拡張メタ言語「Sass」の概要と導入手順

    CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

    kkana
    kkana 2013/12/13
  • Sassオレオレリファレンス

    このリファレンスについて 元は社内提出用に書いたレポートです。 レポートは1ページに全内容が入っていてだいぶ見辛いので、リファレンスらしい感じに作りなおしました。 (ついでにかなり加筆修正しています) 内容はSass公式サイトのリファレンスを忠実に翻訳したものではなく、構成などを再編集したオレオレ仕様になっております。 もし内容に間違いなどありましたらご一報お願い致します。 おことわり 筆者が重度のChromerなので古いブラウザには全く媚びない悪びれない仕様です。新しいブラウザで御覧ください。

    kkana
    kkana 2013/12/06
  • Sublime Text 2 で Sass/compass のコンパイルができるパッケージ 『Compass』 « shilog

    この記事は Sublime Text 2 Advent Calendar 2012 とは関係なく書いております。 いや、Sublime Text 2 Advent Calendar 2012 で投稿されていた 一石三鳥!?SublimeText2とsass/SCSS(compass)+SFTPで作業効率化する方法。 という記事を読んで、自分で試したことのメモなので少し関係あるかな。 記事書いてくれた @tomo_thumb さん、ありがとうございます m(_ _ )m ということで、Sublime Text 2 だけで Sass/Compass のコンパイルができるということで、黒い画面でコマンドゴニョゴニョしたり、いちいち Scout 立ち上げたりしなくてもよさそうなので、Sass/Compass の導入の敷居が少し下がりそうな感じですね。以下、Windows 環境での解説。 pack

  • Sublime Text 2でコンパイル編 | クラスメソッド開発ブログ

    はじめに このシリーズ「すぐに使えるSCSS入門シリーズ」ではScoutを使ってコンパイルしてきました。 最近Sublime Text 2のライセンスも買って、格的に使い始めました。 そこで、今回はSublime Text 2(Windows, Mac)を使ってコンパイルする方法を調べたので、まとめて紹介したいと思います。 この記事ではデザイナーに苦手な人が多いかもしれない黒い画面「コマンドプロンプトとターミナル」を利用します。 難しいんじゃないかと思うかもしれませんが、是非挑戦してみてください。そのうち大したことしてないじゃんと思えるようになります。 主な流れ 主な流れはこんな感じで、最初に黒い画面でコマンドを入力していきます。 それが終わればSublime Text 2の設定を行い、コンパイルを試します。 Rybyのインストール インストールの確認とコンソール Sassのインストール

  • scss (sass) + compassがスーパー便利でびっくりしすぎて今さら環境を作ったり。Koalaで。 – 林家次男

    Deprecated: Hook custom_css_loaded is deprecated since version jetpack-13.5! Use WordPress Custom CSS instead. Jetpack no longer supports Custom CSS. Read the WordPress.org documentation to learn how to apply custom styles to your site: https://wordpress.org/documentation/article/styles-overview/#applying-custom-css in /home/ho2/hayashikejinan.com/public_html/wp-includes/functions.php on line 6078

    kkana
    kkana 2013/12/06
  • hamashun me : Windows PC に Ruby と Sass を導入する方法

    Sugamo.cssでちょっと前に話題になったのが、CSSのメタ言語(って言い方でいいのかな)であるSassです。 Sassを使うと、CSSをクールに記述する事ができます。 Sass自体についての解説はググると詳しいものがいくつかあります。 この記事では、Windows PC(XPとVistaで試しました)にSassを導入する手順を紹介します。 Rubyのインストール SassはRubyで動いているので、まずはRubyをインストールします。 RubyInstaller for Windows を使えば、何度かクリックするだけで完了します。 インストールが終了したらコマンドプロンプトを起動して、次のコマンドを入力してエンターをッターンと叩いてください。 ruby -v ruby 1.9 1p430(2010-08-16 revision 28998) みたいのが出たらgemのアップデートに進

    kkana
    kkana 2013/12/06
  • Introduction to Sass and How to Setup with Mac + Coda

    2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか?すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない!」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac+Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト! Sassとは 日語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換(コンパイル)してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する

    Introduction to Sass and How to Setup with Mac + Coda
    kkana
    kkana 2013/10/09
  • Sass: Syntactically Awesome Style Sheets

    Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. CSS Compatible Sass is completely compatible with all versions of CSS. We take this compatibility seriously, so that you can seamlessly use any available CSS libraries. Feature Rich Sass boasts more features and abilities than any other CSS extension language out there. The Sass Core Team has work

    kkana
    kkana 2013/08/30
  • 「Compass」、基礎から応用まで! | 株式会社LIG

    こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません! はじめに結論を言うと、CompassでCSSを書くと 早い! 見やすい! メンテしやすい! コード量がぐっと減る! 一度使い出したら最後、もう元には戻れない! 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず! 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください! Compassとは? Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh

    「Compass」、基礎から応用まで! | 株式会社LIG
  • 1