SASS: 현대 웹 개발을 위한 궁극적인 가이드

CSS의 수명이 발전함에 따라 현재 스타일 시트 언어에서 제공하는 것보다 더 나은 워크 플로뿐만 아니라 조직을 더 잘 제어하는 ​​것이 점점 더 중요해졌습니다. 이 요구는 LESS, PostCSS와 같은 CSS 전처리기에 의해 채워졌으며 아마도 가장 인기있는 말대꾸. 이 게시물에서는 전처리 기가 무엇인지, CSS 워크 플로에 긍정적 인 영향을 미칠 수있는 이유와 Sass 사용을 시작하는 방법에 대해 살펴 보겠습니다.

CSS 전처리 기란 무엇입니까?

CSS 전처리 기는 기본적으로 약간의 구문 변형이있는 CSS 코드를 일반 CSS3로 바꾸는 스크립팅 언어입니다. Sass의 경우 Node.js를 통해 JavaScript와 같은 다른 언어를 사용하여 사용할 수있는 포트가 있지만 원래 Ruby로 작성된 스크립트입니다.

Sass를 시작하는 방법

Sass를 사용하는 데는 여러 가지 옵션이 있습니다. 명령 줄에는 원래 Ruby gem을 사용하는 옵션이 있습니다. Node.js 포트, 또는 Gulp 또는 Grunt와 같은 작업 실행기를 사용합니다. GUI 사용을 선호하는 경우 몇 가지 권장 사항에는 Compass, CodeKit 또는 Hammer가 있습니다.

이 모든 프로그램이하는 일은 하나의 스타일 시트에서 Sass 코드를 가져 오는 것입니다. .sass or .scss 파일), 그런 다음 일반 파일로 컴파일하십시오. .css 파일. 각 옵션에는 장단점이 있지만 어디서부터 시작해야할지 확실하지 않은 경우 GUI 프로그램 중 하나를 시작하는 것이 좋습니다.

변수

Sass의 가장 유용한 기능 중 하나는 변수를 생성하는 기능입니다. 다른 적절한 프로그래밍 언어와 마찬가지로 변수에 값을 할당하여 사용할 때마다 리콜 할 수 있습니다. Sass의 변수는 $ 이름 앞에 서명하십시오. 예 :

$ mainColor : # dbcbb4;

이것은 최소한 두 가지 이유에서 유용합니다. 1. 같은 색상이나 다른 값을 재사용하고 싶을 때, 공통 스타일을 기억할 필요없이 변수를 재사용하면됩니다. 2. 여러 선택기의 값을 변경해야하는 경우 변수의 값 하나만 변경하면됩니다.

마카 배열

Sass의 또 다른 유용한 기능은 선언을 서로 중첩하는 기능입니다. 이것은 서로 다른 선언이 서로 어떻게 관련되어 있는지 보여주는 데 유용 할 수 있습니다. 예를 들어 다음을 작성하는 대신 :

.container {너비 : 800px; } .container h1 {글꼴 크기 : 40px; }

간단히 쓸 수 있습니다 :

.container {너비 : 800px; h1 {글꼴 크기 : 40px; }}

기능

Sass에는 CSS 코드를 실제로 조작 할 수있는 많은 내장 함수가 있습니다. 다음은 몇 가지 예입니다.

두 가지 색상을 함께 혼합합니다.

mix ($ primarycolor, $ secondcolor)

색상을 더 어둡게 (어디서 $amount 어둡게 할 정도의 값입니다) :

어둡게 ($ color, $ amount)

수학

또 다른 편리한 기능은 마크 업에 수학 표현식을 적용하는 기능입니다. 프로그래밍 언어에서 일반적으로 지원되는 모든 연산자 (더하기, 빼기, 나누기, 곱하기, 모듈로, 같음 및 부등식)를 사용할 수 있습니다.

한 가지주의 할 점은 가치 단위를 혼합 할 수 없다는 것입니다. 따라서 다음은 유효합니다.

$ menu-height : 100 %-20 %;

다음은 불가능합니다.

$ menu-height : 100 %-40px;

Sass의 일반적인 사용 사례

