タグ

関連タグで絞り込む (14)

タグの絞り込みを解除

SCSSに関するfushimikのブックマーク (11)

  • sass-globbingでSassファイルをお手軽管理 - Qiita

    皆さんは、1ヶ月間用コンタクトレンズを2週間用だと勘違いして使ってた経験ありませんか？ぼくは、あります(´Д⊂ヽ さて、今日はSassのファイル構成について考えてみたいと思います。Sassを使えば@importを使ってお手軽にファイルをモジュール管理できますね。ということで、私が作ったCSSフレームワークMapleでも下記のようなファイル構成で管理しています。 t32k/maple ├── css │ ├── maple.css │ └── sass │ ├── maple.scss │ ├── _core.scss │ ├── _modules.scss │ ├── core │ │ ├── _base.scss │ │ ├── _helper.scss │ │ ├── _layout.scss │ │ ├── _reset.scss │ │ └── _settings.scss │ ├

    sass-globbingでSassファイルをお手軽管理 - Qiita

  • WEBデザイナー/コーダーでも15分で導入出来るSCSS+Compass


    下記、画面のように表示されれば、Rubyがインストールされています。 続けて、Rubyのパッケージ管理システムが最新かどうかのチェックを行います。 最新の状態であれば、下記のように表示されます。 最新でなくても、上記コマンドで最新になりますので、Rubyのインストールはひとまず完了です。 SassとCompassのインストールに移りますが、そのままコマンドプロンプトを使用するので、 ウィンドウは閉じずにいてください。 ● SassとCompassインストール そういえば、ここまで何の説明もなく来てしまいましたが、 SassとかSCSSとかComapssって何？という方もいるかと思いますので、 ちょっとだけ説明をします。 Sassはコンパイル(変換)を行うと、普通のCSSになる言語で、 ミックスイン(機能テンプレートのようなもの？)や変数を扱えたりしますが、 CSSとは似て非なるものなので、

  • CSSのみとSass/SCSS、Lessに対応したレイアウト系CSSフレームワークについて調べて表にしてみた | DevelopersIO


    みなさまこんにちわ。 Webサイト高速化やSCSSの連載を書いている野中です。 そういえばGoogle Readerが終了するとのことでとても残念ですね。 読者のみなさまも次の引っ越し先ツール探しで忙しいところだと思います。 そこで、クラスメソッド開発ブログのRSSも忘れずに登録をお願いします。 とても更新頻度の高いブログということもあり、いろいろな切り口のRSSを用意しています。 本題 それでは本題ですが、レイアウト系のCSSフレームワークって色々ありますよね。 個人的にはHTML上のクラスにあまり意味のない文字列は入れたくないので使っていませんでした。HTMLも編集しなければならないので。 ふとSass/SCSSでExtendしたりMixinsで制御できるものであれば無駄なクラス指定を減らして可変でレスポンシブなグリッド制御ができるんじゃないか思って探してみたら色々とありました。 最初
    CSSのみとSass/SCSS、Lessに対応したレイアウト系CSSフレームワークについて調べて表にしてみた | DevelopersIO
    fushimik
    fushimik 2013/03/21
    これは役に立つ記事
    リンク

  • Sass（+ Compass）：Firebug やデベロッパーツールで SCSS の該当行を表示


    Sass︵+ Compass︶‥Firebug やデベロッパーツールでSCSS の該当行を表示 2013.03.04 | この方法お勧めです！ | 制作あるある | 覚えておきたい こんにちはピンクです。確定申告の季節ですね！青色申告の私は毎年この時期、宿題を溜めてしまった夏休み最終日の小学生のようになっています…。 さて、Sass ネタです。 Firefox の Firebug や、Chrome のデベロッパーツールで要素のスタイルを確認すると、どのスタイルシートの何行目に記述があるか分かるようになっています。 上図は Firebug で適当にとったキャプチャです。﹁スタイルシート名.css﹂のn行目に記述があるよー、と書いてありますね。デフォルトではここは .css の何行目か、しか見てくれません。 Sass︵.scss︶で書いて表示確認をして﹁ああ～ここ少し調整したいな…﹂なん
    Sass（+ Compass）：Firebug やデベロッパーツールで SCSS の該当行を表示
    fushimik
    fushimik 2013/03/05
    これは便利
    リンク

  • 【課外授業5日目】「Sublime Text 2とSass&Compassで効率的なコーディングライフ」を開講しました！！ | DevelopersIO


    ︻課外授業5日目︼﹁Sublime Text 2とSass&Compassで効率的なコーディングライフ﹂を開講しました！！ クラスメソッドブログ課外授業5日目 今回は今大人気のSublimeText2とSass&Compassの勉強会でした。弊社のブログでも大変人気なこのシリーズですが、今回も募集30名という枠に対して倍近い応募があり人気の高さが分かりました。1時間目‥ちょっと心地よいHTMLコーディングwith Sublime Text2 1時間目は、清田 隆志によるsublime text 2 のパッケージ︵プラグイン︶についての話でした。発表したスライドは以下になります。 スライドのリンクは以下になります。 https://dev.classmethod.jp/slide/html-coding-with-sublime-text2/ ロレム・イプサムについて熱く語る清田先生。サ
    【課外授業5日目】「Sublime Text 2とSass&Compassで効率的なコーディングライフ」を開講しました！！ | DevelopersIO

  • コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 | DevelopersIO


    コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 はじめに 特に寒い今日この頃ですが読者の皆様は元気にお過ごしでしょうか？2月のリア充イベントといえばバレンタインですね︵企業戦略︶。バレンタイン用のチョコを販売するお店も増えてきました。 弊社は秋葉原という立地ですが意外なことに既婚者が多いので﹁リア充爆発しろ﹂と嘆く男性は少数のようです。 ちなみにビターチョコが好きです。 本題 今回は少し前に執筆した﹁コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編﹂を発展させてSCSS・CompassでRetina Displayに対応する方法を紹介します。 事前に必要な知識 この記事では、以下の事前知識が必要になります。 記事中でも解説を挟みますが、詳しくは解説で案内しているページを参考にしてくださ

  • web製作者向けチートシートまとめ - CHROMA

    List Adobe関連 Illustrator Photoshop Fireworks Indesign Acrobat HTML,CSS HTML 文字実体参照 CSS HTML5+CSS3サポートブラウザ Canvas Haml,Sass Haml Sass Vim,Zencoding Vim Zencoding javascript/jQuery javascript jQuery UNIX 正規表現 検証ツール Firebug Chrome Developer Tool ブラウザ関連 Chrome Safari Firefox IE Mac 参考 アプリ・ツール Adobe関連(CS5-CS6) CS5と6のチートシート上げてるけど、adobe製品なら簡単にエクスポートできると思う。例えばfireworksなら、メニューバーから[Fireworks>ショートカット>現在のセット：

    web製作者向けチートシートまとめ - CHROMA

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


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

  • 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
    fushimik
    fushimik 2013/01/21
    sublime text2 で sassコンパイル
    リンク

  • コーダー必見、SCSS・Compassで開発効率アップ｜SCSS対応IE向けCSSハック編 | DevelopersIO


    はじめにSCSS使っていますか？ とても便利なSCSSですが、大きな疑問があります。 Internet Explorer︵以下IE︶への対応です。 CSS3が少しずつ使えるようになってきている昨今、多くのデメリットがあるにしてもエンドユーザーにIE6利用者が多ければ対応するのが僕たちコーダーです。SCSSだとIEハックがうまく使えないかもしれない！ という疑問を解決するために、確実に使えるハックを試しながら探してみました。 先日書いたこちらの記事も合わせてどうぞ‥ ︻クリスマスだし︼Internet Explorerとうまく付き合う方法︻IE対応まとめ︼︻25日目の6︼ サンプルファイル サンプルファイルはこちらからダウンロードしてください。 https://github.com/nonakaryuichi/scss_css_hacks また、動作確認用のHTMLとCSSも用意したので
    fushimik
    fushimik 2013/01/09
    SCSS対応IE向けCSSハック
    リンク

  • Online StyleSheet Generator | OneClickCSS


    What's this? HTMLソースをもとに、id,class名CSS、子孫セレクタCSS、子セレクタCSS、LESS、SASS、SCSSを自動生成するオンラインサービスです。 従来のHTMLコーディグを強力にサポートします。 What's LESS/SASS/SCSS? LESS / SASS / SCSSはCSSを効率的にコーディングできるCSSメタ言語です。 従来のCSSに比べ子孫セレクタ・子セレクタを簡単に管理することができ、高速にコーディングすることができます。 LESS OFFICIAL SASS/SCSS OFFICIAL 関連サービス 高画質サムネイル生成サービス HTTPクエリデコード SQLフォーマッター Insert文フォーマッター スペースフォーマッター JSONフォーマッター HTML/XMLフォーマッター Emmet toolkit for <textare
    Online StyleSheet Generator | OneClickCSS
    fushimik
    fushimik 2013/01/08
    htmlから、css,scssを生成してくれる。便利！
    リンク
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.