CSS는 HTML로 작성된 웹 페이지의 콘텐츠를 스타일링하기 위해 사용되며, 매우 멋있게 보이고 사이트에서 콘텐츠가 표시되는 위치를 결정합니다. 또한 웹 사이트가 잠재 고객을 사이트로 유치하는 데 도움이 됩니다.
그러나 때로는 일반 CSS를 사용하여 크고 복잡한 웹 페이지를 스타일링하는 것은 오류가 발생하기 쉽고 시간이 많이 걸립니다. 그것은 우리를 천천히 움직이게 하고 유지하기가 더 어렵게 만듭니다.
일반 CSS를 사용할 때의 또 다른 단점은 브라우저마다 다르게 동작한다는 것이다. 일반 CSS를 사용하는 동안 브라우저 간 문제가 발생할 수 있습니다. IE와 오페라는 CSS를 다른 논리로 지원한다.
CSS 프리프로세서를 사용하면 브라우저 간 호환성을 통해 브라우저와의 호환성 문제를 해결할 수 있다. 이것은 CSS 구조를 읽고 유지하기 쉽게 만든다. CSS 프리프로세서는 CSS를 확장한 다음 이를 다시 일반 CSS로 컴파일하는 스크립트 언어이다.
골
이 문서에서는 두 가지 유형의 CSS 프리프로세서인 LESS와 SASS에 대해 설명하겠습니다. 두 프리프로세서 간의 유사성에 대해 논의하고 차별화하며 설명합니다.
LESS는 무엇입니까?
Lineer Style Sheet를 적게 나타냅니다. LESS는 다른 브라우저에서 사용할 수 있는 동적 전처리기 스타일 시트 언어이며 CSS(Cascading Style Sheet)로 컴파일하여 클라이언트 측 또는 서버 측에서 실행할 수 있습니다. 오픈소스 프로젝트이며 이전에는 루비로 작성되었으나 지금은 자바스크립트로 대체되어 클라이언트 쪽에서 실행되며 데이터를 매우 빠르게 준수합니다.
SASS가 뭐야?
SASS는 Syntactically Awesome Style Sheet의 약자입니다. SASS는 CSS(Cascading Style Sheet)로 해석되거나 컴파일되는 사전 프로세서 스크립트 언어이다. 이것은 루비 기반의 CSS의 슈퍼셋입니다.
내 친구 아이작은 SASS를
SASS는 두 개의 문법으로 구성된다:
원본 SASS 구문(표시된 구문) - 들여쓰기를 사용하여 코드 블록을 구분합니다.
button
display: inline-flex
background-color: #111
color: #fff
padding: 1em 2em
border: none
border-radius: 25px
```
파일 확장자는 .sass입니다.
<div class="content-ad"></div>
SCSS(sassy CSS) - CSS 형식을 가지며, 코드 블록을 나타내기 위해 중괄호를 사용합니다. 파일 확장자는 .scss입니다.
## LESS와 SASS의 유사점과 차이점
LESS와 SASS 둘 다 비슷한 기능을 가지고 있지만, 다른 점은 작성 방식이다.
## 변수
두 CSS 프리프로세서는 모두 스타일시트에 변수를 사용할 수 있습니다. 변수는 모든 프로그래밍 언어에서 가장 일반적으로 사용되는 항목 중 하나입니다. LESS 및 SASS를 사용하면 값을 한 번 정의하고 전체 스타일시트에 걸쳐 재사용할 수 있습니다. 그러므로 코드를 일관되게 유지하고 반복되지 않도록 하십시오.
<div class="content-ad"></div>
SASS는 변수를 달러 기호($)로 선언합니다.
```js
$ff: "Lato", sans-serif;
$p-color: #111;
// it can be applied anywhere in our stylesheet
body {
font-family: $ff;
color: $p-color;
}
```
LESS @ 기호를 사용하여 변수를 선언합니다.
```js
@ff: "Lato", sans-serif;
@p-color: #111;
// it can be applied anywhere in our stylesheet
#header {
font-family: $ff;
color: $p-color;
}
```
## 연산자
<div class="content-ad"></div>
+, -, /,*는 숫자, 색상 또는 변수에서 사용할 수 있다. 이것은 변수를 사용하고 있고 간단한 수학을 하고 싶을 때 많은 시간을 절약해줍니다.
새스
```js
$fontSize: 8px;
body {
font-size: $fontSize * 2;
}
$big-screen: 1016px;
$small-screen: $big-screen / 2;
```
더 적은
```js
@fontSize: 8px;
body {
font-size: @fontSize * 2;
}
@big-screen: 1016px;
@small-screen: @big-screen / 2;
```
<div class="content-ad"></div>
## 믹스인
그들은 Mixins의 사용을 지지한다. 믹스인은 비의미 클래스를 다시 만들지 않고 스타일시트의 모든 위치에서 사용하고 재사용할 수 있는 스타일을 만드는 데 사용됩니다.
SAS에서 @mixin 지시어는 믹스인을 정의하는 데 사용되며 @include는 문서에 믹스인을 포함시키는 데 사용됩니다.
```js
.button {
box-shadow: 0px 0px 3px 0 rgba(0,0,0,0.3)
border-radius: 30px;
transistion: transition: all 0.5s ease-in-out;
}
// to include mixin in any part of our stylsheet:
.cta {
color: #111;
@button;
}
```
LESS는 javascript에서 함수를 호출하는 것처럼 스타일시트와 괄호 끝에 있는 . 기호를 정의하고 포함하는데 모두 사용합니다.
<div class="content-ad"></div>
```js
.button {
box-shadow: 15px 5px 3px 0 rgba(0,0,0,0.3)
border-radius: 30px;
transistion: transition: all 0.5s ease-in-out;
}
.cta {
color: #111;
.button();
}
```
Mixins는 유틸리티를 향상시키기 위해 인수를 사용할 수도 있는데, 이를 PARAMETRIC MIXINS라고 합니다.
SASS의 파라메트릭 믹스인의 예는 다음과 같다.
```js
@mixin round-borders ($radius) {
border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
// And here’s how we can mix it into various rulesets:
.box {
@include $round-borders(5px);
}
.button {
@include $round-borders(30px);
}
```
적음:
<div class="content-ad"></div>
```js
.round-borders (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
// And here’s how we can mix it into various rulesets:
.box {
.round-borders(5px);
}
.button {
.round-borders(30px);
}
```
파라메트릭 믹스인은 매개변수에 대한 기본값을 가질 수도 있습니다.
```js
@mixin round-borders ($radius: 5px) {
border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
```
믹스인은 다른 믹스인에도 사용할 수 있으며 값을 반환하는 데도 사용할 수 있습니다. 믹스인은 다른 값이나 파라미터를 저장하고 @return을 사용하여 함수를 호출할 수 있습니다.
## 둥지
<div class="content-ad"></div>
중첩은 하나의 코드 블록이 다른 블록 안에 있는 엔클로저이다. 그것은 당신의 코드를 간결하게 하고 HTML의 구조를 모방한다. 그것은 또한 우리가 선택기를 여러 번 다시 쓰는 것을 방지하고 당신의 코드를 더 쉽게 읽고 유지 관리할 수 있게 한다.
```js
header {
color: black;
nav {
font-size: 12px;
}
.logo {
width: 300px;
}
}
```
또한 이 방법을 사용하여 의사 선택기를 믹스인과 함께 사용할 수도 있습니다.
```js
.circle {
width: 500px;
height: 500px;
position: relative;
&:after {
content: " ";
position: absolute;
top: 0;
left: 0;
height: 200px;
widht: 200px;
background: yellow;
}
}
```
참고: 사전 정의 CSS 전처리기 클래스를 다른 클래스로 가져올 수 있습니다.
<div class="content-ad"></div>
## 마무리
이 기사에서는 두 개의 CSS 프리프로세서에 대해 소개하고 소개했습니다: LESS와 SASS, 이들의 유사점과 차이점, 그리고 일반 CSS 대신 이 프리프로세서를 사용해야 하는 이유. 그들은 훨씬 더 많은 것을 제공하고, 함수와 조건문을 사용할 수 있게 해줍니다. SASS 및 LESS에 대해 자세히 알아봅니다.***
'css' 카테고리의 다른 글
| 7 2022년 웹 사이트에 가장 적합한 글꼴 (0) | 2022.01.31 |
|---|---|
| 컨셉토스 바시코스 드 CSS (0) | 2022.01.31 |
| 주간 다이제스트 04/2022 (0) | 2022.01.31 |
| CSS를 사용하여 요소의 중심을 맞추는 방법 (0) | 2022.01.31 |
| Css와 Javascript 또는 Gsap으로 스포트라이트 효과를 생성하세요. (0) | 2022.01.27 |
댓글