October 04, 2014

scssでcss

久しぶりに真面目な話www

仕事でscssを使い出しました。

mixinを自作してみたのでshare( ´ 艸` )w
CSS3でも、フレキシブルデザイン用でもあーりません。


//columns
$width: 1050px //ご自由に
$default_margin: 20px //ご自由に
@mixin col-unit($span) {
 float: left;
 margin-right: $default_margin;
 $column-width: ($width - ($default_margin * ($span - 1))) / $span;
 width: floor($column-width);
 &:last-child {
  margin-right: 0;
 }
}

//使い方
footer {
  margin: 30px 0;
   li {
   @include col-unit(6); //カラム6
   }
}


…もっと良い書き方がありそうですが。。

それと、時間をかけて作った割には、
全然評価されなかった(苦笑)less vs sassのプレゼンテーションファイル。
http://www.slideshare.net/awelcom/less-vs-sass-38038783

まだまだひよっこです(´・ω・`)

トラックバックURL

この記事へのコメント

1. Posted by あや。@ロス   January 01, 2015 07:16
ちょいと訂正(というかマージンの幅を変えたい場合)

@mixin col-unit($unit, $margin) {
float: left;
margin-right: $margin;
$column-width: ($width - ($margin * ($unit - 1))) / $unit;
width: floor($column-width);
&:nth-child(#{$unit}n) {
margin-right: 0;
}
}

φ(*'д'* )メモメモっと♪

この記事にコメントする

名前:
URL:
  情報を記憶: 評価: 顔   
 
 
 
Recent Comments
プロフィール

あや。@ロス
出身地:鹿児島
生息地:カリフォルニア
続きを見る >>