이전 게시물에서 Sass로 설정하고 파일을 표준 CSS로 변환할 수 있는 방법을 다루었습니다. 이 게시물에서 우리는 Sass를 최대한 활용하기 위한 가장 일반적인 기술 중 일부를 다룰 것입니다. 즉, 다양한 스타일 규칙을 훨씬 더 쉽게 작성할 수 있습니다.

믹스 인

다양한 CSS 속성에 대한 다양한 수준의 브라우저 지원으로 인해 브라우저 간 호환성을 보장하기 위해 속성에 다른 공급 업체 접두사를 제공해야하는 것이 일반적입니다 (특히 Internet Explorer에 대한 지원이 필요한 경우).

P {
  -웹킷 변환 : scale (2); 
      -ms- 변환 : scale (2);
          변형 : scale (2);
}

 

이는 다양한 수준의 지원으로 각 부동산에 대해 반복적으로 수행해야하는 고통이 될 수 있습니다. Sass 사용 믹스 인 코드의 큰 부분을 반복해야 할 때마다 프로세스를 단순화 할 수 있습니다.

에 대한 코드 사용 transform 예를 들어 위의 속성을 사용하면 언제든지 재사용 가능한 믹스 인으로 쉽게 바꿀 수 있습니다. transform: scale() 규칙:

@mixin transform-scale ($ x) {
    -웹킷 변환 : scale ($ x);
        -ms- 변환 : scale ($ x);
            변형 : scale ($ x);
}

 

위의 믹스 인을 사용하여 각각의 크기를 조정할 양을 정의합니다. transform 와 더불어 $x 논의. 이 믹스 인은 다음을 사용하여 모든 Sass 코드 블록에서 사용할 수 있습니다. @include 사전에 진술 :

P {
    @include transform-scale (2);
}

 

루프

JavaScript, PHP 또는 Python과 같은 프로그래밍 언어와 유사하게 Sass를 사용하면 for 루프, 정의 된 횟수를 반복합니다. 사용하여 정의 @for 키워드에서 Sass for 루프의 길이는 "x에서 y"또는 "x에서 y"의 두 가지 방법으로 표시 될 수 있습니다. 여기서 x 시작점이고 y 끝점입니다. 루프를 정의 할 때 through, 루프는 포함 종료 값 (예 : 1 through 10 루프에 10이 포함됩니다.) to 루프가 끝 값까지 올라가지 만 포함하지 않게됩니다 (예 : 1 to 10 1에서 9까지만 이동합니다). 사용의 예로서 1 through 10:

@for $ i 1부터 10까지 {
    .col-# {$ i} {너비 : 100 % / 10 * $ i; }
}

 

또한 @for 위의 루프는 width 10 개의 다른 CSS 클래스에 대한 계산 (각각 .col- 1에서 10 사이의 숫자가 이어집니다). 루프는 각 CSS 클래스의 너비를 100 % / 10에 클래스 번호 (1-10)를 곱한 값으로 설정합니다. 이로 인해 각 클래스에 대해 다음 규칙 세트가 생성됩니다.

.col-1 {
    폭 : 10 %;   
}
.col-2 {
    폭 : 20 %;
}
.col-3 {
    폭 : 30 %;
}
.col-4 {
    폭 : 40 %;
}
â € <
...
â € <
.col-10 {
    폭 : 100 %;
}

 

이것은 기본 그리드 구조에서 열을 정의하는 빠르고 쉬운 방법입니다.

부분

Sass로 작업 할 때 적용되는 스타일 유형에 따라 코드를 재사용 가능한 섹션이나 파일로 구성하는 것이 좋습니다 (예 : 그리드 레이아웃 용 파일, 믹스 인용 파일, 색 구성표 용 파일 등). .). Sass는 이러한 모듈 식 워크 플로우를 장려합니다. 부분. 부분은 밑줄 ()로 시작하는 Sass 파일입니다._), 예를 들어 _grid.scss. 그런 다음 모든 부분의 디렉토리를 가질 수 있으며 다음과 같이 가져올 하나의 기본 Sass 파일을 가질 수 있습니다. main.scss.

이러한 부분을 주 파일로 가져 오려면 간단히 @import 파일 맨 위에있는 문 :

// main.scss 파일
â € <
@import '그리드'
@import '믹신'

 

