Sass를 시작하는 것

이 기사는 CSS 워크 플로우를 간소화하기 위해 CSS 전 처리기 인 Sass의 힘을 탐구합니다. 현재 정보와 개선 된 형식으로 업데이트되었습니다

Sass : A CSS Revolution

Sass는 변수, 중첩 및 Mixins와 같은 기능으로 CSS를 향상시켜 스타일 시트를보다 관리하기 쉽고 역동적으로 만듭니다. 그것은 원래의 들여 쓰기 구문 (간결함)과 더 많은 CSS와 같은

(더 널리 채택됨)의 두 개의 구문을 제공합니다. 이 기사는 .

에 중점을 둡니다 왜 Sass를 사용합니까?

Sass는 크고 활발한 커뮤니티와 풍부한 확장 생태계를 자랑합니다. 모듈성 및 조직 기능은 대규모 프로젝트를 단순화합니다. 들여 쓰기 구문과

사이의 선택은 선호의 문제입니다. 의 CSS와의 유사성은 초보자에게 더 쉽게 만듭니다 .scss 워크 플로 및 도구 .scss

파일을 직접 편집하지 마십시오. 대신 파일을 수정 한 다음 CSS로 컴파일됩니다. 이는 빌드 프로세스 중에 또는 Livereload, Codekit (Mac-Only) 또는 Prepros (크로스 플랫폼)와 같은 GUI 도구를 사용할 수 있습니다. 이러한 도구는 변경 사항을 저장할 때 SASS를 자동으로 다시 컴파일하고 즉각적인 피드백을 위해 브라우저를 새로 고침하십시오.

Sass Coding Essentials

중첩 : Sass는 둥지 선택기를 허용하여 HTML 구조를 반영합니다. 그러나 지나치게 특정 선택기를 방지하기 위해 과도하게 깊은 둥지 (4 레벨 이상)를 피하십시오. 재사용성에 대한 모듈 식 코드 우선 순위

.scss 변수 : .scss 스타일 설정을 중앙 집중화하기 위해

를 사용하여 변수를 정의합니다. 이것은 업데이트를 단순화하고 일관성을 유지합니다

기능 및 연산자 : Sass는 표준 수학 연산자 및 색상 조작, 텍스트 처리 등을위한 내장 기능을 지원합니다.

mixins : .css 를 사용하여 재사용 가능한 스타일 블록을 만들고 .scss에 포함시킵니다. 이것은 공급 업체 접두사 또는 일반적인 스타일 패턴을 처리하는 데 특히 유용합니다.

예 : Sass Nesting (Good vs. Bad) 양호 :

• 나쁜 (과도하게 중첩) :

  예 : SASS 변수

예 : Sass Mixin (공급 업체 접두사)

• Sass 프로젝트 조직 여러 파일을 사용하여 폴더로 구성하십시오. 밑줄이있는 부분 파일 (스 니펫). 이 부분을 $variable-name: value;를 사용하여 메인

  파일로 가져옵니다. 예 :

  style.scss Compass로 Sass를 확장합니다 Compass는 SASS에 구축 된 강력한 프레임 워크로 추가 믹스 인, 유틸리티 (예 : 스프라이트 생성) 등을 제공합니다. 파일을 사용하여 구성하십시오

  나침반이있는 스프라이트 생성

  #navbar {
    width: 80%;
    height: 23px;
  
    ul { list-style-type: none; }
    li {
      float: left;
      a { font-weight: bold; }
    }
  }

  Compass는 Sprite Management를 단순화합니다. 이미지를 폴더로 구성하십시오. 를 사용하여 가져오고 또는 개별 스프라이트 함수를 사용하여 CSS 클래스를 생성하십시오. 예 : 나침반 스프라이트 생성

  이것은

  폴더의 각 이미지에 대한 CSS 클래스를 생성합니다. 결론 config.rb

  SASS는 CSS 워크 플로를 크게 향상시킵니다. 더 효율적이고 유지 관리 가능하며 즐거운 CSS를 작성하기 위해 오늘 사용을 시작하십시오.

  faqs

  @import "images/*.png"; SASS vs. SCSS : SCSS는 CSS와 같은 구문 (브래킷, 세미콜론)을 사용하는 반면 원래 SASS는 들여 쓰기를 사용합니다. SCSS는 일반적으로 선호됩니다. @include all-icons-sprites;

  설치 : node.js 및 npm을 설치 한 후 를 사용하십시오

  div#main {
    #sidebar {
      #navbar { /* Avoid this level of nesting */
        // ...
      }
    }
  }

  컴파일 : 자동 재 컴파일에 또는 images/icons (나머지 FAQ는 원본 텍스트에서 직접 응답하고 간결하게 반복되지 않습니다.)

위 내용은 Sass를 시작하는 것의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!