SCSS SASS - yagisawatakuya/Wiki GitHub Wiki

Sassセレクタまとめ

https://blogs.adobe.com/creativestation/web-practical-sass-02-selector-nesting

CSS →　Sass/Scss 手動コンパイル

http://css2sass.herokuapp.com/

Sass/Scss →　CSS 手動コンパイル

https://www.sassmeister.com/

参考

.block {
  width: 640px;
  margin: 30px auto;
  font-size: 1.6rem;
  line-height: 1.5;

  #{&}_wrap {
    position: relative;
    margin-bottom: 45px;

    @at-root {
      #{&}_content {
        height: 90px;
        overflow: hidden;
      }
      #{&}_txt {
        font-size: 14px;
      }
    }
  }
}

https://html5experts.jp/kosei27/3297/

グリッドレイアウト自動計算

$base_width: 980;  //最大幅
$column: 3;        //デフォルトのカラム数

// column width | px
@function column_px($value:$column) {
  @return round($base_width / $value) + px;
}

// column width | %
@function column_pct($value:$column) {
  @return percentage(1 / $value);
}

// px ⇒ %　変換
@function output_pct($value:$base_width) {
  @return ($value / $base_width * 100%);
}

http://book.scss.jp/code/c4/05.html

フォントサイズ自動計算

■ %

@function get_pct($size, $basesize:10){  // 第一引数で基準となる画面幅のフォントサイズ、第二引数で基準となる画面幅を入力
  @return $size / $basesize * 100%;
}
@mixin fs_pct($font_size:10) {
  font-size: $font_size * 1px;
  font-size: get_pct($font_size);
}

@include fs_pct(12); //出力

■ rem

@mixin fs_rem($size:$base_fs) {
	font-size: $size + px;
	font-size: ($size / 10) * 1rem;
}

@include fs_rem(12); //出力

■ vw

@function get_vw($size, $viewport:320){ // 第一引数で基準となる画面幅のフォントサイズ、第二引数で基準となる画面幅を入力
  $rate: 100 / $viewport;
  @return $rate * $size * 1vw;
}
@mixin fs_vw($font_size:10) {
  font-size: $font_size * 1px;
  font-size: get_vw($font_size);
}

@include fs_vw(12); //出力

https://qiita.com/katsunory/items/3bede89cee8e2ded8426

便利な関数

■ percentage（単位の無い数値を%形式に変換します。）

.percentage {
  content: percentage(.5);
}

// 出力結果
.percentage {
  content: 50%;
}

■ round（数値の小数点以下を四捨五入することができます。）

.round {
  content: round(1.5);
}


// 出力結果
.round {
  content: 2;
}

https://www.nxworld.net/tips/sass-number-operations-and-functions.html ■ @for

@for $i from 0 to 11 {
	.ml#{$i * 5} {
		margin-left: 5px * $i;
	}
}

// 出力結果
.mt0 {
  margin-top: 0px;
}

.mt5 {
  margin-top: 5px;
}
～～～ 略 ～～～

■ スマホサイトでよく見る、リストの矢印をミックスインで管理する

$setPrefix: -webkit-, -moz-, -o-, null;

// リンクリスト用の→矢印
@mixin linkIcon($color: #333){
	&:before {
		content: "";
		position: absolute;
		top: 50%;
		right: 15px;
		width: 10px;
		height: 10px;
		margin-top: -7px;
		border-top: 3px solid $color;
		border-right: 3px solid $color;
		@each $prefix in $setPrefix {
			#{$prefix}transform: rotate(45deg);
		}
	}
}

http://book.scss.jp/code/c5/04.html

計算例

top: 105 / 515 * 100%;
right: auto;
left: -(0 / 375 * 100%);

デバッグ

@debugで結果を確認する

@debug 10em + 12em;

CSS Hack

// IE6 用のハック
* html #main { background: blue; }
#main { _background: blue; }

// IE7 用のハック
*:first-child + html #main { background: blue; }

// IE6, 7 用のハック
#main { *background: blue; }

// IE7, 8, 9 用のハック
#main { background: blue\9; }

// IE9 用のハック
:root #main { background: blue\9; }

// Firefox 用のハック
#main, x:-moz-any-link { background: red; }
@-moz-document url-prefix( ) {
	#main { background: red; }
}

// Chrome、Safari 用のハック
@media screen and (-webkit-min-device-pixel-ratio : 0 ) {
	#main { background: green; }
}

http://book.scss.jp/code/c5/02.html