부분적으로 작업 할 때 밑줄이나 파일 이름 확장자를 제공 할 필요가 없습니다. Sass는 자동으로이를 감지합니다. 이렇게하면 부분을 사용하여 코드를 더 잘 구성 할 수 있습니다.

 node-sass를 사용하여 npm 스크립트에서 Sass 파일을 컴파일하는 방법

널리 사용되는 Sass 전처리기를 일반 CSS로 컴파일하는 방법을 선택할 수 있는 옵션이 많이 있지만 LibSass 엔진을 활용하는 컴파일러는 점점 더 일반화되고 있습니다. 처음에 Ruby로 작성되었지만 원래 Ruby gem이나 Compass와 같은 Ruby 기반 프로그램을 사용하여 Sass를 컴파일하면 느린 컴파일 시간과 전체 속도. 성능 불만에 대한 응답으로 원래 Sass 엔진은 거의 모든 인기 있는 프로그래밍 언어에서 Sass 엔진을 실행하는 데 사용할 수 있는 수많은 래퍼와 함께 LibSass로 C/C++에 이식되었습니다. 이 튜토리얼은 Sass 프로그래밍 언어를 소개하고 단계별 가이드도 제공합니다. npm 스크립트로 직접 Sass 코드를 컴파일하기 위해 node-sass 래퍼를 사용하는 것입니다. 참고 node-sass 다음과 함께 사용됩니다. .scss 파일보다는 .sass, 전자가 더 일반적이고 인기있는 옵션입니다.

Sass CSS 전 처리기 정보

말대꾸또는 Syntactically Awesome Style Sheets는 CSS 전 처리기의 예입니다. 반응 형 웹 개발자 한 언어로 코드를 만든 다음 CSS로 "번역"합니다. MIT에 따라 라이센스가 부여 된 Sass는 CSS 및 기능이 풍부한 프로그래밍 언어와의 호환성을 자랑하며 스타일 시트와 컴퓨터 프로그램의 특성을 완벽하게 결합합니다. 이런 의미에서 누구나 충분한 연습을 통해 Sass를 작동하는 방법을 배울 수 있지만 프로그래밍에 익숙한 웹 사이트 개발자에게는 강력한 도구입니다. 또한 Sass 언어에는 Sassy CSS (SCSS로 약칭)와 간단히 Sass라는 두 가지 약간의 변형이 있습니다. Sassy CSS는 구문 측면에서 CSS와 훨씬 더 유사하지만 Sass는 앱 개발자 편리함을 더 걱정하는 사람들. 후자의 옵션은 중괄호와 세미콜론을 생략하고 대신 들여 쓰기를 기반으로 코드를 읽습니다.

대부분의 개발자와 온라인 문서 소스는 CSS와 유사하기 때문에 SCSS 구문을 사용합니다. 또한 웹 브라우저는 Sass 또는 SCSS 파일을 읽지 않습니다. 따라서 웹 사이트를 인터넷에 게시하기 전에 모든 SCSS / Sass 파일을 CSS로 변환해야합니다. 이를 수행하는 방법에 대한 설명은 아래의 "SCSS를 CSS 파일로 변환"을 참조하십시오.

Sass 설정

Node.js 및 NPM 설치

Node.js가 아직 설치되어 있지 않은 경우 최신 버전을 다운로드 할 수 있습니다. 공식 사이트. 이 용어에 익숙하지 않은 경우 Node.js는 Javascript 용으로 널리 사용되는 런타임 환경입니다. Node는 개발자에게 오픈 소스 Javascript 코드에 대한 액세스 권한을 부여하는 공식 Node 패키지 관리자 인 npm이 미리 패키지되어 있으므로 동시에 설치됩니다. (관심이 있거나 npm을 별도로 설치해야하는 경우 공식 웹 사이트 npm의 경우.) npm이 성공적으로 설치되었는지 확인하려면 다음을 실행하십시오. npm -v 터미널에서 현재 컴퓨터에있는 npm의 버전을 확인합니다. 이 블로그 게시물이 업데이트되었을 때 최신 버전의 npm이 출시되었습니다. 6.7.0.

node-sass 설치

