Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tamshow/masizime.sass.mixins

masizime - Private Sass Mixin Library.
https://github.com/tamshow/masizime.sass.mixins

Last synced: about 1 month ago
JSON representation

masizime - Private Sass Mixin Library.

Host: GitHub
URL: https://github.com/tamshow/masizime.sass.mixins
Owner: tamshow
License: mit
Created: 2015-02-10T06:24:30.000Z (almost 10 years ago)
Default Branch: master
Last Pushed: 2015-03-31T13:25:04.000Z (almost 10 years ago)
Last Synced: 2024-12-05T11:07:40.588Z (about 1 month ago)
Language: CSS
Size: 211 KB
Stars: 3
Watchers: 4
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE.md

Awesome Lists containing this project

README

        [![masizime](http://masizime.com/common/images/logo.png)](http://masizime.com)

masizime Mixins

===

masizime Sass Mixinsです。

[Burbon](http://bourbon.io/), [Pure](http://purecss.io/), [Bootstrap](http://getbootstrap.com/)を参考にしています。

Requirements

====

- [Sass](https://github.com/sass/sass) 3.4+

Bower Installation

====

```bash

bower install masizime.sass.mixins --save-dev

```

Sass Import

====

```scss

@import "masizime.mixins/masizime";

```

Document

====



  grid

  

    グリッドレイアウト

    グリッドの幅を指定

    

      

$grid:総グリッド数

      

$columnsWidth:最大幅

      

$gutter:ガター幅

      

$direction:ガターのマージンの向き [left or auto]

      

$thisGrid:求めたいグリッド数

    


    
@include col-width($grid:12,$columnsWidth:980,$gutter:10,$direction:left,$thisGrid:1);

    グリッドのマージンを指定

    

      

$grid:総グリッド数

      

$columnsWidth:最大幅

      

$gutter:ガター幅

      

$direction:ガターのマージンの向き [left or auto]

      

$align:text-align [値 or false]

      

$mb:margin-bottom [値 or false]

    

    @include col-margin($grid:12,$columnsWidth:980,$gutter:10,$direction:left, $align:false, $mb:false);

    

      ソースを見る

  

  

  

    外枠

    グリッドの外枠を指定

    @include row();

    

      ソースを見る

  

  

  

    折り返し

    カラムの折り返し時のマージンを0にする

    @include by-return($col: 3, $direction: left);

    

      ソースを見る

  

  

  

    幅、隙間

    最大幅を指定

    @include l-wrapper($screen-width:960, $screen-fsize:13,$target:ie10);

    左右の隙間を指定

    @include l-gap($gap:10px);

    1カラムに落とす

    @include l-one($direction:left)

    

      ソースを見る

  

  

  

    個別に作るグリッド

    グリッドの外枠を指定

    @include grid-row();

    グリッドのカラムベースを指定

    @include grid-col-base();

    グリッドのカラムを指定

    

      

$col:段組数

      

$w:最大幅

      

$g:ガター幅

      

$align:text-align [値 or false]

      

$mb:margin-bottom [値 or false]

      

$direction:ガターのマージンの向き [left or right or auto]//autoは左右

      

$target:ie8をサポートするか？ [ie8 or ie10]

      

$fromie8ターゲットの場合に連番クラスを指定する最小値

      

$to:ie8ターゲットの場合に連番クラスを指定する最大値

    

    @include grid-col($col: 6, $w: 940, $g: 20, $align:false, $mb:false, $direction:left,$target:ie10,$from:1,$to:20);

    

      ソースを見る

  

  

  rwd

  

    フォントサイズ

    Smallサイズ, Middleサイズ, Largeサイズをまとめて指定

    @include fsize($size: 14px, $size-md: false, $size-sm: false);

    

      ソースを見る

  

  

  

    高さ

    Smallサイズ, Middleサイズ, Largeサイズをまとめて指定

    @include h($size: 20px, $size-md: false, $size-sm: false);

    

      ソースを見る

  

  

  

    幅

    Smallサイズ, Middleサイズ, Largeサイズをまとめて指定

    @include w($size: 20px, $size-md: false, $size-sm: false);

    @include w-percentage($size: 20, $parentW:0, $size-md: false, $parentW-md:0 , $size-sm: false, $parentW-sm:0 );

    

      ソースを見る

  

  

  

    ラインハイト

    Smallサイズ, Middleサイズ, Largeサイズをまとめて指定

    @include lh($size: 1, $size-md: false, $size-sm: false);

    

      ソースを見る

  

  

  

    ポジション

    Smallサイズ, Middleサイズ, Largeサイズをまとめて指定

    @include t($size: 0, $size-md: false, $size-sm: false);

    @include r($size: 0, $size-md: false, $size-sm: false);

    @include b($size: 0, $size-md: false, $size-sm: false);

    @include l($size: 0, $size-md: false, $size-sm: false);

    

      ソースを見る

  

  

  

    マージン

    Smallサイズ, Middleサイズ, Largeサイズをまとめて指定

    @include m($t:10px,$r:true,$b:true,$l:true); //一括指定

    @include mt($size: 20px, $size-md: false, $size-sm: false);

    @include mr($size: 20px, $size-md: false, $size-sm: false);

    @include mb($size: 20px, $size-md: false, $size-sm: false);

    @include ml($size: 20px, $size-md: false, $size-sm: false);

    

      ソースを見る

  

  

  

    パディング

    Smallサイズ, Middleサイズ, Largeサイズをまとめて指定

    @include p($t:10px,$r:true,$b:true,$l:true); //一括指定

    @include pt($size: 20px, $size-md: false, $size-sm: false);

    @include pr($size: 20px, $size-md: false, $size-sm: false);

    @include pb($size: 20px, $size-md: false, $size-sm: false);

    @include pl($size: 20px, $size-md: false, $size-sm: false);

    

      ソースを見る

  

  

  text

  

    マウスエフェクト

    マウス操作時にエフェクトを追加  

    

      

$r:カラーRed

      

$g:カラーGreen

      

$b:カラーBlue

      

$num1:グラデーション下の透明度

      

$num2:グラデーション上の透明度

    


    
@include mouse-effect-hover($r:0,$g:0,$b:0,$num1:0.1,$num2:0.2);

    @include mouse-effect-on($r:0,$g:0,$b:0,$num1:0.1,$num2:0.2);

    @include mouse-effect-active();

    @include mouse-effect-disabled();

    @include mouse-effect($r:255,$g:255,$b:255,$num2:0.1,$num3:0.2);

    

      ソースを見る

  

  

  

    テキストインデント

    @include text-indent();

    

      ソースを見る

  

  

  

    テキストオーバーフロー

    @include text-overflow();

    

      ソースを見る

  

  

  addons

  

    クリアフィックス

    @include clearfix();

    

      ソースを見る

  

  

  

    メディアクエリ

    @include min-media( $min-w );

    @include max-media( $max-w );

    @include min-max-media( $min-w, $max-w );

    

      ソースを見る

  

  

  

    メディアクエリ入り - プロパティ

    Smallサイズ, Middleサイズ, Largeサイズをまとめて指定

    @include media-property( $propertyName:top, $size: 0, $size-md: false, $size-sm: false );

    

      ソースを見る