SASS 소개
소개하다.
Sass(또는 SCSS)는 개발자의 강력한 디자인 도구입니다.그것은 모든 일반적인 낡은 CSS의 번거로운 업무를 책임지고 더 많은...많은 신입 개발자들이 어떤 이유로 그것을 두려워한다(나도!)하지만 너는 곧 사랑에 빠질 거야!사실, 이 블로그의 결말에서 나는 감히 너의 모든 디자인 게임이 영원히 바뀔 것이라고 내기를 걸겠다.안전벨트를 매라, 재미있을 거야.😉
장치
이 연습에는 VsCode가 필요합니다.다른 IDE를 사용할 수도 있다고 믿지만 몇 가지 특정 확장을 사용하겠습니다.
첫 번째 단계:
Ritwick Day에서 Live Server 설치
2단계:
Ritwick Day의 실시간 Sass 컴파일러 설치
와, 너무 쉬워!재미있는 부분을 시작해 봅시다.
설치 프로그램
새 빈 항목을 시작해야 합니다.index.html 파일을 포함합니다.인덱스 내부.html, !을 입력하고 enter을 누르면 매우 기본적인 html 템플릿을 만들 수 있습니다.
아니면 이것을 복사해 보십시오:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sass Sandbox</title>
<!-- CSS -->
<link rel="stylesheet" href="./styles/styles.css">
</head>
<body>
<div id="root">
<header>
<h1>Sass Sandbox</h1>
</header>
<div class="container">
<h1>Welcome to the...pratice box...thing....</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor consequuntur fugit magni esse, exercitationem nisi eius ipsa commodi! Quod saepe dignissimos vel accusamus ducimus iste nam quam officia, similique neque?</p>
<button>Here is button #1</button>
<div>
<button>Curvball, but here's a button in a DIV</button>
</div>
</div>
</div>
</body>
</html>
./styles/styles.css이 .scss으로 끝나는 것이 아니라 포함된다는 것을 알게 될 것이다.브라우저에서 .scss 파일을 읽을 수 없기 때문입니다.Live Sass 컴파일러를 사용하여 styles.scss 파일을 styles.css으로 컴파일합니다.너는 우리가 다음에 어떻게 하는지 알게 될 것이다.
같은 디렉터리에 styles이라는 폴더를 만듭니다.styles에는 styles.scss이라는 새 파일이 놓여 있다.
완성위대하다Sass가 어떻게 일을 하는지 배워봅시다!
Sass와 협력
일의 일치성을 유지하고 혼란을 줄이기 위해서 우리는 위에서 언급한 견본 문서를 사용할 것이다.styles.scss에서 다음과 같이 몇 가지 일반 CSS를 포함할 수 있습니다.
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
멀쩡해 보이죠?
알겠습니다. 실시간 Sass 컴파일러를 활성화합시다.VsCode 아래쪽에는'Watch Sass'라고 적힌 버튼이 있어야 합니다.
이걸 클릭하여 마법 발생을 보세요!styles.css과 styles.css.map이 생성됩니다.후자는 중요하지 않으니 styles.css을 열어봅시다.
참고: VsCode에서 자동 저장이 설정되어 있지 않으면 변경 사항을 CTRL + S에 따라 수동으로 저장해야 합니다.
얘가 좀 달라 보이나?
body {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
이것은 단지 시작일 뿐이다.😉 Sass는 속성뿐만 아니라 모든 브라우저에서 사용할 스타일을 설정합니다.일반적인 CSS는 이 점을 할 수 있지만, 수동으로 응용하는 데는 많은 정력을 들여야 한다.
우리 좀 더 복잡한 번역을 봅시다.Sass 파일에 넣기
header {
display: flex;
box-shadow: 0 0 50px -20px black;
justify-content: center;
align-items: center;
font-size: 3rem;
width: 100vw;
height: 200px;
background-color: rgb(178, 178, 209);
}
지금, 준비.모든 브라우저를 컴파일할 때 이러한 모든 속성은 다음과 같습니다.
header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-shadow: 0 0 50px -20px black;
box-shadow: 0 0 50px -20px black;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 3rem;
width: 100vw;
height: 200px;
background-color: #b2b2d1;
}
훌륭했어Sass는 이미 당신의 뇌에 도파민을 자극하기 시작했지 않습니까?놀랍게도 상황이 더 좋아졌다.이제 우리는 변수를 어떻게 사용하는지 배울 것이다.
Sass 변수
만약 우리가 자바스크립트에서처럼 Sass에서 변수를 사용할 수 있다면, 그것은 신기하지 않습니까?기다리다우리는 할 수 있어!거대한 응용 프로그램에서 특정한 색깔을 가지고 있다고 상상해 보세요.그것이 사용하는 CSS 속성 중, 색 방안을 바꿀 때, 모든 속성을 바꾸는 것이 얼마나 고통스러울지 상상할 수 있습니다.
Sass 변수를 입력합니다.다음은 Sass 파일 상단에 를 설정하는 방법입니다.
$myNewSassColor: lightblue;
이제 header 스타일의 배경색을 변경할 수 있습니다.
header {
display: flex;
box-shadow: 0 0 50px -20px black;
justify-content: center;
align-items: center;
font-size: 3rem;
width: 100vw;
height: 200px;
background-color: $myNewSassColor;
}
이것은 매우 간단하고 좁은 사례이지만, 나는 네가 더욱 큰 범위 내에서 이익을 볼 수 있을 것이라고 믿는다.가령 당신이 최종적으로 100개의 원소와 같은 background-color을 얻게 된다면, 나는 당신이 변수를 바꾸고 100개의 스타일을 바꾸는 것이 가장 좋은 선택이라고 믿습니다.
이제 우리 둥지를 짓는 것에 대해 이야기합시다.
새둥지
만약 당신이 순수한 CSS로 프로젝트를 처리해 본 적이 있다면, 그것은 얼마나 미친 듯이 변할지 알 수 있습니다.모든 하위 원소를 해결하는 것은 악몽이 될 수도 있다.적어도 나로서는, 그것은 나로 하여금 몇 시간 동안의 설계 작업 후에 매우 빨리 기진맥진하게 했다.
이 원본 CSS를 보십시오:
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
.container h1 {
font-size: 3em;
margin: 0;
}
.container p {
width: 50%;
}
.container button {
color: red;
}
☝️ 그 다음에 돌아오는 내용이에요.👇 Sass 어셈블리:
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
h1 {
font-size: 3em;
margin: 0;
}
p {
width: 50%;
}
button {
color: red;
}
}
이거 사스 둥지 짓는 거야!그것은 더욱 깨끗하고 읽기 쉬우며 관리하기 쉽다.위조 선택기의 처리 방식도 다르지만 여전히 즐겁다.
h1 {
font-size: 3em;
margin: 0;
&:hover {
color: red;
}
}
수입하다
또한 다른 Sass 파일에서 가져올 수도 있습니다.이러한 파일은 밑줄로 시작합니다._anotherSassFile.scss이라는 파일이 있다고 가정하십시오.
당신은 여전히 styles.scss에서 당신의 스타일을 쓸 수 있지만, 이것은 우리가 관심을 통해 분리할 수 있도록 허락합니다.네비게이션 표시줄에 Sass 파일을 만들 수 있습니다. 홈 페이지와 대시보드 등에 사용할 수 있습니다. 가져오기를 위해서 @import './anotherSassFile.scss'을 styles.scss의 맨 위에 놓으면 됩니다.
Sass Mixins
Mixin은 반복되는 코드를 하나의 Mixin으로 압축할 수 있는 JavaScript의 함수와 유사합니다.
프런트엔드 개발자로서 이러한 속성을 자주 사용하십시오!:
.someClass {
display: flex;
justify-content: center;
align-items: center;
}
우리의 많은 디자인에 있어서 이 세 가지 속성은 모두 빵과 버터에 매우 가깝지만, 우리는 반드시 자신을 반복해야 한다.우리가 그것들을 더욱 쉽게 사용할 수 있도록...
@mixin flexCenter {
display: flex;
justify-content: center;
align-items: center;
}
우리의 @mixin 변수는 flexCenter이다.너는 그것에 어떤 이름을 지어도 된다.너에게 더 의미 있는 일이라면 무엇이든지하지만 이제 우리가 그것을 어떻게 사용하는지 살펴보자.
.someClass {
@include flexCenter();
}
세 줄에서 한 줄로!너는 아직도 악작극을 좋아하니?아니!?아직도 안 믿겨?그래, 그래.알겠습니다.너는 모두 생활 속의 기이한 사물에 관한 것이다.너는 설탕 크림을 넣지 않은 케이크를 좋아하지 않는다.잘 듣고 다음 부분을 보세요.
@ 블렌드 변수
너는 동적 믹스를 할 수 있다.내가 너에게 이것을 보여줄게.
@mixin flexCenter($direction) {
display: flex;
justify-content: center;
align-items: center;
flex-direction: $direction
}
.someClass {
@include flexCenter(column);
}
좀 볼 수 있겠소?Sass는 매개 변수를 설정할 수 있고 유효합니다!설탕 크림을 즐겨라, 점원.
결론
Sass는 우리가 웹 페이지를 디자인하는 방식을 바꿀 수 있는 매우 강력한 도구이다.Sass는 네스트에서 변수에 이어 블렌드(기본적으로 함수)까지 게임을 완전히 바꿨습니다.만약 네가 아직 깊이 연구할 이유를 찾지 못했다면, 나는 오늘 너를 잘 설득할 수 있기를 바란다.
여러분 화요일 잘 보내세요!
Reference
이 문제에 관하여(SASS 소개), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/matthewpalmer9/introduction-to-sass-22mj
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
이 연습에는 VsCode가 필요합니다.다른 IDE를 사용할 수도 있다고 믿지만 몇 가지 특정 확장을 사용하겠습니다.
첫 번째 단계:
Ritwick Day에서 Live Server 설치
2단계:
Ritwick Day의 실시간 Sass 컴파일러 설치
와, 너무 쉬워!재미있는 부분을 시작해 봅시다.
설치 프로그램
새 빈 항목을 시작해야 합니다.index.html 파일을 포함합니다.인덱스 내부.html, !을 입력하고 enter을 누르면 매우 기본적인 html 템플릿을 만들 수 있습니다.
아니면 이것을 복사해 보십시오:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sass Sandbox</title>
<!-- CSS -->
<link rel="stylesheet" href="./styles/styles.css">
</head>
<body>
<div id="root">
<header>
<h1>Sass Sandbox</h1>
</header>
<div class="container">
<h1>Welcome to the...pratice box...thing....</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor consequuntur fugit magni esse, exercitationem nisi eius ipsa commodi! Quod saepe dignissimos vel accusamus ducimus iste nam quam officia, similique neque?</p>
<button>Here is button #1</button>
<div>
<button>Curvball, but here's a button in a DIV</button>
</div>
</div>
</div>
</body>
</html>
./styles/styles.css이 .scss으로 끝나는 것이 아니라 포함된다는 것을 알게 될 것이다.브라우저에서 .scss 파일을 읽을 수 없기 때문입니다.Live Sass 컴파일러를 사용하여 styles.scss 파일을 styles.css으로 컴파일합니다.너는 우리가 다음에 어떻게 하는지 알게 될 것이다.
같은 디렉터리에 styles이라는 폴더를 만듭니다.styles에는 styles.scss이라는 새 파일이 놓여 있다.
완성위대하다Sass가 어떻게 일을 하는지 배워봅시다!
Sass와 협력
일의 일치성을 유지하고 혼란을 줄이기 위해서 우리는 위에서 언급한 견본 문서를 사용할 것이다.styles.scss에서 다음과 같이 몇 가지 일반 CSS를 포함할 수 있습니다.
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
멀쩡해 보이죠?
알겠습니다. 실시간 Sass 컴파일러를 활성화합시다.VsCode 아래쪽에는'Watch Sass'라고 적힌 버튼이 있어야 합니다.
이걸 클릭하여 마법 발생을 보세요!styles.css과 styles.css.map이 생성됩니다.후자는 중요하지 않으니 styles.css을 열어봅시다.
참고: VsCode에서 자동 저장이 설정되어 있지 않으면 변경 사항을 CTRL + S에 따라 수동으로 저장해야 합니다.
얘가 좀 달라 보이나?
body {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
이것은 단지 시작일 뿐이다.😉 Sass는 속성뿐만 아니라 모든 브라우저에서 사용할 스타일을 설정합니다.일반적인 CSS는 이 점을 할 수 있지만, 수동으로 응용하는 데는 많은 정력을 들여야 한다.
우리 좀 더 복잡한 번역을 봅시다.Sass 파일에 넣기
header {
display: flex;
box-shadow: 0 0 50px -20px black;
justify-content: center;
align-items: center;
font-size: 3rem;
width: 100vw;
height: 200px;
background-color: rgb(178, 178, 209);
}
지금, 준비.모든 브라우저를 컴파일할 때 이러한 모든 속성은 다음과 같습니다.
header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-shadow: 0 0 50px -20px black;
box-shadow: 0 0 50px -20px black;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 3rem;
width: 100vw;
height: 200px;
background-color: #b2b2d1;
}
훌륭했어Sass는 이미 당신의 뇌에 도파민을 자극하기 시작했지 않습니까?놀랍게도 상황이 더 좋아졌다.이제 우리는 변수를 어떻게 사용하는지 배울 것이다.
Sass 변수
만약 우리가 자바스크립트에서처럼 Sass에서 변수를 사용할 수 있다면, 그것은 신기하지 않습니까?기다리다우리는 할 수 있어!거대한 응용 프로그램에서 특정한 색깔을 가지고 있다고 상상해 보세요.그것이 사용하는 CSS 속성 중, 색 방안을 바꿀 때, 모든 속성을 바꾸는 것이 얼마나 고통스러울지 상상할 수 있습니다.
Sass 변수를 입력합니다.다음은 Sass 파일 상단에 를 설정하는 방법입니다.
$myNewSassColor: lightblue;
이제 header 스타일의 배경색을 변경할 수 있습니다.
header {
display: flex;
box-shadow: 0 0 50px -20px black;
justify-content: center;
align-items: center;
font-size: 3rem;
width: 100vw;
height: 200px;
background-color: $myNewSassColor;
}
이것은 매우 간단하고 좁은 사례이지만, 나는 네가 더욱 큰 범위 내에서 이익을 볼 수 있을 것이라고 믿는다.가령 당신이 최종적으로 100개의 원소와 같은 background-color을 얻게 된다면, 나는 당신이 변수를 바꾸고 100개의 스타일을 바꾸는 것이 가장 좋은 선택이라고 믿습니다.
이제 우리 둥지를 짓는 것에 대해 이야기합시다.
새둥지
만약 당신이 순수한 CSS로 프로젝트를 처리해 본 적이 있다면, 그것은 얼마나 미친 듯이 변할지 알 수 있습니다.모든 하위 원소를 해결하는 것은 악몽이 될 수도 있다.적어도 나로서는, 그것은 나로 하여금 몇 시간 동안의 설계 작업 후에 매우 빨리 기진맥진하게 했다.
이 원본 CSS를 보십시오:
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
.container h1 {
font-size: 3em;
margin: 0;
}
.container p {
width: 50%;
}
.container button {
color: red;
}
☝️ 그 다음에 돌아오는 내용이에요.👇 Sass 어셈블리:
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
h1 {
font-size: 3em;
margin: 0;
}
p {
width: 50%;
}
button {
color: red;
}
}
이거 사스 둥지 짓는 거야!그것은 더욱 깨끗하고 읽기 쉬우며 관리하기 쉽다.위조 선택기의 처리 방식도 다르지만 여전히 즐겁다.
h1 {
font-size: 3em;
margin: 0;
&:hover {
color: red;
}
}
수입하다
또한 다른 Sass 파일에서 가져올 수도 있습니다.이러한 파일은 밑줄로 시작합니다._anotherSassFile.scss이라는 파일이 있다고 가정하십시오.
당신은 여전히 styles.scss에서 당신의 스타일을 쓸 수 있지만, 이것은 우리가 관심을 통해 분리할 수 있도록 허락합니다.네비게이션 표시줄에 Sass 파일을 만들 수 있습니다. 홈 페이지와 대시보드 등에 사용할 수 있습니다. 가져오기를 위해서 @import './anotherSassFile.scss'을 styles.scss의 맨 위에 놓으면 됩니다.
Sass Mixins
Mixin은 반복되는 코드를 하나의 Mixin으로 압축할 수 있는 JavaScript의 함수와 유사합니다.
프런트엔드 개발자로서 이러한 속성을 자주 사용하십시오!:
.someClass {
display: flex;
justify-content: center;
align-items: center;
}
우리의 많은 디자인에 있어서 이 세 가지 속성은 모두 빵과 버터에 매우 가깝지만, 우리는 반드시 자신을 반복해야 한다.우리가 그것들을 더욱 쉽게 사용할 수 있도록...
@mixin flexCenter {
display: flex;
justify-content: center;
align-items: center;
}
우리의 @mixin 변수는 flexCenter이다.너는 그것에 어떤 이름을 지어도 된다.너에게 더 의미 있는 일이라면 무엇이든지하지만 이제 우리가 그것을 어떻게 사용하는지 살펴보자.
.someClass {
@include flexCenter();
}
세 줄에서 한 줄로!너는 아직도 악작극을 좋아하니?아니!?아직도 안 믿겨?그래, 그래.알겠습니다.너는 모두 생활 속의 기이한 사물에 관한 것이다.너는 설탕 크림을 넣지 않은 케이크를 좋아하지 않는다.잘 듣고 다음 부분을 보세요.
@ 블렌드 변수
너는 동적 믹스를 할 수 있다.내가 너에게 이것을 보여줄게.
@mixin flexCenter($direction) {
display: flex;
justify-content: center;
align-items: center;
flex-direction: $direction
}
.someClass {
@include flexCenter(column);
}
좀 볼 수 있겠소?Sass는 매개 변수를 설정할 수 있고 유효합니다!설탕 크림을 즐겨라, 점원.
결론
Sass는 우리가 웹 페이지를 디자인하는 방식을 바꿀 수 있는 매우 강력한 도구이다.Sass는 네스트에서 변수에 이어 블렌드(기본적으로 함수)까지 게임을 완전히 바꿨습니다.만약 네가 아직 깊이 연구할 이유를 찾지 못했다면, 나는 오늘 너를 잘 설득할 수 있기를 바란다.
여러분 화요일 잘 보내세요!
Reference
이 문제에 관하여(SASS 소개), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/matthewpalmer9/introduction-to-sass-22mj
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sass Sandbox</title>
<!-- CSS -->
<link rel="stylesheet" href="./styles/styles.css">
</head>
<body>
<div id="root">
<header>
<h1>Sass Sandbox</h1>
</header>
<div class="container">
<h1>Welcome to the...pratice box...thing....</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor consequuntur fugit magni esse, exercitationem nisi eius ipsa commodi! Quod saepe dignissimos vel accusamus ducimus iste nam quam officia, similique neque?</p>
<button>Here is button #1</button>
<div>
<button>Curvball, but here's a button in a DIV</button>
</div>
</div>
</div>
</body>
</html>
일의 일치성을 유지하고 혼란을 줄이기 위해서 우리는 위에서 언급한 견본 문서를 사용할 것이다.
styles.scss에서 다음과 같이 몇 가지 일반 CSS를 포함할 수 있습니다.body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
알겠습니다. 실시간 Sass 컴파일러를 활성화합시다.VsCode 아래쪽에는'Watch Sass'라고 적힌 버튼이 있어야 합니다.
이걸 클릭하여 마법 발생을 보세요!
styles.css과 styles.css.map이 생성됩니다.후자는 중요하지 않으니 styles.css을 열어봅시다.참고: VsCode에서 자동 저장이 설정되어 있지 않으면 변경 사항을
CTRL + S에 따라 수동으로 저장해야 합니다.얘가 좀 달라 보이나?
body {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
우리 좀 더 복잡한 번역을 봅시다.Sass 파일에 넣기
header {
display: flex;
box-shadow: 0 0 50px -20px black;
justify-content: center;
align-items: center;
font-size: 3rem;
width: 100vw;
height: 200px;
background-color: rgb(178, 178, 209);
}
header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-shadow: 0 0 50px -20px black;
box-shadow: 0 0 50px -20px black;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 3rem;
width: 100vw;
height: 200px;
background-color: #b2b2d1;
}
Sass 변수
만약 우리가 자바스크립트에서처럼 Sass에서 변수를 사용할 수 있다면, 그것은 신기하지 않습니까?기다리다우리는 할 수 있어!거대한 응용 프로그램에서 특정한 색깔을 가지고 있다고 상상해 보세요.그것이 사용하는 CSS 속성 중, 색 방안을 바꿀 때, 모든 속성을 바꾸는 것이 얼마나 고통스러울지 상상할 수 있습니다.
Sass 변수를 입력합니다.다음은 Sass 파일 상단에 를 설정하는 방법입니다.
$myNewSassColor: lightblue;
이제 header 스타일의 배경색을 변경할 수 있습니다.
header {
display: flex;
box-shadow: 0 0 50px -20px black;
justify-content: center;
align-items: center;
font-size: 3rem;
width: 100vw;
height: 200px;
background-color: $myNewSassColor;
}
이것은 매우 간단하고 좁은 사례이지만, 나는 네가 더욱 큰 범위 내에서 이익을 볼 수 있을 것이라고 믿는다.가령 당신이 최종적으로 100개의 원소와 같은 background-color을 얻게 된다면, 나는 당신이 변수를 바꾸고 100개의 스타일을 바꾸는 것이 가장 좋은 선택이라고 믿습니다.
이제 우리 둥지를 짓는 것에 대해 이야기합시다.
새둥지
만약 당신이 순수한 CSS로 프로젝트를 처리해 본 적이 있다면, 그것은 얼마나 미친 듯이 변할지 알 수 있습니다.모든 하위 원소를 해결하는 것은 악몽이 될 수도 있다.적어도 나로서는, 그것은 나로 하여금 몇 시간 동안의 설계 작업 후에 매우 빨리 기진맥진하게 했다.
이 원본 CSS를 보십시오:
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
.container h1 {
font-size: 3em;
margin: 0;
}
.container p {
width: 50%;
}
.container button {
color: red;
}
☝️ 그 다음에 돌아오는 내용이에요.👇 Sass 어셈블리:
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
h1 {
font-size: 3em;
margin: 0;
}
p {
width: 50%;
}
button {
color: red;
}
}
이거 사스 둥지 짓는 거야!그것은 더욱 깨끗하고 읽기 쉬우며 관리하기 쉽다.위조 선택기의 처리 방식도 다르지만 여전히 즐겁다.
h1 {
font-size: 3em;
margin: 0;
&:hover {
color: red;
}
}
수입하다
또한 다른 Sass 파일에서 가져올 수도 있습니다.이러한 파일은 밑줄로 시작합니다._anotherSassFile.scss이라는 파일이 있다고 가정하십시오.
당신은 여전히 styles.scss에서 당신의 스타일을 쓸 수 있지만, 이것은 우리가 관심을 통해 분리할 수 있도록 허락합니다.네비게이션 표시줄에 Sass 파일을 만들 수 있습니다. 홈 페이지와 대시보드 등에 사용할 수 있습니다. 가져오기를 위해서 @import './anotherSassFile.scss'을 styles.scss의 맨 위에 놓으면 됩니다.
Sass Mixins
Mixin은 반복되는 코드를 하나의 Mixin으로 압축할 수 있는 JavaScript의 함수와 유사합니다.
프런트엔드 개발자로서 이러한 속성을 자주 사용하십시오!:
.someClass {
display: flex;
justify-content: center;
align-items: center;
}
우리의 많은 디자인에 있어서 이 세 가지 속성은 모두 빵과 버터에 매우 가깝지만, 우리는 반드시 자신을 반복해야 한다.우리가 그것들을 더욱 쉽게 사용할 수 있도록...
@mixin flexCenter {
display: flex;
justify-content: center;
align-items: center;
}
우리의 @mixin 변수는 flexCenter이다.너는 그것에 어떤 이름을 지어도 된다.너에게 더 의미 있는 일이라면 무엇이든지하지만 이제 우리가 그것을 어떻게 사용하는지 살펴보자.
.someClass {
@include flexCenter();
}
세 줄에서 한 줄로!너는 아직도 악작극을 좋아하니?아니!?아직도 안 믿겨?그래, 그래.알겠습니다.너는 모두 생활 속의 기이한 사물에 관한 것이다.너는 설탕 크림을 넣지 않은 케이크를 좋아하지 않는다.잘 듣고 다음 부분을 보세요.
@ 블렌드 변수
너는 동적 믹스를 할 수 있다.내가 너에게 이것을 보여줄게.
@mixin flexCenter($direction) {
display: flex;
justify-content: center;
align-items: center;
flex-direction: $direction
}
.someClass {
@include flexCenter(column);
}
좀 볼 수 있겠소?Sass는 매개 변수를 설정할 수 있고 유효합니다!설탕 크림을 즐겨라, 점원.
결론
Sass는 우리가 웹 페이지를 디자인하는 방식을 바꿀 수 있는 매우 강력한 도구이다.Sass는 네스트에서 변수에 이어 블렌드(기본적으로 함수)까지 게임을 완전히 바꿨습니다.만약 네가 아직 깊이 연구할 이유를 찾지 못했다면, 나는 오늘 너를 잘 설득할 수 있기를 바란다.
여러분 화요일 잘 보내세요!
Reference
이 문제에 관하여(SASS 소개), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/matthewpalmer9/introduction-to-sass-22mj
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$myNewSassColor: lightblue;
header {
display: flex;
box-shadow: 0 0 50px -20px black;
justify-content: center;
align-items: center;
font-size: 3rem;
width: 100vw;
height: 200px;
background-color: $myNewSassColor;
}
만약 당신이 순수한 CSS로 프로젝트를 처리해 본 적이 있다면, 그것은 얼마나 미친 듯이 변할지 알 수 있습니다.모든 하위 원소를 해결하는 것은 악몽이 될 수도 있다.적어도 나로서는, 그것은 나로 하여금 몇 시간 동안의 설계 작업 후에 매우 빨리 기진맥진하게 했다.
이 원본 CSS를 보십시오:
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
.container h1 {
font-size: 3em;
margin: 0;
}
.container p {
width: 50%;
}
.container button {
color: red;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
h1 {
font-size: 3em;
margin: 0;
}
p {
width: 50%;
}
button {
color: red;
}
}
h1 {
font-size: 3em;
margin: 0;
&:hover {
color: red;
}
}
수입하다
또한 다른 Sass 파일에서 가져올 수도 있습니다.이러한 파일은 밑줄로 시작합니다._anotherSassFile.scss이라는 파일이 있다고 가정하십시오.
당신은 여전히 styles.scss에서 당신의 스타일을 쓸 수 있지만, 이것은 우리가 관심을 통해 분리할 수 있도록 허락합니다.네비게이션 표시줄에 Sass 파일을 만들 수 있습니다. 홈 페이지와 대시보드 등에 사용할 수 있습니다. 가져오기를 위해서 @import './anotherSassFile.scss'을 styles.scss의 맨 위에 놓으면 됩니다.
Sass Mixins
Mixin은 반복되는 코드를 하나의 Mixin으로 압축할 수 있는 JavaScript의 함수와 유사합니다.
프런트엔드 개발자로서 이러한 속성을 자주 사용하십시오!:
.someClass {
display: flex;
justify-content: center;
align-items: center;
}
우리의 많은 디자인에 있어서 이 세 가지 속성은 모두 빵과 버터에 매우 가깝지만, 우리는 반드시 자신을 반복해야 한다.우리가 그것들을 더욱 쉽게 사용할 수 있도록...
@mixin flexCenter {
display: flex;
justify-content: center;
align-items: center;
}
우리의 @mixin 변수는 flexCenter이다.너는 그것에 어떤 이름을 지어도 된다.너에게 더 의미 있는 일이라면 무엇이든지하지만 이제 우리가 그것을 어떻게 사용하는지 살펴보자.
.someClass {
@include flexCenter();
}
세 줄에서 한 줄로!너는 아직도 악작극을 좋아하니?아니!?아직도 안 믿겨?그래, 그래.알겠습니다.너는 모두 생활 속의 기이한 사물에 관한 것이다.너는 설탕 크림을 넣지 않은 케이크를 좋아하지 않는다.잘 듣고 다음 부분을 보세요.
@ 블렌드 변수
너는 동적 믹스를 할 수 있다.내가 너에게 이것을 보여줄게.
@mixin flexCenter($direction) {
display: flex;
justify-content: center;
align-items: center;
flex-direction: $direction
}
.someClass {
@include flexCenter(column);
}
좀 볼 수 있겠소?Sass는 매개 변수를 설정할 수 있고 유효합니다!설탕 크림을 즐겨라, 점원.
결론
Sass는 우리가 웹 페이지를 디자인하는 방식을 바꿀 수 있는 매우 강력한 도구이다.Sass는 네스트에서 변수에 이어 블렌드(기본적으로 함수)까지 게임을 완전히 바꿨습니다.만약 네가 아직 깊이 연구할 이유를 찾지 못했다면, 나는 오늘 너를 잘 설득할 수 있기를 바란다.
여러분 화요일 잘 보내세요!
Reference
이 문제에 관하여(SASS 소개), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/matthewpalmer9/introduction-to-sass-22mj
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Mixin은 반복되는 코드를 하나의 Mixin으로 압축할 수 있는 JavaScript의 함수와 유사합니다.
프런트엔드 개발자로서 이러한 속성을 자주 사용하십시오!:
.someClass {
display: flex;
justify-content: center;
align-items: center;
}
@mixin flexCenter {
display: flex;
justify-content: center;
align-items: center;
}
@mixin 변수는 flexCenter이다.너는 그것에 어떤 이름을 지어도 된다.너에게 더 의미 있는 일이라면 무엇이든지하지만 이제 우리가 그것을 어떻게 사용하는지 살펴보자..someClass {
@include flexCenter();
}
@ 블렌드 변수
너는 동적 믹스를 할 수 있다.내가 너에게 이것을 보여줄게.
@mixin flexCenter($direction) {
display: flex;
justify-content: center;
align-items: center;
flex-direction: $direction
}
.someClass {
@include flexCenter(column);
}
결론
Sass는 우리가 웹 페이지를 디자인하는 방식을 바꿀 수 있는 매우 강력한 도구이다.Sass는 네스트에서 변수에 이어 블렌드(기본적으로 함수)까지 게임을 완전히 바꿨습니다.만약 네가 아직 깊이 연구할 이유를 찾지 못했다면, 나는 오늘 너를 잘 설득할 수 있기를 바란다.
여러분 화요일 잘 보내세요!
Reference
이 문제에 관하여(SASS 소개), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/matthewpalmer9/introduction-to-sass-22mj
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(SASS 소개), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/matthewpalmer9/introduction-to-sass-22mj텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
