[code school] sass

그 동안 잘 활용 안 했던 것만 정리

scss에서 주석처리

//      --> css로 변환시 안 보임

/**/   --> 보임

-----------

.scss

.sidebar {

.users & {

}

}

.css

.sidebar {}

.users .sidebar {}

-------------

3, 4lv로 내려가지 말것

변수 선언

$a: 5px;

$a: 10px !default! ;

a는 5px임

button.scss에는

$a: 10px !default; 일때

import.scss에서

$a: 5px;

@import "button"; 이런식으로 활용

@mixin a( $radius, $x: border-box) { arg가 안 넘어오면 border-box로 세팅, 디폴트값있는게 뒤로 와야함

}

매개변수 값에 커마가 들어가는 경우 @mixin a($val...) 으로 받아주면 된다.  //dot 세개

@mixin highlight($color, $side) {

border-#{$side}-color: $color;

}

@include highlight(#fff, right);

.btn-a {}

.btn-b {@extend .btn-a;}

.side .btn-a {} 가 추가될 경우,,

extend 때문에 css로 컴파일되면

.sidebar .btn-a, .sidebar .btn-b {} 가 됨..

--> 완전 공통인거만 btn 으로 빼서 .btn-a와 .btn-b에 extend 해주자

%btn { 공통 프로퍼티들 }

.btn-a { @extend %btn; }

@function fluidize($target, $context) {

@return ($target / $context) * 100%;

}

.sidebar { width : fluidize(350px, 1000px); }

== != > >= < <=

header {

@if $them == dark {내용} @else if {} @else {}

}

$index: 1 2 3 4;

@each $number in $index {

.homeimg-#{@number} {backgound: url(homeimg-#($number));}

}

.item {

@for $i from 1 through 3 {

&.item-#{$i} {

top: $i * 30px;

}

}

}

또는 $i: 1; 정의 후, @white $i < 4 {&.item-#{$i} { top: $i * 30px;} $i: $i+1;}

@mixin utton($color, $rounded: false) {@if $rounded { border-radius: $rounded}}

내장함수 

percentage

rgba( #fffff, 0.8);

lighten(#fff, 20%);

darken

미디어쿼리

@mixin respond-to ($val, $query) {

@media ($val: $query) { @content}}

.side {  @include responnd-to(max-width, 900px) {} }