npm을 설치했으면 node-sass를 설치할 차례입니다. 실행하면됩니다. npm install -g node-sass 터미널에서 패키지를 전역으로 설치하거나 (즉, 전체 시스템에서 사용 가능) npm install node-sass ~없이 -g 현재 디렉토리에만 설치하려면 플래그를 지정하십시오.

프로젝트 설정 package.json

가정 node-sass 이제 전역 적으로 설치되었으므로 Sass 파일을 볼 프로젝트 디렉토리를 만들거나 선택할 차례입니다. 프로젝트 디렉토리로 이동하고 package.json 파일, 실행 npm init.

프로젝트에 대한 다양한 세부 정보를 입력하라는 메시지가 표시됩니다. package name, version, description 및 기타 세부 사항. 지금이 정보를 입력하거나 Enter 이러한 각 프롬프트에 대해 나중에 입력하십시오.

각 프롬프트를 순환 한 후 입력 된 정보 (또는 정보가 비어 있음)를 확인하는 프롬프트가 표시됩니다. 한 번 더 Enter 키를 누르고 package.json 파일이 생성됩니다.

추가 node-sass 스크립트

열기 package.json 선택한 텍스트 편집기에서 파일을 열고 다음 줄을 "scripts" 목적:

"scss": "node-sass --watch assets/scss -o assets/css"

위의 줄은 npm 스크립트를 실행하고 변경 사항을 .scss 파일 assets/scss 디렉토리에있는 해당 CSS 파일에 변경 사항을 커밋합니다. assets/css 예배 규칙서. 그에 따라 디렉토리 경로를 변경해야합니다.

당신의 편집 package.json 파일은 다음과 같아야합니다.

{
  "이름": "sass-ex",
  "버전": "1.0.0",
  "기술": "",
  "본관": "index.js",
  "스크립트"{
    "테스트": "에코 \"오류 : 지정된 테스트 없음 \ "&& 종료 1",
    "scss": "노드 엉덩이" --손목 시계 자산/scss -o 자산/CSS를"
  },
  "저자": "",
  "특허": "가다"
}

 

파일을 저장하고 닫습니다. 이제 프로젝트 디렉터리의 루트에서 다음을 실행합니다. npm run scss 변경 사항을 감시하기 시작합니다. .scss 파일.

Sass를 설치하는 다른 방법

Sass를 설치하는 다양한 대체 방법이 있다는 점에 유의하는 것이 중요합니다. 예를 들어, 다음과 같은 유료 및 무료 애플리케이션을 통해 Sass를 설치할 수 있습니다. 코드킷 및 스카우트 앱. 또한 다음에서 패키지를 다운로드하여 Sass를 설치할 수도 있습니다. 공식 Github 사이트 경로에 직접 추가합니다.

Sass를 사용한 디자인 개요

앞서 언급했듯이 Sass는 웹 사이트 개발자를위한 강력한 도구가되는 많은 유익한 기능을 제공합니다. Sass는 기본 프로그래밍 언어에서 이러한 특성을 채택했으며이 중 일부는이 블로그 게시물에서 아래에서 설명합니다. 이러한 기능에 대한 자세한 가이드와 코드에서 구현하는 방법을 보려면 공식 가이드를 방문하세요. Sass 웹 사이트.

변수

프로그래밍에서와 마찬가지로 스타일 시트 전체에서 Sass에서 변수를 만들고 구현할 수 있습니다. 웹 사이트 전체에서 사용하려는 특정 스타일 (예 : 글꼴 패키지 유형, 색상 등)이있는 경우 변수에 저장하고 스타일 시트 전체에서 사용할 수 있으므로 매우 편리합니다. Sass에서 변수를 선언하는 것은 개념적으로 Javascript와 동일하기 때문에 프로그래머에게 특히 간단합니다. 예를 들어 $primary-color: #525; ($ variable : value;) 스타일 시트 시작 부분에 다음을 입력하면됩니다. $primary-color 모든 색상 값.

마카 배열

