Skip to content

Instantly share code, notes, and snippets.

Avatar

Sasaki Toshiaki shirokuro331

View GitHub Profile
@shirokuro331
shirokuro331 / gist:6199320
Created Aug 10, 2013
Sublime Text 2 に入れたPackage
View gist:6199320
  • AutoFileName
  • ConvertToUTF8
  • emmet
  • Goto CSS Declaration
  • Image2Base64
  • LESS
  • SASS
  • SCSS
  • LiveReload
  • Markdown Preview
@shirokuro331
shirokuro331 / gist:6199243
Created Aug 10, 2013
MacBookAir買った時に入れたソフト
View gist:6199243
  • Google Chrome

  • Google Chrome canary

  • Firefox

  • evernote

  • Dropbox

  • Sublime Text 2

  • Google 日本語入力

View Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
watch:{
sassmin:{
files: 'src/scss/*.scss',
tasks: ['compass','cssmin']
},
js:{
files: 'src/js/*.js',
@shirokuro331
shirokuro331 / gist:5698477
Last active Dec 18, 2015
Retina 対応 mixin
View gist:5698477
$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
shirokuro331 / gist:5135506
Last active Dec 14, 2015
jekyll の導入手順(jekyll Bootstrap)
View gist:5135506

jekyll インストール

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

$ gem install jekyll

※ Ruby 1.9.1 が必要っぽい
Install

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

View Gruntfile.js
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
View Grantfile.js
module.exports = function(grunt) {
grunt.initConfig({
sass: {
dist: {
files: {
'css/style.css': // コンパイル後のフォルダとファイル
[
'_scss/*.scss' // 元ファイル
]
@shirokuro331
shirokuro331 / gist:4702149
Last active Dec 12, 2015
GitHubのメモ
View gist:4702149

GitHubのメモ

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

$ git clone https://hogehoge.git

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

  1. GitHub でリポジトリを作る
  2. ローカルの適当なところでフォルダをつくる
@shirokuro331
shirokuro331 / gist:4648973
Last active Dec 11, 2015
Sass の placeholder について
View gist:4648973

placeholder について

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

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

%redtext-redbackground{
    background: #f00;
@shirokuro331
shirokuro331 / gist:4515767
Last active Dec 11, 2015
忘れやすいので。
View gist:4515767

Emmet の書き方メモ

h2{menu}+ul>li*10>a[href="#"]{menu$}

上記をCtrl + E で展開すると

<h2>menu</h2>
<ul>
  <li><a href="#">menu1</a></li>
  <li><a href="#">menu2</a></li>
You can’t perform that action at this time.