sass 사용법

sass 터미널  

sass --style  xxxxx scss:지정할 폴더/ :css/지정할 폴더/

xxxxx 적어놓은것은 컴파일 스타일 종류

컴파일 스타일 종류는

-nested : 뎁스별로 구분해서 컴파일

-compac: 요소에 스타일이 속성을 한줄씩 정렬해서 컴파일

-expanded: 요소에 모든 스타일을 한줄에 컴파일

-compressed : 모든 요소를 공백없이 컴파일

-sass 변수

$font-color: red;

$font-stack : Helvetica, sans-serif;

body{

font: 100% $font-stack;

color: $font-color;

}

//import 상속

//작성 방법 : @import "파일명.scss"   // 팁 파일명에 _붙여서 불러오면 css가 추가가 안된다..

//extend 상속

//작성 방법 : @extend %클래스명 또는 @extend .클래스명;

예시

.textCenter{ text-align:center;}

.div{ @extend .textCenter; }

//mixin 믹스인. 

-값을 전달할수 있다.

@maxin border-radius( $radius ){

  -webkit-border-radius: $radius;

     -moz-border-radius: $radius;

      -ms-border-radius: $radius;

          border-radius: $radius;

}

.box({@include border-radius( 10px )}

//연산자

+,-,*,/,% 사용할수 있다.

.wrap{ width:100%; max-width:720 }

.box{ width: 200px / 720 * 100% }

결과값

.box{  width: 27.77777777777778%; }