SASS
2019.09.19 20:37

Sass 변수

조회 수 253 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

Sass Variables

 

  • strings
  • numbers
  • colors
  • booleans
  • lists
  • nulls

 

변수의 선언

$variablename: value;

 

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;
}

 

Sass 변수 범위

입력

$myColor: red;

h1 {
  $myColor: green;
  color: $myColor;
}

p {
  color: $myColor;
}

 

출력

h1 {
  color: green;
}

p {
  color: red;
}

 

!global 사용

입력

$myColor: red;

h1 {
  $myColor: green !global;
  color: $myColor;
}

p {
  color: $myColor;
}

 

출력

h1 {
  color: green;
}

p {
  color: green;
}

 

 

?

List of Articles
번호 분류 제목 날짜 조회 수
41 HTML 4. DIV안에 DIV 넣어 정렬하기 4 file 2015.12.23 88868
40 HTML 6. DIV를 통한 전체 화면 사용하기 & 응용 2 file 2015.12.24 39933
39 HTML 3. DIV내의 문자컨텐츠 수평정렬과 수직정렬 1 file 2015.12.23 17665
38 HTML 5. DIV를 통한 헤더 만들기 1 file 2015.12.24 12953
37 HTML 10. position: absolute; 에 대해 알아보자 1 file 2015.12.30 12097
36 HTML 2. DIV요소의 수평정렬과 수직정렬 file 2015.12.23 11643
35 HTML JavaScript의 반복문을 알아보자. 2 file 2016.02.24 10961
34 HTML 8. PHP를 통한 index파일의 구성 1 file 2015.12.28 10884
33 HTML Transition에 대해 알아보자. 8 2016.06.22 9744
32 HTML Form 요소 설명 2 2016.06.01 8043
31 HTML 1. Inline 요소와 Block 요소에 대한 이해 file 2015.12.22 7381
30 HTML 요소의 수직정렬을 알아보자. 1 file 2016.03.01 6852
29 HTML DIV 제거와 CSS 코드 줄이기 file 2016.02.17 6718
28 HTML li 에 대해 알아보자. 2 file 2016.02.15 6411
27 HTML 9. position: relative; 에 대해 알아보자 file 2015.12.29 5430
26 HTML 11. viewport를 활용한 반응형 예제 file 2015.12.31 5134
25 HTML 7. position: static; 에 대해 알아보자. file 2015.12.28 4662
24 HTML class 에 대해 알아보자. file 2016.02.16 4650
23 HTML 하나의 class = 하나의 디자인 ????? file 2016.02.23 3956
22 HTML ::before & ::after Pseudo Element 예제 1 2019.06.27 557
Board Pagination Prev 1 2 3 Next
/ 3