Sass（SCSS）入門
本コーナーは、技術評論社発行の書籍『Ruby on Rails 4アプリケーションプログラミング』の中から、特にBuild Insiderの読者に有用だと考えられる項目を編集部が選び、同社の許可を得て転載したものです。 『Ruby on Rails 4アプリケーションプログラミング』の詳細や購入は技術評論社のサイトや目次ページをご覧ください。 前々回～前回は、CoffeeScriptの基礎解説しました。今回は「Sass（SCSS）」の基礎を説明します。 ■ 9.4 Sass（SCSS） Sass（Syntactically Awesome StyleSheets） は、いわゆるCoffeeScriptのCSS版とも言うべき存在で、CSSのコードを生成するための言語です。CoffeeScriptと同じく、Sassのコードもまた、CSSにコンパイルされた上で送出されますので、クライアント環境に
自動検出と自動修正でCSSを保守する - Qiita
CSSの保守に便利なcsscombとscss-lintについて説明します。 scss-lint scss-lintは、SCSSのコードから与えた設定に違反している箇所を報告してくれるツールです。jslintやrubocopのSCSS版のようなものです。これをCI等で定期的に実行しておくことで、ルールに違反したコードの蔓延を防ぎます。 csscomb csscombはNode製のツールで、CSSのコードを与えた設定に従って自動で変換してくれるものです。scss-lintを初めて導入するときに利用すれば、大半の警告を自動で修正してくれるでしょう。但しCSSの文法しか解釈できないため、SCSSに適用すると失敗する場合があります。SCSSで書かれたファイルに対して適用してみたところ、@includeなどの文法は受理されるものの、@ifなどの文法を受理できないようです。しかしながら問題となるケースが
CSSをSASS(SCSS)に書き換えてみて思ったこと - Qiita
はじめに 勉強のためhtml->haml、css->sassをやって見ようと思いまして今自分で作っているサイトを試しに単純な変換をしてみました。という話をメモ代わりに書きます。 ビルドはsublime textでやっています。 事前設定 sassの事前設定ですが、他に更に詳しく説明してくれてるSO NICEな記事がたくさんありますのでここでは割愛します。私は以下を参考にして設定しました。 http://book.scss.jp/about/c7/editor/st.html ※ちなみにこちらの本わたくしkindleで買いました。HTMLを書くデザイナーの方々もわかり易い内容になってるんじゃないかと思います。 ※謎なんですが、私の環境だとpackage installerにcompassがなくて困ってる。でもなんか動いてるけど。 CSSからSASSのコンバートするサイトがあります 単純にcs
Sass（SCSS）は難しくないよ！私なりの使い方をご紹介！ ｜ Tips Note by TAM
Sass（※この記事ではSCSSを指します）やLESSといったCSSプリプロセッサがどんどんメジャー化しています。 しかし、私の実感としてまだまだ使っていない人も多いのではないか？と思っています。 導入が難しそう。書き方がわからない。CSS使えなくなってしまうの？ 色々な疑問や不安があると思います。ですが、Sassはあなたが考えるほど難しくありません！ わたしもSassを使い始めて、まだ半年とちょっとです。そんな私の使い方をご紹介したいと思います。 ※この記事では導入部やコンパイルの紹介はしません。 ※前提 Sassを書けば勝手にCSSをいい感じに書いてくれる！というものではありません。 まだCSSにちょっと自信がない人は、まずはCSSに慣れたほうがいいです。 どんな効率化ツールを使うときでも、根本となる基礎はきちんと理解しましょう。 (1).scssファイル内にCSSを書く まずはここか
CSSコーディングで泣かないためのSassの基礎知識と10の利点
CSSコーディングで泣かないためのSassの基礎知識と10の利点：爆捗！ WordPressテーマ作成ショートカット（3）（1/3 ページ） 本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。今回は、現場におけるCSSコーディングの3つの問題点、Sassの概要と主な10の機能、SASS記法とSCSS記法の違いなどを紹介。 本連載「爆捗！ WordPressテーマ作成ショートカット」では、初回の「Dreamweaverで始めるWordPressサイト構築の基礎知識」で、「Adobe Dreamweaver CC」（以下、Dreamweaver）でWordPressのテーマをカスタマイズできるようにする環境構築や設定を行い、前回の「WordPr
本格的に制作にSassを導入してみたわけだが
Webサイト制作にSassを本格的に導入してみました。単に便利なだけではない色々メリットがあるということに気づいたので、かんたんにまとめてみます。 CSSでは不可能な入れ子構造で書けるのは、思ったより便利 Sassでは、CSSではできない入れ子構造での記述が可能です。たとえば、公式サイトの例ですが… table.hl { margin: 2em 0; td.ln { text-align: right; } } li { font: { family: serif; weight: bold; size: 1.2em; } } このSassファイルをコンパイルしてCSSファイルに変換すると、このようになります。 table.hl { margin: 2em 0; } table.hl td.ln { text-align: right; } li { font-family: serif;
これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応) | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいとです。 全く関係ない話ですが、ポケットモンスター X・Yが発売されたそうですね。「金・銀、ブラック・ホワイトときたら、次はパステルカラー辺りが来るはずや！間違いない！」と思っていた僕の予想はまんまと外れました。まあそれはいいとして、 今回はSassについてちょっと語らせていただきます。Sassというと、「効率、コーディングスピードが超上がるらしい」とか、「LINE株式会社、株式会社DeNAとかも採用してるらしい」という話を聞きます。僕もSassについては勉強しているんですが、当初はわかりにくい部分もありました。 それは「そもそもSassが何なのかよくわからない。プログラミング言語？？」ってことと、「インストールが上手くいかない！コマンドプロンプト使い方わからない！Dreamweaver（以下DW）動かない！GUIソフトってなに！？」ってことです。
SassとCompassを使って楽しくCSSコーディング！ - develo.org
HTML、CSS、Javascript、デザイン、絵を描いたり。
ブラウザ対応で使える | Web制作者のためのSassの教科書 - 公式サポートサイト
一覧に戻る « 前 次 » 第5章 現場で使える実践Sassコーディング 5-2 ブラウザ対応で使える Sassで使えるCSSハックと使えないCSSハック // IE6 用のハック * html #main { background: blue; } #main { _background: blue; } // IE7 用のハック *:first-child + html #main { background: blue; } // IE6, 7 用のハック #main { *background: blue; } // IE7, 8, 9 用のハック #main { background: blue\9; } // IE9 用のハック :root #main { background: blue\9; } // Firefox 用のハック #main, x:-moz-any-link
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TEST CORDING » Sassの@functionの使い方まとめ – プログラマブルな処理は@function