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

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

Idriss 답변 외에도 :

CSS

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

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

SCSS

SCSS에서 우리는을 사용하여이 코드를 단축 할 수 @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 는 브라우저 용 스타일 시트를 SASS조합하는 Ruby로 작성된 프로그램 인를 위한 특수 유형의 파일이며 CSS정보를 위해 변수, 중첩 등과 같은 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;
 }
}

올바른 변수 정의 :

$      => SCSS, SASS
--     => CSS
@      => LESS

모든 답변은 좋지만 질문은 답변과 조금 다릅니다

"Sass 정보. SCSS는 CSS와 어떻게 다른 가요? " : scss는 잘 구성된 CSS3 구문입니다. sass 전처리기를 사용하여 생성합니다.

CSS 대신 SCSS를 사용하면 동일하게 작동합니까? 예. 귀하의 IDE가 sass 전처리기를 지원하는 경우. 동일하게 작동하는 것보다.

Sass에는 두 가지 구문이 있습니다. 가장 일반적으로 사용되는 구문은 "SCSS"( "Sassy CSS"용)로 알려져 있으며 CSS3 구문의 상위 집합입니다. 이는 모든 유효한 CSS3 스타일 시트도 유효한 SCSS임을 의미합니다. SCSS 파일은 .scss 확장자를 사용합니다.

두 번째로 오래된 구문은 들여 쓰기 구문 (또는 ".sass")으로 알려져 있습니다. Haml의 간결함에서 영감을 받아 CSS와의 유사성보다 간결함을 선호하는 사람들을위한 것입니다. 대괄호와 세미콜론 대신 줄 들여 쓰기를 사용하여 블록을 지정합니다. 들여 쓰기 구문의 파일은 확장자 .sass를 사용합니다.

• 추가 정보 :

CSS 전처리 기란?

CSS 자체에는 재사용 가능하고 체계적인 코드를 작성하는 데 필요한 복잡한 논리와 기능이 없습니다. 그 결과 개발자는 한계에 얽매이고 특히 광범위한 코드와 여러 CSS 스타일 시트가 포함 된 대규모 프로젝트에서 작업 할 때 코드 유지 관리 및 확장성에 극심한 어려움에 직면하게됩니다. 이것이 CSS 전처리 기가 구출되는 곳입니다.

CSS 전처리 기는 자체 스크립팅 언어를 통해 기본 바닐라 CSS의 기본 기능을 확장하는 데 사용되는 도구입니다. 변수, 함수, 믹스 인, 코드 중첩 및 상속과 같은 복잡한 논리 구문을 사용하여 몇 가지 이름을 지정하여 바닐라 CSS를 강화할 수 있습니다. CSS 전처리기를 사용하여 원활하게 작업을 자동화하고, 재사용 가능한 코드 스 니펫을 구축하고, 코드 반복 및 부풀림을 방지하고, 잘 구성되고 읽기 쉬운 중첩 된 코드 블록을 작성할 수 있습니다. 그러나 브라우저는 기본 바닐라 CSS 코드 만 이해할 수 있으며 CSS 전 처리기 구문을 해석 할 수 없습니다. 따라서 복잡하고 고급 전 처리기 구문은 먼저 네이티브 CSS 구문으로 컴파일되어야하며, 그런 다음 브라우저 간 호환성 문제를 피하기 위해 브라우저에서 해석 할 수 있습니다.

이 기사에서는 현재 전 세계 개발자가 사용하는 가장 인기있는 CSS 전 처리기 3 개 (예 : Sass, LESS 및 Stylus)를 살펴 보겠습니다. Sass vs LESS vs Stylus 중 승자를 결정하기 전에 먼저 자세히 알아보십시오.

Sass – 구문 적으로 멋진 스타일 시트

Sass는 "Syntactically Awesome Style Sheets"의 약어입니다. Sass는 세계에서 가장 인기있는 CSS 전처리 기일뿐만 아니라 2006 년에 Hampton Catlin이 출시하고 나중에 Natalie Weizenbaum이 개발 한 가장 오래된 CSS 전 처리기 중 하나입니다. Sass는 Ruby 언어로 작성되었지만 Precompiler LibSass를 사용하면 Sass를 다른 언어로 구문 분석하고 Ruby에서 분리 할 수 ​​있습니다. Sass는 초보자를 위해 인터넷에서 사용할 수있는 방대한 활동 커뮤니티와 광범위한 학습 리소스를 보유하고 있습니다. 성숙함, 안정성 및 강력한 논리적 능력 덕분에 Sass는 경쟁 업체보다 앞서 CSS 전 처리기의 선두에 자리 잡았습니다.

Sass는 Sass 또는 SCSS를 사용하여 2 개의 구문으로 작성할 수 있습니다. 둘의 차이점은 무엇입니까? 알아 보자.

구문 선언 : Sass 대 SCSS

• SCSS는 Sassy CSS를 의미합니다. Sass와 달리 SCSS는 들여 쓰기를 기반으로하지 않습니다.
• .sass 확장자는 Sass의 원래 구문으로 사용되는 반면 SCSS는 .scss 확장자를 가진 새로운 구문을 제공합니다.
• Sass와 달리 SCSS에는 CSS와 마찬가지로 중괄호와 세미콜론이 있습니다.
• SCSS와는 달리 Sass는 CSS와 상당히 다르기 때문에 읽기가 어렵습니다. 이것이 SCSS가 Sass의 힘을 즐기면서 동시에 읽기 쉽고 네이티브 CSS와 매우 유사하므로 더 권장되는 Sass 구문 인 이유입니다.