HTML과 가장 널리 사용되는 프로그래밍 언어는 들여 쓰기 또는 중첩을 사용하여 깔끔한 구조를 유지합니다. 반면에 전통적인 CSS 스타일 시트는 다소 길고 복잡한 다양한 스타일 목록입니다. 그러나 Sass를 사용하면 다른 코드 내에 다른 코드 블록을 배치하여 스타일 시트의 가독성을 높일 수 있습니다. 예를 들어, 기존 탐색 모음의 스타일 내부에서 목록 항목의 배치와 텍스트 스타일을 디자인하기위한 코드를 중첩 할 수 있습니다. 중첩을 통한 이러한 시각적 코드 계층 구조는 많은 개발자가 웹 사이트에서 Sass를 사용하는 또 다른 이유입니다.

SASS 파일 가져 오기

웹 사이트와 HTML 문서가 더 복잡 해짐에 따라 일반적으로 CSS 파일이 동시에 증가합니다. 그러나 더 많은 스타일을 만들면 결국 스타일 시트가 어수선 해져서 ​​유지 관리하고 정돈 된 방식으로 작성하기가 어려워집니다. 다행히 Sass를 사용하면 스타일 시트를 여러 Sass 파일로 나눌 수 있습니다. 웹 사이트를 시작할 준비가되면 여러 SCSS 파일을 하나의 마스터 스타일 시트로 결합한 다음 가져 오기 기능을 통해 HTML 문서에 연결할 수 있습니다. CSS와 달리 단일 Sass "마스터"스타일 시트를로드하려면 하나의 HTTP 요청 만 필요합니다. CSS에서 클라이언트는 가져온 각 스타일 시트에 대해 HTTP 요청을합니다. 스타일 시트를 가져 오려면 키워드를 작성하면됩니다. @import 그 뒤에 따옴표로 묶인 하위 스타일 시트의 이름 (@import "스타일 시트";). 이것은 웹 사이트 관리 프로세스를 단순화하는 Sass의 또 다른 핵심 기능입니다.

믹스 인 사용

프로그래밍 경험이있는 대부분의 사람들은 프로그램에서 함수 나 방법을 작성하는 데 익숙합니다. 그러나 기존 CSS 파일은이 기능을 지원하지 않습니다. 다행스럽게도 Sass를 사용하면 개발자가 믹스 인 또는 함께 그룹화되어 스타일 시트의 어느 곳에서나 반복적으로 사용할 수있는 CSS 선언 그룹을 작성할 수 있습니다. 믹스 인은 본질적으로 함수와 동일합니다. 입력 값을 받아 믹스 인 내부에 그룹화 된 CSS 선언에 연결할 수 있습니다. 믹스 인을 만들려면 간단히 @mixin mixinName(value) 입력 된 값을 사용하는 CSS 선언이 이어집니다. 스타일 시트에서이 믹스 인을 호출하려면 키워드를 작성하세요. @include 믹스 인의 이름과 값 (해당되는 경우)이 뒤 따릅니다. Sass의 믹스 인은 의심 할 여지없이 덜 반복적 인 코드를 생성하여 강력하고 효율적인 웹 사이트 디자인을위한 길을 열었습니다.

상속 및 기타 지시문 사용

Sass로 웹 사이트 개발을 통해 구현할 수있는 또 다른 강력한 프로그래밍 기능은 상속입니다. 이를 Sass에서 "확장"선택기로 참조 할 수 있습니다. 의 사용으로 @extend, 선택기는 다른 선택기의 CSS 속성을 상속 할 수 있으므로 반복적 인 코드의 필요성을 제거하여 코드를 대폭 단순화 할 수 있습니다. 이렇게하면 키워드로 선택기를 "설정"하여 스타일 시트에 더 많은 유연성을 제공합니다. @extend. 이 기능을 사용하려면 % 이 선택기의 CSS 속성을 확장 할 수 있음을 나타냅니다. 이제 다른 선택기를 만들 때 @extend %selectorName; 그 속성은 새로운 선택자에 의해 상속됩니다.

동안 @extend 함수는 Sass 옹호자들 사이에서 매우 인기가 있으며, Sass 언어에 통합 된 많은 기본 프로그래밍 함수가 있습니다. 예를 들어, 대부분의 프로그래머는 조건문 사용에 익숙합니다. 이제 Sass 개발자는 @if 및 @else 훨씬 더 강력한 웹 사이트 개발로 이어질 지침. 마찬가지로 기존 for 및 while 루프에 익숙한 사용자는 이러한 Java 함수를 @for 및 @while 가이드 라인.

