SCSS 변수를 배포하고 오늘부터 매일 저장하세요🔥
🔥SCSS/SASS 변수를 사용하여 코드 반복을 해결하는 4가지 트릭을 살펴보겠습니다.
목차 🔥
1. 미디어 쿼리:
Responsive Website, without Media Queries is a Joke! Let's say we have 4 block level, and 10 element level media queries(I follow BEM method). While changing the values of our media queries we have to manually read the whole thing.
But, if we deploy SCSS/SASS variables, then we only need to look at the top of our page. ***Thank me later.
❌이렇게 하는 대신❌
//******* Avoid this system *******
@media (max-width: 1024px){
// Contents Here
}
@media (max-width: 768px){
// Contents Here
}
@media (max-width: 480px){
// Contents Here
}
✔️이렇게 하세요✔️
//******* Follow this system *******
$laptop : 1024px;
$tablet : 768px;
$mobile : 480px;
@media (max-width: $laptop){
// Contents Here
}
@media (max-width: $tablet){
// Contents Here
}
@media (max-width: $mobile){
// Contents Here
}
2. 반응형 디자인 :
Designers pick 4-6 common numbers to set font size, padding, margin, etc.
Let's say, A Designer has picked 22px for heading, 16px for font size(general), padding between 2 elements of 32px, common margin of 10px, etc.
A Developer has to follow these style guides. While coding, he has to set these values in multiple places. It becomes a nightmare when there's a change in padding from 32px to 20px, and the developer has to read the whole file and change it again.
So, deploy SCSS/SASS variables and next time, look for the values at the top of the page.
❌이렇게 하는 대신❌
//******* Avoid this system *******
.container{
color: black;
font-size: 18px;
padding :32px;
margin:10px;
}
✔️이렇게 하세요✔️
//******* Follow this system *******
$color-1: black;
$fs : 18px;
$padding : 32px;
$margin : 10px;
.container{
color: $color-1;
font-size: $fs;
padding :$padding;
margin: $margin;
}
빠른 팁 💪
다음과 같이 SCSS/SASS 변수를 사용하여 이동 중에 계산을 수행할 수 있습니다.
$x : 50px;
.div-1{
width: ($x+$x); // (50+50) = 100px;
}
.div-2{
width: ($x*10)/2; // (50*10)/2 = 250px;
}
3. 글로벌 범위(범용):
Variables once set, at the top of your page, you can use it anywhere as you please. Sample 👇
$color-1 : white;
$color-2 : blue;
$color-3 : black;
$fs: 18px;
$padding: 20px;
.container{
background-color: $color-3;
font-size :$fs;
}
4. 로컬 범위(임시 사용):
If you want to set a value for a temporary use, then it's possible to create local scoped variables for temporary use.
**P.S : for this to work, set variables inside code blocks.
Sample 👇
//These are Global Scoped Variables
$color-A : white;
$color-B : black;
.div-1{
// This is Local Scoped Variable
$color-1 : green;
background-color : $color-1;
}
.div-2{
//**** This will not work ****
background-color : $color-1;
//*** This will Work ****
color : $color-A;
}
결론 :
자, 튜토리얼 신사 숙녀 여러분을 마쳤습니다. 의견 섹션에 대한 귀하의 생각을 알려주십시오.
제안과 비판은 매우 감사합니다 ❤️
But, if we deploy SCSS/SASS variables, then we only need to look at the top of our page. ***Thank me later.
//******* Avoid this system *******
@media (max-width: 1024px){
// Contents Here
}
@media (max-width: 768px){
// Contents Here
}
@media (max-width: 480px){
// Contents Here
}
//******* Follow this system *******
$laptop : 1024px;
$tablet : 768px;
$mobile : 480px;
@media (max-width: $laptop){
// Contents Here
}
@media (max-width: $tablet){
// Contents Here
}
@media (max-width: $mobile){
// Contents Here
}
Designers pick 4-6 common numbers to set font size, padding, margin, etc.
Let's say, A Designer has picked 22px for heading, 16px for font size(general), padding between 2 elements of 32px, common margin of 10px, etc.
A Developer has to follow these style guides. While coding, he has to set these values in multiple places. It becomes a nightmare when there's a change in padding from 32px to 20px, and the developer has to read the whole file and change it again.
So, deploy SCSS/SASS variables and next time, look for the values at the top of the page.
❌이렇게 하는 대신❌
//******* Avoid this system *******
.container{
color: black;
font-size: 18px;
padding :32px;
margin:10px;
}
✔️이렇게 하세요✔️
//******* Follow this system *******
$color-1: black;
$fs : 18px;
$padding : 32px;
$margin : 10px;
.container{
color: $color-1;
font-size: $fs;
padding :$padding;
margin: $margin;
}
빠른 팁 💪
다음과 같이 SCSS/SASS 변수를 사용하여 이동 중에 계산을 수행할 수 있습니다.
$x : 50px;
.div-1{
width: ($x+$x); // (50+50) = 100px;
}
.div-2{
width: ($x*10)/2; // (50*10)/2 = 250px;
}
3. 글로벌 범위(범용):
Variables once set, at the top of your page, you can use it anywhere as you please. Sample 👇
$color-1 : white;
$color-2 : blue;
$color-3 : black;
$fs: 18px;
$padding: 20px;
.container{
background-color: $color-3;
font-size :$fs;
}
4. 로컬 범위(임시 사용):
If you want to set a value for a temporary use, then it's possible to create local scoped variables for temporary use.
**P.S : for this to work, set variables inside code blocks.
Sample 👇
//These are Global Scoped Variables
$color-A : white;
$color-B : black;
.div-1{
// This is Local Scoped Variable
$color-1 : green;
background-color : $color-1;
}
.div-2{
//**** This will not work ****
background-color : $color-1;
//*** This will Work ****
color : $color-A;
}
결론 :
자, 튜토리얼 신사 숙녀 여러분을 마쳤습니다. 의견 섹션에 대한 귀하의 생각을 알려주십시오.
제안과 비판은 매우 감사합니다 ❤️
$color-1 : white;
$color-2 : blue;
$color-3 : black;
$fs: 18px;
$padding: 20px;
.container{
background-color: $color-3;
font-size :$fs;
}
If you want to set a value for a temporary use, then it's possible to create local scoped variables for temporary use.
**P.S : for this to work, set variables inside code blocks.
Sample 👇
//These are Global Scoped Variables
$color-A : white;
$color-B : black;
.div-1{
// This is Local Scoped Variable
$color-1 : green;
background-color : $color-1;
}
.div-2{
//**** This will not work ****
background-color : $color-1;
//*** This will Work ****
color : $color-A;
}
결론 :
자, 튜토리얼 신사 숙녀 여러분을 마쳤습니다. 의견 섹션에 대한 귀하의 생각을 알려주십시오.
제안과 비판은 매우 감사합니다 ❤️
Reference
이 문제에 관하여(SCSS 변수를 배포하고 오늘부터 매일 저장하세요🔥), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/joyshaheb/deploy-scss-variables-save-everyday-from-today-5c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
