Sass(67)

67follower
goto_jp さんのアバター 183views

GulpでCompassのビルドとCSSの最適化&圧縮する決定版

前提 現在GulpでSassやLessやCompassを使っている人向け より最適なCSS出力をしたい人向け 下記のディレクトリ構造を仮定 project - scss - css - .csscomb.json - config.... 2016年9月21日
goto_jp さんのアバター 111views

Sassの運用を楽にするには、Sassの機能を使いすぎるな

Sassは便利ですが、いくら便利でもSass機能を無計画に濫用するとSassの運用がキツくなります。フォトショでドロップシャドウを覚えたばかりの人が濫用しまくった後のように、悲惨な結果が待ってます。 ネスト深すぎ&広すぎはやめよう。 .... 2016年2月10日
harada さんのアバター 350views

Gruntで複数ディレクトリのSassを管理する

1つのGruntfile.jsで複数の別ディレクトリのSassを管理したい場合のGruntfile記述メモです。 config.rbファイルはディレクトリ分必要です。 構成例 /gruntfile.js /config.rb /comm... 2015年8月19日
harada さんのアバター 346views

Sassの「@at-root」を利用して上のclass名を参照しながら下のclass名を同じ位置にする

Sassの「@at-root」と「#{&}」を利用することで、記述した上のclass名を参照しつつも、下のclass名を上と同じ位置にするということができます。・・・とてもややこしいですね。 実際の展開例をご紹介します。 @at-... 2015年5月20日
harada さんのアバター 44views

Sassの「&」を利用して親クラスを便利に参照する(3)

#{&}のように記述することで、親クラス名を引っ張ってきて小クラス名をつけることもできます。 .scss ファイル .sample { #{&}Child { background:red; } } ... 2015年5月19日
harada さんのアバター 32views

Sassの「&」を利用して親クラスを便利に参照する(2)

前回はSassファイルで「&」を利用して、親クラスと&以下に記述したクラスを繋ぐ方法をご紹介しました。 今回は、囲っているクラスの上位に新しいクラスを指定して記述する方法をご紹介します。 .scss ファイル .sam... 2015年5月18日
harada さんのアバター 43views

Sassの「&」を利用して親クラスを便利に参照する(1)

Sassのファイルで利用する「&」はこれまで主に下記のように親クラスと繋ぐ役割として利用してきたのですが、親クラスの代わりとして実はもっと様々なことに利用できるようです。 今回は代表的なセレクタの連結として利用する方法を紹介します... 2015年5月15日
Yukimi Sato さんのアバター 25views

Sassで&を使ってCSSの記述をコンパクトにする

input[type="text"]{ border-color: #eee; background: #eee; &:focus{ background: #fff; } } ... 2015年4月24日
harada さんのアバター 15views

Sassの @extendを利用してコンパクトに記述する

@extendを利用するには、利用したいスタイルがどこかのclassにまとめて記述されているという前提条件があります。 引用元class .ex_class { margin: 5px 0; padding: 5px; bo... 2015年4月13日
goto_jp さんのアバター 276views

Compassの落とし穴:グラデーションにsvg出力を行わせない

CompassでCSSグラデーションを描く際は下記のように記述します。 @include background-image(linear-gradient(#fff, #ccc)); これをコンパイルするとCSSには下記のように出力さ... 2015年3月17日
goto_jp さんのアバター 79views

Gruntの基礎おさらい

WebStormをベースに、Gruntを用いてSassを利用していますが、どのようにしてSassまで行き着いているのか改めて仕組みをおさらいします。 GruntでSassを動かすために、プロジェクトフォルダごとに下記3点のファイルが必要に... 2015年1月23日
goto_jp さんのアバター 274views

AipoのCSSコーディング環境(Grunt/Sass/Compass)のおさらい

Grunt/Sass/Compassとは何なのか、どのように設定され動いているのかを社内向けにおさらいの意味で記します。 Gruntとは node.jsで動くタスクランナー(監視自動実行プログラム) できること Sass/Comp... 2014年12月9日
goto_jp さんのアバター 63views

Sass:変数ファイルを作って変数を活用しよう

Sassでは変数を使ってCSSプロパティの共通化を行うことができます。 例えばこんな形。 $fontSize: 14px .class1 { font-size: $fontSize; } .class2 { font... 2014年11月28日
goto_jp さんのアバター 54views

【WebStormでSassを使おう】3:Grunt実行とSassの編集

前回まででGruntのプラグインを入れ設定まで行いました。 Gruntの実行 WebStorm画面下の「Grunt」を開いてください。 もし表示されていない場合はプロジェクトビューからGruntfile.jsを右クリックし「Open G... 2014年11月27日
goto_jp さんのアバター 85views

【WebStormでSassを使おう】2:Gruntプラグインのインストールと設定

前回まででプロジェクトにGruntの基本パッケージをインストールしました。 下記コマンドでGrunt用プラグインをインストールします。 量が多いので多少時間がかかります。 npm install grunt-contrib --save... 2014年11月26日
goto_jp さんのアバター 123views

【WebStormでSassを使おう】1:node.jsとGruntの準備

現状自分のマスト環境になっているWebStormでのSassの利用についてまとめます。 まずはnode.jsとGruntの準備から。 Sassはこれらを使って動くためです。 前提 WebStormインストール済み WebStormで... 2014年11月25日
goto_jp さんのアバター 153views

Sass:ネストのやりすぎ注意

Sassのネスト構造は非常に便利ですが、慣れてくるとつい下記のように長くなることがあります。 .classname { p { } a { } ul { li { ... 2014年10月20日
goto_jp さんのアバター 1,276views

Sass:変数を別ファイルで管理しよう

下記のファイル構成を前提とします。 css └style.css sass ├_variables.scss └style.scss Sassは標準設定ではファイル名冒頭に「_」の付くファイルはコンパイルを行いません。 また、そう... 2014年9月4日
goto_jp さんのアバター 246views

Sass:ネスト構造のおさらい

標準ネスト .class1 { margin: 0; .class2 { margin: 0; } } ▼CSS出力 .class1 { margin: 0; } .class1 .cl... 2014年8月25日
Yukimi Sato さんのアバター 157views

SASSで「!default」を使う

cssは通常後ろに書いた記述がどんどん上書きされていくため、sassを使いまわす際には下手すると膨大な上書きや変更が必要となり、元々の記述がどんなものだったのか、また後々使うときにゴリゴリに上書きしないと打ち消せなかったりします。 そんな時... 2014年8月22日