연산자 사용

프로그래머는 항상 수학적으로 구동되는 알고리즘을 사용합니다. 반면에 전통적인 CSS 디자인과 관련된 수학의 사용은 거의 없습니다. 운 좋게도 Sass는 개발자가 기본 연산자 (+,-, *, /, %)를 사용하여 CSS 선언에서 픽셀 또는 백분율 값을 계산할 수 있도록합니다. 더 복잡한 웹 사이트를 만들고자하는 디자이너를위한 작지만 매우 실용적인 도구입니다. Sass의 공식 문서에 따르면 Sass 개발자가 사용할 수있는 수학 기반 함수 라이브러리도 있습니다. 실제로 대부분의 프로그래머는 아마도 라이브러리에있는 이러한 많은 기능에 익숙 할 것입니다. 다음과 같은 기능이 포함됩니다. abs($number) 절대 값을 찾으려면 min($numbers…) 여러 값 중 가장 작은 값을 찾고 random() 임의의 숫자 값을 반환합니다. Sass에서 사용할 수있는 모든 기능을 보려면 공식 문서 사이트 Sass를 위해.

SCSS에서 CSS 파일로 변환

Sass를 사용하여 HTML 요소 디자인을 마친 후에는 마침내 웹 사이트를 게시 할 차례입니다. 그러나 웹 사이트를로드 할 때 SCSS 파일을 직접 사용할 수 없습니다. 대신 파일을 CSS로 변환해야합니다. 명령 줄을 통해 설치할 수있는 Sass gem을 사용하면 다양한 실행 파일을 사용할 수 있습니다. Sass gem을 설치하지 않은 경우 다른 소스로 Sass 실행 파일을 실행할 수도 있습니다.

• sass or $ bundle exec sass: 소스 Sass 파일을 CSS 파일로 변환하는 데 사용됩니다. 운영 sass --help 자세한 지침을 보려면.
• sass-convert or $ bundle exec sass-convert: Sass, SCSS 및 CSS 파일 간 변환에 사용됩니다. 운영 sass-convert --help 자세한 지침은. 이것은 SCSS 형식으로 전환하려는 기존 프로젝트를위한 완벽한 실행 파일입니다.

기타 CSS 전 처리기

첨필

Sass를 모델로 한 Stylus는 CSS 전처리기에 대한 또 다른 인기있는 대안입니다. 많은 사용자를 Stylus로 끌어들이는 특히 유용한 기능은 매우 동적이고 유연한 언어와 구문입니다. 사용자는 중괄호, 콜론 및 세미콜론과 같은 구두점을 생략 할 수 있습니다. 특정 키워드를 생략 할 수도 있습니다 (예 : @mixin) 원하는 경우. Sass와 유사하게 Stylus는 함수 / 믹신, 변수, 반복 및 상속과 같은 많은 강력한 프로그래밍 기능을 통합합니다. Stylus의 특히 유용한 기능은 다음과 같이 표시되는 CSS 리터럴입니다. @css. 이 키워드는 Stylus가 요청을 수용 할 수없는 경우 CSS 유형으로 되 돌리는 데 사용할 수 있습니다.

적게

Leaner Stylesheets의 약자 인 Less는 대안과 매우 유사한 또 다른 CSS 전 처리기 옵션입니다. 많은 내장 프로그래밍 기능을 제공합니다. 여기에는 변수 생성, 믹스 인 사용, 코드 중첩 및 내장 함수 라이브러리 활용이 포함됩니다. Stylus와 달리 Less는 구문이 더 엄격합니다. 실제로 기존 CSS 코드의 구문을 실질적으로 복제합니다. 개인적 선호도에 따라이를 장점 또는 단점으로 볼 수 있습니다.

 

SASS 대 LESS

SASS와 LESS가 무엇인지 이해하려면 몇 가지 기본 사항을 살펴봐야 합니다. CSS 전처리기에 대해 논의하는 것으로 시작하겠습니다. CSS 전처리는 프로그래머가 한 언어로 코드를 작성할 때 CSS를 확장하는 데 사용하는 스크립팅 언어입니다. 그런 다음 CSS 전처리기가 이를 CSS로 컴파일합니다. SASS는 이것의 가장 인기있는 예입니다. CSS LESS 및 Stylus와 같은 다른 것들은 덜 알려져 있습니다.

