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

는 를 를 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는 다음을 위한 특별한 파일 형식입니다.SASS, 루비로 작성되어 조립하는 프로그램.CSS, 용일트및용,용및e,SASS에은가을다다s가에 많은 추가 합니다.CSS처럼,를,더은이다수쓸을나다수쓸g,ehes을럼,den이CSS점점 더 빨라집니다.
SCSS 파일은 서버가 웹 앱을 실행하여 기존의 파일을 출력함으로써 처리됩니다.CSS당신의 브라우저가 이해할 수 있게 해줍니다.

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

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

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

변수 정의 오른쪽:

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

모든 답변은 좋으나 질문은 답변과 조금 다릅니다.

"새스에 대해서" SCSS가 CSS와 어떻게 다릅니까?": sscs는 CSS3 구문이 잘 형성되어 있습니다.sass preprocessor를 사용하여 이를 만듭니다.

CSS 대신 SCSS를 사용하면 동일하게 작동합니까?네. 만약 당신의 아이디어가 sass 전처리기를 지원한다면요.똑같이 작동할 겁니다

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

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

---

• 추가 정보:

---

CSS 전처리기란?

CSS 자체에는 재사용 가능하고 체계화된 코드를 작성하는 데 필요한 복잡한 논리와 기능이 없습니다.결과적으로 개발자는 한계에 구속되어 코드 유지보수 및 확장성에서 특히 광범위한 코드와 여러 CSS 스타일시트를 포함하는 대규모 프로젝트를 수행할 때 극도의 어려움에 직면하게 됩니다.여기가 CSS Preprocessor들이 구하러 오는 곳입니다.

CSS Preprocessor는 자체 스크립팅 언어를 통해 기본 바닐라 CSS의 기본 기능을 확장하는 데 사용되는 도구입니다.변수, 함수, 믹스인, 코드 네스팅, 상속과 같은 복잡한 논리 구문을 사용하여 바닐라 CSS를 오버차지하는 데 도움이 됩니다.CSS Preprocessor를 사용하면 사소한 작업을 원활하게 자동화하고 재사용 가능한 코드 스니펫을 구축하며 코드 반복 및 팽만감을 방지하고 잘 구성되고 읽기 쉬운 중첩 코드 블록을 작성할 수 있습니다.그러나 브라우저는 네이티브 바닐라 CSS 코드만 이해할 수 있으며 CSS Preprocessor 구문을 해석할 수 없습니다.따라서 복잡하고 고급화된 Preprocessor 구문을 먼저 기본 CSS 구문으로 컴파일해야 하며, 이 구문은 브라우저 호환성 문제를 방지하기 위해 브라우저에서 해석할 수 있습니다.각기 다른 Preprocessor들이 고유한 구문을 가지고 있지만 결국 모든 구문이 동일한 네이티브 CSS 코드로 컴파일됩니다.

기사에서 앞으로 Sass, LESS, Stylus 등 전 세계 개발자들이 현재 사용하고 있는 가장 인기 있는 CSS Preprocessor 3가지에 대해 알아보겠습니다.Sass vs LESS vs Stylus 중 승자를 정하기 전에 먼저 자세히 알아보겠습니다.

Sass – 통사적으로 멋진 스타일 시트

Sass는 "Syntactically Awesome Style Sheets"의 머리글자입니다.Sass는 세계에서 가장 인기 있는 CSS Preprocessor일 뿐만 아니라 Hampton Catlin이 2006년에 출시하고 나중에 Natalie Weizenbaum이 개발한 가장 오래된 CSS Preprocessor 중 하나입니다.Sass는 루비 언어로 쓰이지만 프리컴파일러 LibSass를 사용하면 Sass를 다른 언어로 구문 분석하여 루비에서 분리할 수 있습니다.Sass는 초보자들을 위해 인터넷에서 이용할 수 있는 광범위한 활동적인 커뮤니티와 광범위한 학습 자원을 보유하고 있습니다.Sass는 성숙도, 안정성 및 강력한 논리적 역량 덕분에 경쟁업체보다 앞서 CSS Prep프로세서의 선두로 자리매김했습니다.

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

