Skip to content

Instantly share code, notes, and snippets.

View githiro's full-sized avatar

Hiro githiro

  • Tokyo
View GitHub Profile
@githiro
githiro / gulp-scss-lint-config.yml
Last active August 29, 2015 14:14
Gulp: gulp-scss-lint config file
# Default application configuration that all configurations inherit from.
# Linters Explanation:
# https://github.com/causes/scss-lint/blob/master/lib/scss_lint/linter/README.md
scss_files: "**/*.scss"
linters:
# !前後のフォーマット
BangFormat:
enabled: true
@githiro
githiro / gist:982543ab22627d12f8da
Last active August 29, 2015 14:14
SASS: sys-button component.
// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
// SYSTEM BUTTON
////////////////////////////////////////////////////////////////////
// VARIABLES
////////////////////////////////////
// Padding for buttons.
@githiro
githiro / gist:7566d62eceee2c7fe381
Created January 21, 2015 09:06
SASS: font-size mixin.Get px and rem-based "font-size: value" set. Foundation framework's rem-calc() function is required.
@mixin font-size($sizeValue: 1.6, $force: false) {
$unit: unit($sizeValue);
@if $unit == "px" {
$sizeValue: strip-unit($sizeValue);
@if $force == true {
font-size: $sizeValue + px !important;
font-size: rem-calc($sizeValue) !important;
} @else {
font-size: $sizeValue + px;
font-size: rem-calc($sizeValue);
@githiro
githiro / gist:51a4b8fc3b07027aef11
Created January 21, 2015 09:02
SASS: font-face mixin
@mixin font-face($fontname, $fontpath, $hasSVG: false, $isBold: false, $hasStyle: false) {
@font-face {
font-family: $fontname;
src: url('#{$fontpath}.eot?rev=#{$rev}');
src: url('#{$fontpath}.eot?iefix&rev=#{$rev}') format('eot'),
url('#{$fontpath}.woff?rev=#{$rev}') format('woff'),
url('#{$fontpath}.ttf?rev=#{$rev}') format('truetype'),
url('#{$fontpath}.svg?rev=#{$rev}#webfontjSpbZQRv') format('svg');
@if $isBold {
font-weight: bold;
@githiro
githiro / gist:d8b68aa65a8923ab5ac1
Created January 21, 2015 09:00
SASS: inline-block mixin
@mixin inline-block($force: false) {
@if $force {
display: inline-block !important;
}
@else {
display: inline-block;
}
@at-root {
.ie7 & {
@if $force {
@githiro
githiro / gist:84d9565b3f8acdb8fe2d
Last active August 29, 2015 14:13
SASS: Responsive pagination snippet
// PAGINATION
////////////////////////////////////////////////////////////////////
// Markup Example:
// <ul class="pagination">
// <li class="first-off"><span class="ficon ficon-first" title="最初へ"></span></li>
// <li class="previous-off"><span class="ficon ficon-previous" title="前へ"></span></li>
// <li class="active">1</li>
// <li><a href="javascript:void 0;">2</a></li>
// <li><a href="javascript:void 0;">3</a></li>
@githiro
githiro / gist:f6f08a0375042d307323
Last active August 29, 2015 14:13
SASS: Flexible video snippet.
// Flexible video
////////////////////////////////////
$flex-video-classname: "flex-video" !default;
$flex-video-fallback-max-width: 490px !default;
.#{$flex-video-classname} {
position: relative;
height: 0;
max-width: 100%;
margin-bottom: 1.6em !important;
@githiro
githiro / gist:bad257f2462d47f9b39a
Last active August 29, 2015 14:13
SASS: strip-unit function. This strips the unit of measure and returns it.
@function strip-unit($num) {
@return $num / ($num * 0 + 1);
}
@githiro
githiro / gist:a8205eb48ad462f31676
Last active August 29, 2015 14:13
SASS: rempx mixin. Get pixel-based and rem-based "property: value(s)" set. concat-list(), strip-unit(), rem-calc() functions and Sass ver.3.2.0~ are required.
@mixin rempx($property, $values...) {
$values: concat-list($values);
$max: length($values);
$pxValues: '';
$remValues: '';
@for $i from 1 through $max {
$value: nth($values, $i);
@if $value == auto {
$pxValues: #{$pxValues + $value};
@githiro
githiro / gist:fc2250b079475e3cc7fa
Last active August 29, 2015 14:13
SASS: concat-list function. Concat nested list or arglist to the flat list.
@function concat-list($nestedList) {
$list: ();
@each $elem in $nestedList {
@if type-of($elem) == list {
$elem: concat-list($elem);
}
$list: join($list, $elem);
}
@return $list;
}