タグ

sassに関するnikuyoshiのブックマーク (4)

  • 汚いcssを整形するWebアプリ「css2scss」でリファクタリングした際、「ヤバい」と感じた3つの機能と3つの点 - Qiita

    汚いcssを整形するWebアプリ「css2scss」でリファクタリングした際、「ヤバい」と感じた3つの機能と3つの点HTMLCSSSassscssCompass あらまし 別の業者が構築したという客先のホームページのcssが非常に読みづらく、 誰も手が付けられてない状態でヤバい(compactの状態で約350行)。 そこでリファクタリングをしようと思った際に、考えた。 「どうせならsass/scss対応にした方が可読性も可用性も上がる!ヤバい!」 sass/scsscss は当たり前として、 css → sass/scss って出来るのかよ、と思い調べてみると、数個発見した。 そのうちの1つ、今回ご紹介する「css2scss」が非常にエレガントだった。 実際に使用して感激して落胆したポイントを、それぞれ3つに絞ってご紹介。 css2scss sass/scssについては、まずはアレな

    汚いcssを整形するWebアプリ「css2scss」でリファクタリングした際、「ヤバい」と感じた3つの機能と3つの点 - Qiita
  • How to structure a Sass project – TheSassWay.com

    One of the most useful features of Sass is being able to separate your stylesheets into separate files. You can then use the @import directive to include the source of your individual files into one master stylesheet. But how should you structure your Sass projects? Is there a standard way of separating out your CSS files? Basic directory structure I like to layout my Sass projects like this: styl

  • CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞

    CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために

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

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

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