October 04, 2014
scssでcss
久しぶりに真面目な話ｗｗｗ
仕事でscssを使い出しました。
mixinを自作してみたのでshare( ´ 艸` )ｗ
CSS3でも、フレキシブルデザイン用でもあーりません。
…もっと良い書き方がありそうですが。。
それと、時間をかけて作った割には、
全然評価されなかった（苦笑）less vs sassのプレゼンテーションファイル。
http://www.slideshare.net/awelcom/less-vs-sass-38038783
まだまだひよっこです(´・ω・｀)
仕事でscssを使い出しました。
mixinを自作してみたのでshare( ´ 艸` )ｗ
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;
}
}
φ(*'д'* )ﾒﾓﾒﾓっと♪
@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;
}
}
φ(*'д'* )ﾒﾓﾒﾓっと♪
