shirokuro331

画像の幅と高さを取得する

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 で、自動的に画像のサイズを取得してくれる。

shirokuro331

• AutoFileName
• ConvertToUTF8
• emmet
• Goto CSS Declaration
• Image2Base64
• LESS
• SASS
• SCSS
• LiveReload
• Markdown Preview

shirokuro331

• Google Chrome

• Google Chrome canary

• Firefox

• evernote

• Dropbox

• Sublime Text 2

• Google 日本語入力

shirokuro331

module.exports = function (grunt) {

  grunt.initConfig({
    watch:{
        sassmin:{
          files: 'src/scss/*.scss',
          tasks: ['compass','cssmin']
        },
        js:{
          files: 'src/js/*.js',

shirokuro331

$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);  

shirokuro331

jekyll インストール

terminal.app を起動し、下記コマンドを入力。

$ gem install jekyll

※ Ruby 1.9.1 が必要っぽい
Install

jekyll bootstrap のファイルをローカルにクローンする。

shirokuro331

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

shirokuro331

module.exports = function(grunt) {

    grunt.initConfig({
        sass: {
            dist: {
                files: {
                    'css/style.css':  // コンパイル後のフォルダとファイル
                    [
                      '_scss/*.scss' // 元ファイル
                    ]

shirokuro331

GitHubのメモ

###　GitHub のファイルを取ってくる

$ git clone https://hogehoge.git

###　GitHub のリポジトリにファイルをアップする

1. GitHub でリポジトリを作る
2. ローカルの適当なところでフォルダをつくる

shirokuro331

placeholder について

Sass 3.2 になってからの新機能らしい。
簡単に言うと css ファイルに書きだされない extend って感じ。

書き方は下記。
valiables は『$』だけど、placeholder は『%』を頭につける。

%redtext-redbackground{

background: #f00;