CSS와 SCSS의 차이점은 무엇입니까?

CSS와 SCSS의 차이점은 무엇입니까?

---

CSS를 잘 알고 있지만 Sass에 대해 혼란 스럽습니다. SCSS는 CSS와 어떻게 다르며, CSS 대신 SCSS를 사용하면 동일하게 작동합니까?

---

Idriss 답변 외에도 :

CSS

CSS에서 우리는 다음과 같이 전체 길이로 코드를 작성합니다.

body{
 width: 800px;
 color: #ffffff;
}
body content{
 width:750px;
 background:#ffffff;
}

SCSS

SCSS에서는 a를 사용하여이 코드를 단축 할 수 @mixin있으므로 반복 해서 작성 color하고 width속성 을 작성할 필요가 없습니다 . PHP 또는 다른 언어와 유사한 함수를 통해이를 정의 할 수 있습니다.

$color: #ffffff;
$width: 800px;

@mixin body{
 width: $width;
 color: $color;

 content{
  width: $width;
  background:$color;
 }
}

SASS

그러나 SASS에서는 전체 구조가 SCSS보다 시각적으로 더 빠르고 깔끔합니다.

• 복사 및 붙여 넣기를 사용할 때 공백에 민감합니다.

• 현재 인라인 CSS를 지원하지 않는 것 같습니다.

  $color: #ffffff
  $width: 800px
  $stack: Helvetica, sans-serif
  
  body
    width: $width
    color: $color
    font: 100% $stack
  
    content
      width: $width
      background:$color
  

---

CSS는 모든 브라우저가 웹 페이지를 스타일링하기 위해 이해하는 스타일링 언어입니다.

SCSS는 브라우저 용 CSS 스타일 시트를 조합하는 Ruby로 작성된 프로그램 인 SASS 용 특수 파일 유형이며, 정보를 위해 SASS는 CSS 작성을 더 쉽고 빠르게 할 수있는 변수, 중첩 등과 같은 CSS에 많은 추가 기능을 추가합니다. SCSS 파일은 웹 앱을 실행하는 서버에서 처리되어 브라우저가 이해할 수있는 기존 CSS를 출력합니다.

---

css변수도 있습니다. 다음과 같이 사용할 수 있습니다.

--primaryColor: #ffffff;
--width: 800px;

body {
    width: var(--width);
    color: var(--primaryColor);
}
.content{
    width: var(--width);
    background: var(--primaryColor);
}

---

그리고 이것은 덜

@primarycolor: #ffffff;
@width: 800px;

body{
 width: @width;
 color: @primarycolor;
 .content{
  width: @width;
  background:@primarycolor;
 }
}

참고 URL : https://stackoverflow.com/questions/46400443/what-is-the-difference-between-css-and-scss