プログラマーから見た、SCSSの正しい(かもしれない)使いかた - Qiita

2017/09/12 138 users Qiita SCSS プログラマー CSS ところ

SCSSとは SCSSというのは、CSSのアレなところを何とかしようという目的で作成されたメタ言語です。詳細は省略します。 でですね。 ここで大事なのは、こいつは要するにCSS周りの技術ですので、つまるところは基本「デザイナーさんが使う」ものである、というところです。 彼らは概して、非常におおらかで、健康的で、寛容です。私たちサーバーサイドエンジニアのように、細かいことで「こんな仕様は許されんな！... 続きを読む

W3Cスタイルシート仕様の歩き方みたいなもの（メモ） - 水底の血

2015/09/11 60 users 主旨 フレームワーク 水底 筆者 基礎

2015-09-11 W3Cスタイルシート仕様の歩き方みたいなもの（メモ） Back to Basics CSSというイベントが先日行われた。主旨としては、SassやらCompassといったスタイルシートを記述するためのメタ言語なりフレームワークではなく、スタイルシート言語そのものの基礎に立ち返ろう、というものであったらしい。らしい、というのは筆者はこのイベントに参加しておらず、あくまで当日Twi... 続きを読む

昨今のWebアプリケーションのひな形その2 - Grunt - naoyaのはてなダイアリー

2013/05/04 249 users naoya Grunt less teppeis Yeoman

昨日の続き。こういうアプリケーションのテンプレートを管理するのに便利な仕組みはないですかねーと言っていたら @teppeis さんや @omo2009 さんに Grunt や Yeoman はどうかと教えてもらった。Grunt はユースケースとしては JavaScript の連結や圧縮、SCSS/LESS なんかのメタ言語のコンパイルをするもの、つまり rake なんかと同じようなものと以前にチラ... 続きを読む

Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門｜Web Design KOJIKA17

2013/03/14 478 users gzip ビルドツール minify 備忘録 CSS

Webサイトの表示速度を気にすると、CSSやJavaScriptのminify、gzip、CSS Sprite、画像の最適化などの面倒な作業が発生します。 さらにメタ言語などを使用すると、複数のツールを使用しなければならないケースも出てきます。 それらの作業をまとめて自動化してしまう、Grunt.jsが面白かったので備忘録もかねて紹介します。 Grunt.jsとは？ Grunt.jsは、サーバーサ... 続きを読む

初めてSassとCompassを使った際に参考にした記事まとめ｜WEB Drawer

2013/02/13 211 users WEB Drawer Sass Compass 参考 CSS

しばらく前から気になっていたCSSを書く時に便利だという「Sass」と「Compass」を自分のサイトを作る時に使ってみました。 順番に導入の手順を追ってもいいのですが、検索すると多くのサイトが紹介していますので、私が見て参考にしたページをまとめておきたいと思います。 Sassとは まずSassとは何かと言うと、CSSを生成するためのメタ言語で、これを利用することでCSSを早く書けたり、記述が楽に... 続きを読む

Sass と Stylus の比較 CSS Preprocessor Advent Calendar 2012｜Web Design KOJIKA17

2012/12/19 36 users Stylus Sass less CSS 拡張機能

CSS Preprocessor Advent Calendar 2012　19日目の記事です。 CSS Preprocessorは、CSSに拡張機能を持たせるメタ言語と呼ばれるものです。 CSS Preprocessorでよく耳にするものに、SassやLessがあります。 私も以前からSassを使用していましたが、最近Stylusを使い始めたので、SassとStylusの比較を行ってみます。 拡... 続きを読む

コーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。 - YATのBlog

2012/01/12 198 users YAT Sassファイル CSS Sass CSSファイル

Sassの環境構築から実際のコーディングまでを紹介しています。CSSのメタ言語として登場したSass。去年から認知はしていたのですが中々手を出しておらず、年が開けて「やってみよう！」と思い起こして使って見ました。 Index 1.Sassとは 2.インストール 3.SassファイルをCSSファイルに 4.実際に作る 5.参考文献 1.Sassとは Sassがなんなのか知らない人も居ると思うので簡単... 続きを読む

Sass、そしてSassy CSS (SCSS)

2011/02/11 482 users Sass SCSS CSSフレームワーク CSS

CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass(主にSCSS)の良さを解説する。CSSフレームワークSassSassy CSS aka SCSSSCSSでCSSフレームワーク2カラムレイアウトの作成clearfixやReset CSSの組み込みカラム幅の変更カラムの入れ替えSCSSで完結することの意... 続きを読む