タグ

scssに関するhiro_yのブックマーク (20)

  • Bourbon - A Lightweight Sass Tool Set

    Bourbon is a lightweight Sass tool set Latest version: 7.3.0 Dependency-free: Bourbon is pure Sass. Human-readable: We aim for clarity over brevity. Lightweight: Zero output post-install and has no visual opinion. Get Started

    hiro_y
    hiro_y 2012/03/04
    Sassのmixinのフレームワーク。
  • 【Sassを覚えよう!】もくじ的なのと参考リンク

    需要が有るのか無いのかも分からず、半分以上は勢いで書いてたSassを覚えようシリーズですが、少しでも利用する人が増えるきっかけになれば幸いです。 カテゴリ一覧から全部見れますけど、一応【Sassを覚えよう!】の全記事一覧です。 【Sassを覚えよう!Vol.1】はじめに 【Sassを覚えよう!Vol.2】何がすごいの?プログラムが出来なくても使える?効率がホントに上がるの? 【Sassを覚えよう!Vol.3】一番カンタンな環境構築(Scout編) 【Sassを覚えよう!Vol.4】Sassの基的な記述方法 【Sassを覚えよう!Vol.5】環境構築(黒い画面編) 【Sassを覚えよう!Vol.6】黒い画面での実際の運用に関して 【Sassを覚えよう!Vol.6.5】バッチファイルを使ってカンタンに黒い画面でSassを利用する 【Sassを覚えよう!Vol.7】ファイルを分割して管理を楽に

    【Sassを覚えよう!】もくじ的なのと参考リンク
  • GitHub - hail2u/scss-partials: SCSS partials

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    GitHub - hail2u/scss-partials: SCSS partials
    hiro_y
    hiro_y 2012/02/26
    scssのpartialファイルいろいろ
  • Debugging CSS Media Queries · Johan Brook

    In Responsive Web Design we’re working with different states, widths, and viewport sizes. Fluidity and adaptive behavior is a hot subject nowadays, and it’s perfectly justified when looking at today’s mobile browser landscape. We achieve this with CSS’s Media Queries. But sometimes it can be messy – I’m gonna share a quick tip for indicating (with pure CSS) which media query that has actually kick

    hiro_y
    hiro_y 2012/02/26
    media queryのデバッグ、メッセージを表示させて。
  • Sass の @extend はどこがすごいのか


     Less & Sass Advent calendar 2011 16Sass  @extend   @extend @extend  @extend : // SCSS //  .button { display: inline-block; border: 1px solid gray; background-color: silver; &:hover { border-color: black; }
    Sass の @extend はどこがすごいのか
    hiro_y
    hiro_y 2012/02/26
    scssの@extendについて
  • Sass の @import ルール

    Sass の @import ルール は CSS ファイルだけではなく Sass ファイルもインポートできる。この機能は地味に見えるが、実際に使ってみるとものすごく便利。とくに、ミックスインをモジュールとしてファイルに分割しておき、必要に応じて呼び出すような場面でその便利さを痛感する。 例として、opacity プロパティのクロスブラウザ対応コードのミックスインを考えてみる。まず以下のようなコード片を _opacity.scss というファイル名で用意しておく: // _opacity.scss @mixin opacity($alphavalue) { opacity: $alphavalue; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{ $alphavalue * 100 })"; // for IE

    Sass の @import ルール
    hiro_y
    hiro_y 2012/02/26
    scssの@importについて
  • スマートフォン向けサイト作成時のSass活用法


    稿Less & Sass Advent calendar 20115稿Less & Sass Advent calendar 2011稿 4Advent calendarSass使 CSS Sass使  .scss@mixin bor
    スマートフォン向けサイト作成時のSass活用法
    hiro_y
    hiro_y 2012/02/26
    ベンダープリフィックス
  • http://atnd.org/events/21919

    http://atnd.org/events/21919
    hiro_y
    hiro_y 2012/02/26
    2011年のadvent calendar
  • Sass: Documentation

    Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects. If you’re looking for an introduction to Sass, check out the tutorial. If you want to look up a built-in Sass function,

    hiro_y
    hiro_y 2012/02/26
    リファレンス
  • Sass、そしてSassy CSS (SCSS)


    CSSSassSCSS960.gsCSSSass (SCSS) CSS Sass Sassy CSS aka SCSSSCSSCSS2 clearfixReset CSS  SCSS   CSS 960.gsBlueprintBlueTripCSSIDCSS HTML4
  • hamashun me : Windows PC に Ruby と Sass を導入する方法


    Sugamo.cssCSSSass Sass使CSS Sass Windows PCXPVistaSass Ruby SassRubyRuby RubyInstaller for Windows 使  ruby -v ruby 1.9 1p430(2010-08-16 revision 28998) gem
    hiro_y
    hiro_y 2012/02/26
    導入に
  • SCSSとLESSのどちらを導入するか迷って、SCSSに決めたポイント - 眠る前に布団にはいろうか


    SCSSLESS SCSS SCSSLESS CSS CSSCSS LESS SCSS 使 http://dxd8.com/archives/217/ Sass  SCSSSCSS調Sass 使 SassSCSS SassCSS 
    SCSSとLESSのどちらを導入するか迷って、SCSSに決めたポイント - 眠る前に布団にはいろうか
    hiro_y
    hiro_y 2012/02/21
    「個人的にLESSの導入がネックだった点は、ミックスインと同名のスタイル定義ができてしまうことです。」「複数人で作業していると意図しないスタイルの上書きが起きる可能性もあり」
  • CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞


    CSSSCSS(Sass)LESS SCSS(Sass)SCSS(Sass)  WebWebCSSCSSCSS Blueprint960 Glid SystemCSS CSS
    hiro_y
    hiro_y 2012/02/21
    「既存のCSSを容易に組み込めるのは「LESS」のメリットですが、通常のクラスセレクタによるルールセットとMixin用のルールセットが衝突する可能性があることがデメリットです。」
  • 5509.me

    This domain may be for sale!

    hiro_y
    hiro_y 2012/02/20
    CodeKitの使い方
  • 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

    hiro_y
    hiro_y 2012/02/20
    「CodeKit automatically compiles Less, Sass, Stylus, CoffeeScript, Jade & Haml files. It effortlessly combines, minifies and error-checks Javascript. It supports Compass.」
  • NAVERでのSassの使い方 « NAVER Engineers' Blog


    NAVER UITSass Mixins Less & Sass Advent calendar 2011213NAVERSass使 使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
  • Sass&CompassでPath風のメニューを作ってみた - teppeis blog


    2012/12/31 : 1Sass/Compass PathSass, Compass, CSS3AnimationsChrome, Safari, Firefox, IE10Demo: http://teppeis.github.com/menu-like-path/ Source: https://github.com/teppeis/menu-like-path CSSPathSass&CompassSCSSCSS51SCSS300CSS1550
    Sass&CompassでPath風のメニューを作ってみた - teppeis blog
    hiro_y
    hiro_y 2011/12/29
    Pathのアクションメニューみたいなやつ
  • Sass - チュートリアル

    この文書は古いSassウェブサイトに載っていたチュートリアルの訳で、2013年12月現在もう新しいウェブサイトには存在しません。新しいウェブサイトでのチュートリアルにあたるSassの基の日語訳を参照してください。 Translation of: Sass - Tutorial Ruby と Sass のインストール まず、Sass がちゃんと動作するようにします。OS X を使用しているのなら、既に Ruby がインストールされているでしょう。Windows ユーザーならば RubyWindows インストーラーで、Linux ユーザーならパッケージ・マネージャーでそれぞれ Ruby をインストールすることが出来ます。 Ruby のインストールが完了したら、以下のようにして Sass のインストールを行います: gem install sass 最初の Sass スタイルシート 非

    hiro_y
    hiro_y 2011/12/03
    sassチュートリアル的な
  • Sassで行こう!

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

    hiro_y
    hiro_y 2011/12/03
    sass紹介翻訳
  • Getting Started with Sass

    CSSsimplicity has always been one of its defining, most welcome features. CSS style sheets are just long lists of rules, each consisting of a selector and some styles to apply. But as our websites and applications get bigger and become more complex, and target a wider range of devices and screen sizes, this simplicity—so welcome as we first started to move away from font tags and table-based lay

    Getting Started with Sass
    hiro_y
    hiro_y 2011/11/30
    sass紹介
  • 1