728x90 300x250 Front-end/SASS8 scss !global variable 변수선언 지역 범위에서 전역 변수의 값을 변경하려면? !global 플래그를 사용해서 변수에 값을 할당하면 해당 값은 지역변수에 선언했지만 전역 범위에 할당이 된다. SASS(SCSS) $color: green; $font-size: 30px; .content2 { $color : blue !global; color: $color; font-size: $font-size; } .footer { color: $color; font-size: $font-size; } CSS .content2 { color: blue; font-size: 30px; } .footer { color: blue; font-size: 30px; } 2022. 1. 11. !default scss 변수 정의 !default는 기존의 정의된 값이 있다면 기존 값을 그대로 유지하고 없다면 새로운 값을 적용시킬때 사용한다. SCSS /* 변수선언 */ $color: green; $font-size: 30px; $font-size: 20px !default; .content { color: $color; font-size: $font-size; //30px 출력 } 원래는 마지막에 선언한 font-size:20px이 적용 되어야 하지만 !default를 같이 선언 했기 때문에 기존에 있던 30px이 적용 된다. 만약 기존 변수에 'null' 값이 있었고 !default를 선언한다면 !default를 선언한 변수값이 적용 된다. /* 변수선언 */ $color: null; $color: green !default; .. 2022. 1. 7. Sass(Scss) Shadowing 그림자 효과 Scss 지역 변수는 전역 변수와 같은 이름으로 선언 할 수 도 있다. 이 경우에는 같은 이름을 가진 두 개의 다른 변수 가 존재하고 하나는 지역 변수이고 다른 하나는 전역 변수 이다. 따라서 동일한 파일에서 작업하는 여러 개발자들이 있고 전역 변수 이름을 인식하지 못하고 같은 이름으로 지역 변수를 선언하는 경우 SassScript 실패에 대해 걱정할 필요가 없다. SCSS(SASS) $variable: global value; .content { $variable: local value; value: $variable; } .sidebar { value: $variable; } CSS .content { value: local value; } .sidebar { value: global value; }.. 2022. 1. 2. Sass variable(Scss 변수) Sass에서 변수를 사용하기 위해서는 $로 시작해야 하며 변수 값으로 올 수 있는 것은 문자, 숫자(px, em포함), 컬러(#1c6eff)가 있다. 1. SCSS 변수 사용예시 SCSS $font-stack: Helvetica, sans-serif; /* font-stack 변수선언 */ $primary-color: #333; /* primary-color 변수선언 */ body { font: 100% $font-stack; color: $primary-color; } CSS body { font: 100% Helvetica, sans-serif; color: #333; } 위와 같이 sass 변수를 사용하면 일괄적으로 관리하고 변경 가능하기 때문에 색상이 수정 되더라도 변수값만 수정 하면 되고 같은 .. 2021. 12. 27. 이전 1 2 다음 728x90 반응형