Compiled CSS 코드와 함께 Sass 대 SCSS 구문을 사용하는 아래 예제를 고려하십시오.

Sass SYNTAX
    $font-color: #fff
    $bg-color: #00f

    #box
      color: $font-color
      background: $bg-color

SCSS SYNTAX
    $font-color: #fff;
    $bg-color: #00f;

    #box{
      color: $font-color;
      background: $bg-color;
    }

두 경우 모두 Sass 든 SCSS 든 컴파일 된 CSS 코드는 동일합니다.

#box {
      color: #fff;
      background: #00f;

Sass 사용

틀림없이 가장 인기있는 프런트 엔드 프레임 워크 인 Bootstrap은 Sass로 작성되었습니다. 버전 3까지 부트 스트랩은 LESS로 작성되었지만 부트 스트랩 4는 Sass를 채택하여 인기를 높였습니다. Sass를 사용하는 몇몇 대기업은 Zapier, Uber, Airbnb 및 Kickstarter입니다.

LESS – 린 (Leaner) 스타일 시트

LESS는 "Leaner Stylesheets"의 약자입니다. 2006 년 Sass가 처음 출시 된 지 3 년 후인 2009 년 Alexis Sellier에 의해 출시되었습니다. Sass는 Ruby로 작성되었지만 LESS는 JavaScript로 작성되었습니다. 실제로 LESS는 믹스 인, 변수, 중첩 및 규칙 집합 루프를 사용하여 네이티브 바닐라 CSS의 기능을 확장하는 JavaScript 라이브러리입니다. Sass vs LESS는 열띤 논쟁이었습니다. LESS가 Sass의 가장 강력한 경쟁자이며 두 번째로 큰 사용자 기반을 가지고 있다는 것은 놀라운 일이 아닙니다. 그러나 부트 스트랩이 부트 스트랩 4의 출시와 함께 Sass를 위해 덜 버려 졌을 때, LESS는 인기가 떨어졌습니다. Sass보다 LESS의 몇 가지 단점 중 하나는 기능을 지원하지 않는다는 것입니다. Sass와 달리 LESS는 @를 사용하여 @media 및 @keyframes와 혼동을 일으킬 수있는 변수를 선언합니다. 하나, Sass 및 Stylus 또는 다른 전처리기에 비해 LESS의 주요 이점 중 하나는 프로젝트에 쉽게 추가 할 수 있다는 것입니다. NPM을 사용하거나 Less.js 파일을 통합하여이를 수행 할 수 있습니다. 구문 선언 : LESS .less 확장자를 사용합니다. LESS의 구문은 $ 기호 대신 LESS가 @를 사용한다는 점을 제외하면 SCSS와 매우 유사합니다.

@font-color: #fff;
    @bg-color: #00f

    #box{
      color: @font-color;
      background: @bg-color;
    }

COMPILED CSS
    #box {
        color: #fff;
        background: #00f;
      }

LESS 의 사용법 버전 4가 출시 될 때까지 인기있는 부트 스트랩 프레임 워크는 LESS로 작성되었습니다. 그러나 SEMANTIC UI라는 또 다른 인기있는 프레임 워크는 여전히 LESS로 작성되었습니다. Sass를 사용하는 대기업 중에는 Indiegogo, Patreon 및 WeChat이 있습니다.

첨필

스타일러스는 2010 년에 전 Node JS 개발자 TJ Holowaychuk에 의해 출시되었습니다. Sass 출시 후 거의 4 년, LESS 출시 1 년 후였습니다. 스타일러스는 Node JS로 작성되었으며 JS 스택과 완벽하게 맞습니다. 스타일러스는 Sass의 논리적 기량과 LESS의 단순성에 크게 영향을 받았습니다. Stylus는 Node JS 개발자들에게 여전히 인기가 있지만 자체적으로 상당한 점유율을 차지하지 못했습니다. Sass 또는 LESS에 비해 Stylus의 한 가지 장점은 매우 강력한 내장 기능으로 무장하고 무거운 컴퓨팅을 처리 할 수 ​​있다는 것입니다.

구문 선언 : Stylus .styl 확장자를 사용합니다. Stylus는 구문 작성에있어 상당한 유연성을 제공하고 네이티브 CSS를 지원하며 대괄호 콜론과 세미콜론을 생략 할 수 있습니다. 또한 Stylus는 변수 정의에 @ 또는 $ 기호를 사용하지 않습니다. 대신 Stylus는 할당 연산자를 사용하여 변수 선언을 나타냅니다.

네이티브 CSS처럼 작성된 스타일러스 구문

font-color = #fff;
bg-color = #00f;

#box {
    color: font-color;
    background: bg-color;
}

또는

컬리 브레이스가없는 스타일러스 구문

font-color = #fff;
bg-color = #00f;

#box 
    color: font-color;
    background: bg-color;

또는

콜론과 세미콜론이없는 스타일러스 구문

font-color = #fff
bg-color = #00f

#box 
    color font-color
    background bg-color