SASS란 무엇입니까?

SASS는 사용자가 변수, 인라인 가져오기, 중첩 규칙 등과 같은 여러 항목을 코드에 추가할 수 있는 Synthetically Awesome Style Sheets의 약자입니다. SASS는 또한 사용자가 이러한 시트를 더 쉽게 처리할 수 있도록 하는 코딩 프로세스를 통해 물건을 정리할 수 있도록 도와줍니다. SASS는 다음과 함께 작동합니다. CSS의 모든 버전 그러나 소유자는 시스템에 Ruby를 설치해야 합니다.

SCSS

마찬가지로 SCSS는 브라우저용 CSS 스타일 시트를 조합하는 Ruby의 특수 파일 유형입니다. 따라서 SCSS는 CSS와 비슷하지만 코딩을 위한 형식이 더 우수하다고 말할 수 있습니다.

LESS란?

LESS는 Learner Style Sheets의 약자이며 CSS에서 사람들이 사용하는 이전 버전과 호환되는 언어 확장입니다. CSS와 똑같이 생겼기 때문에 LESS를 배우는 것은 상당히 쉽습니다. LESS를 사용하여 규칙 내부에 규칙을 중첩할 수 있습니다. 그 이유는 규칙이 외부 규칙 선택기 내에서 적용되기 때문입니다.

이를 통해 개발자와 디자이너는 문서의 DOM 구조에 따라 고유한 CSS 규칙을 추가할 수 있습니다. 이러한 중첩 규칙을 사용하면 코드를 실행할 때 더 쉽게 이해하고 따를 수 있습니다.

LESS 또는 SAAS: 무엇을 사용해야 합니까?

LESS가 SAAS보다 나은지 또는 그 반대인지 이해하기는 매우 어렵지만 기능을 비교하여 어떤 사용자가 선택해야 하는지에 대한 명확한 아이디어를 얻을 수 있습니다. 어느 것이 더 나은지 더 잘 알기 위해 SASS와 LESS를 비교 분석해 보겠습니다.

SASS와 LESS는 모두 유사한 기능과 믹스인을 사용합니다. 그러나 SASS는 Ruby를 기본 언어로 사용합니다. 반면 LESS는 코딩을 위한 자바스크립트. 코딩 언어의 차이는 여전히 이러한 언어에 우위를 제공하지 않습니다.

LESS는 사용자가 특정 조건에서만 믹스인을 사용할 수 있도록 합니다. 이것은 유용한 기능처럼 들리지만 LESS의 논리적 링크 제한도 설명합니다. SASS는 다른 접근 방식을 제공합니다. 예를 들어 SASS를 사용하면 프로그래밍 중에 루프와 대소문자 구분을 활용할 수 있습니다.

SASS는 사용자에게 SCSS 또는 들여쓰기된 구문을 사용할 수 있는 자유를 제공하여 CSS 규칙을 따르거나 벗어날 수 있는 자유를 제공합니다. 그러나 LESS의 코드는 자동으로 CSS의 상위 집합입니다. SASS는 개발 ​​커뮤니티에서 더 인기가 있지만 그 기능 때문만이 아니라 더 오래된 언어이기 때문입니다.

SASS 또는 SCSS 또는 LESS 중 어느 것이 더 낫습니까?

SASS, SCSS 및 LESS의 개별 특성을 살펴보고 이러한 CSS 확장 중 개발자에게 더 나은 것이 무엇인지 알아보겠습니다.

SASS

• SASS는 CSS의 반복을 줄여 시간을 절약하는 데 도움이 되며 CSS의 확장입니다. Ruby 언어로 코딩된 CSS의 상위 집합입니다.
• SASS에는 구문이 있으며 읽을 수 있는 형식으로 CSS로 컴파일합니다.
• SASS는 구문 오류를 보고할 수 있습니다.
• 사용자가 자신의 기능을 만들고 사용자 컨텍스트에서 사용할 수 있도록 합니다.
• SASS는 혼합을 사용하여 사용하고 재사용할 수 있는 스타일을 만듭니다.
• SASS는 지식 기반에 더 중점을 두므로 시각적 요소가 없습니다.