구문 선언:Sass vs SCSS

• SCSS는 Sassy CSS의 약자입니다.Sass와 달리 SCSS는 들여쓰기를 기반으로 하지 않습니다.
• .sass 확장자는 Sass의 원래 구문으로 사용되는 반면, SCSS는 .sscs 확장자를 가진 더 새로운 구문을 제공합니다.
• Sass와 달리 SCSS는 CSS와 마찬가지로 곱슬곱슬한 가새와 세미콜론이 있습니다.
• Sass는 SCSS와 반대로 CSS에서 상당히 벗어나 읽기 어렵습니다.그렇기 때문에 SCSS는 읽기 쉽고 Native CSS와 밀접한 유사성을 가지면서 동시에 Sass의 힘으로 즐기기 때문에 Sass 구문을 더 권장되는 구문입니다.

컴파일된 CSS 코드와 함께 Sass vs 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의 용법

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

LESS – 린어 스타일 시트

LESS는 "Leaner Stylesheets"의 약자입니다.알렉시스 셀리어(Alexis Sellier)에 의해 2009년에 출시되었으며, 이는 2006년 Sass의 최초 출시 이후 3년 만입니다.Sass는 루비로 작성된 반면, LESS는 자바스크립트로 작성됩니다.실제로 LESS는 믹스인, 변수, 네스팅 및 규칙 집합 루프로 네이티브 바닐라 CSS의 기능을 확장하는 자바스크립트 라이브러리입니다.Sass vs LESS는 열띤 논쟁이 되어왔습니다.LESS가 Sass의 가장 강력한 경쟁자이자 두 번째로 큰 사용자 기반을 가지고 있는 것은 놀라운 일이 아닙니다.그러나 부트스트랩이 부트스트랩 4의 출시와 함께 Sass에게 덜 유리하게 덤핑되면서 LESS의 인기는 시들해졌습니다.Sass에 비해 LESS의 몇 가지 단점 중 하나는 함수를 지원하지 않는다는 것입니다.Sass와 달리 LESS는 @를 사용하여 @media 및 @keyframe과 혼동을 일으킬 수 있는 변수를 선언합니다.그러나 Sass 및 Stylus 또는 다른 전처리기에 비해 LESS의 한 가지 중요한 장점은 프로젝트에 쉽게 추가할 수 있다는 것입니다.NPM을 사용하거나 Less.js 파일을 통합하여 사용할 수 있습니다.구문 선언: LESS .less 확장자를 사용합니다.LESS의 구문은 $sign 대신 변수를 선언할 때 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로 작성되었습니다.그러나 시맨틱 UI라는 또 다른 인기 프레임워크는 여전히 LESS로 작성되어 있습니다.Sass를 사용하는 대기업 중에는 Indiegoogo, Patreon, WeChat 등이 있습니다.

스타일러스

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

구문 선언:스타일러스 .styl 확장자를 사용합니다.스타일러스는 구문 작성에 많은 유연성을 제공하며 네이티브 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

그리고 이것은 더 적습니다.

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

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

Sass는 편집 날 것에 비해 복잡한 스타일링을 다루기 쉽게 기능을 제공하는 언어입니다..css. 이러한 기능의 예로는 여러 스타일에서 다시 사용할 수 있는 변수를 정의할 수 있습니다.

이 언어에는 두 가지 대체 구문이 있습니다.

• 다음으로 끝나는 파일에 보관되는 JSON과 같은 구문입니다..scss
• 다음으로 끝나는 파일에 보관되는 YAML과 같은 구문입니다..sass

둘 중 하나는 다음으로 컴파일해야 합니다..css브라우저가 인식하는 파일.

자세한 정보는 https://sass-lang.com/ 을 참조하십시오.

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