Sass 3.2 になってからの新機能らしい。
簡単に言うと css ファイルに書きだされない extend って感じ。
書き方は下記。
valiables は『$』だけど、placeholder は『%』を頭につける。
%redtext-redbackground{
background: #f00;
module.exports = function(grunt) { | |
grunt.initConfig({ | |
sass: { | |
dist: { | |
files: { | |
'css/style.css': // コンパイル後のフォルダとファイル | |
[ | |
'_scss/*.scss' // 元ファイル | |
] |
module.exports = function(grunt) { | |
grunt.initConfig({ | |
imagemin: { // Task | |
dist: { // Target | |
options: { // Target options | |
optimizationLevel: 3 | |
}, | |
files: { // Dictionary of files | |
'dist/': 'src/*.png' // dist is output directory name. src directory png file are optimization |
$ gem install jekyll
※ Ruby 1.9.1 が必要っぽい
Install
$spriteName: sprite-map("folder/*.png", $spacing: 5px); | |
@mixin sprite-hoge($name){ | |
background-image: $spriteName; | |
background-repeat: no-repeat; | |
width: image-width(sprite-file($spriteName, $name)) / 2; | |
height: image-height(sprite-file($spriteName, $name)) / 2; | |
$ypos: round(nth(sprite-position($spriteName, $name), 2) / 2); | |
background-position: 0 $ypos; | |
background-size: round(image-width(sprite-path($spriteName)) / 2) round(image-height(sprite-path($spriteName)) / 2); |
module.exports = function (grunt) { | |
grunt.initConfig({ | |
watch:{ | |
sassmin:{ | |
files: 'src/scss/*.scss', | |
tasks: ['compass','cssmin'] | |
}, | |
js:{ | |
files: 'src/js/*.js', |
Google Chrome
Google Chrome canary
Firefox
evernote
Dropbox
Sublime Text 2
Google 日本語入力
background プロパティで背景画像を指定した時、width と height の値が欲しい時もある。
そういうときに、いちいち画像のサイズを調べるのは面倒なので、下記のようにする。
background: url("../image/common/hoge.png") no-repeat 0 0;
width: image-width("../image/common/hoge.png");
height: image-height("../image/common/pagetop.png");
image-width, image-height で、自動的に画像のサイズを取得してくれる。