적게

• LESS는 사용자가 웹 사이트의 스타일 시트를 유지, 사용자 정의, 관리 및 처리하는 데 도움이 됩니다. 동적 언어이며 여러 브라우저에서 작동합니다.
• 중복을 줄이는 데 사용되는 CSS의 상위 집합으로 만드는 JavaScript에서 개발됨
• 정확한 오류와 오류 위치를 설명합니다.
• 색상, 라운드 함수, ceil 함수 등을 변경할 수 있는 JavaScript를 통해 값 조작을 돕습니다.
• LESS는 Mixens도 사용합니다.
• LESS는 따라하기 쉬운 단계와 함께 매력적인 비주얼로 문서를 제공합니다.

SCSS

• SCSS는 CSS에서 추가 기능을 허용하는 SASS용 특수 유형입니다.
• SCSS에는 구문 코드가 필요하지 않습니다.
• SCSS는 SASSS와 달리 엄격한 들여쓰기를 따를 필요가 없습니다.
• SCSS는 쓰기 스타일에서 SASS와 유사하지만 대괄호와 세미콜론을 사용해야 합니다.
• 파일 확장자가 있습니다.
• SCSS는 SASS에 비해 개발자 커뮤니티가 작기 때문에 SCSS에 대한 지원도 낮습니다.

부트스트랩은 SASS 또는 그 이하를 사용합니까?

Bootstrap은 전 세계적으로 개발 커뮤니티에서 인기 있는 선택이며 LESS는 Boostrap 3 동안 시장에 큰 영향을 미쳤기 때문에 SASS 대안을 제공했습니다. 그러나 Boostrap 4를 고려하면 상황이 완전히 바뀝니다. Boostrap 4는 SASS를 완전히 사용하기 때문입니다. Boostrap의 소스 코드가 SAAS를 사용하는 것은 이번이 처음입니다.

따라서 SASS는 미래를 위한 보다 안전한 고려 사항이라고 해도 과언이 아닙니다. 전문가들은 SASS 사용자 수가 LESS 사용자에 비해 거의 두 배에 달하기 때문에 Boostrap이 이러한 과감한 조치를 취했다고 생각합니다.

왜 더 많은 개발자가 CSS 대신 LESS 및 SASS를 사용합니까?

최근 시장 동향 더 많은 개발자가 다양한 이유로 CSS 대신 LESS 및 SASS를 사용하고 있음을 보여줍니다. 예를 들어 시작하는 모든 프로젝트에는 몇 가지 CSS 규칙만 필요하지만 프로젝트가 진행됨에 따라 규칙이 복잡해집니다. 이것은 CSS를 더 고급 프로젝트에 대해 배우고 적응하기 어렵게 만듭니다. 따라서 사람들은 생산 준비 기능을 사용할 수 있는 LESS 및 SASS와 같은 옵션을 선호합니다.

마찬가지로 CSS를 통한 개발은 시간이 많이 걸리고 작업을 완료하는 데 필요한 평균 시간이 늘어납니다. JavaScript와 같은 다른 언어는 발전에 대해 소통하기 위해 정기적으로 회의를 개최하지만 CSS에는 그런 것이 없습니다. 이 모든 것들이 CSS보다 LESS와 SASS를 훨씬 더 나은 대안으로 만듭니다.

즉, SASS와 LESS가 개발 세계에서 중요한 역할을 한다는 것은 분명합니다. SASS는 LESS보다 일찍 업계에 왔지만 여전히 인기가 있습니다. 이러한 확장은 모두 장단점이 있으며 모두 사용자가 이를 활용하는 방법에 따라 다릅니다.

결론

대체로 Sass는 웹 사이트 개발자 기본적인 프로그래밍 기능으로 웹 디자인을 향상시키려는 사람들. 설치가 간단 할뿐만 아니라 Sass 언어와 구문을 빠르게 배울 수 있습니다.

믹스인 및 변수와 같은 다양한 프로그래밍 기능과 Sass의 시각적 계층 구조는 보다 효율적이고 유지 관리 가능한 스타일시트를 만듭니다.

이 기사가 위에서 설명한 최첨단 기술을 실험하는 데 도움이 되기를 바랍니다.