LESS-브라우저에서 적게 사용

Less는 서버 측이 아닌 필요할 때 동적으로 Less 파일을 컴파일하고자 할 때 브라우저에서 사용됩니다. 적은 크기의 자바 스크립트 파일이기 때문입니다.

우선, 브라우저에서 LESS를 사용하려면 LESS 스크립트를 추가해야합니다.

<script src = "less.js"></script>

페이지에서 스타일 태그를 찾으려면 페이지에 다음 줄을 추가해야합니다. 또한 컴파일 된 CSS로 스타일 태그를 생성합니다.

<link href = "styles.less" rel = "stylesheet/less" type = "text/css"/>

설정 옵션

스크립트 태그 앞에 프로그래밍 방식으로 less 개체에 대한 옵션을 설정할 수 있습니다. less 및 초기 링크 태그의 모든 프로그래밍 방식 사용에 영향을 미칩니다.

예를 들어 다음과 같이 옵션을 설정할 수 있습니다.

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js"></script>

아래에 지정된 스크립트 태그에 다른 형식으로 옵션을 설정할 수도 있습니다.

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js" data-env = "development"></script>

이러한 옵션을 링크 태그에 추가 할 수도 있습니다.

<link data-dump-line-numbers = "all" 
   data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }' 
   rel = "stylesheet/less" type = "text/css" href = "less/style.less">

속성 옵션에 대해 고려해야 할 사항은 다음과 같습니다.

  • window.less <스크립트 태그 <링크 태그 는 중요도 수준입니다.

  • 데이터 속성은 카멜 케이스로 쓸 수 없습니다. 링크 태그 옵션은 시간 옵션으로 표시됩니다.

  • 문자열이 아닌 값이있는 데이터 속성은 유효한 JSON이어야합니다.

시계 모드

watch 모드는 env 옵션을 development 로 설정 하고 less.js 파일이 추가 된 후 less.watch ()를 호출하여 활성화 할 수 있습니다 . 일시적으로 감시 모드를 활성화 하려면 URL에 #! watch 를 추가하십시오 .

<script>less = { env: 'development'};</script>
<script src = "less.js"></script>
<script>less.watch();</script>

변수 수정

LESS 변수의 런타임 수정이 활성화됩니다. 새 값이 호출되면 LESS 파일이 다시 컴파일됩니다. 다음 코드는 변수 수정의 기본 사용법을 보여줍니다-

less.modifyVars({
   '@buttonFace': '#eee',
   '@buttonText': '#fff'
});

디버깅

위에서 언급 한대로 url 또는 dumpLineNumbers 옵션에 ! dumpLineNumbers : mediaquery 옵션을 추가 할 수 있습니다 . mediaquery의 옵션 (덜 생성 된 CSS 스타일의 원래 LESS 파일 이름과 라인 번호를 표시합니다.) FireLESS 사용할 수 있습니다

옵션

less.js 스크립트 파일을로드하기 전에 글로벌 less 개체 에서 옵션을 설정해야 합니다.

<script>
   less = {
      env: "development",
      logLevel: 2,
      async: false,
      fileAsync: false,
      poll: 1000,
      functions: {},
      dumpLineNumbers: "comments",
      relativeUrls: false,
      globalVars: {
         var1: '"string value"',
         var2: 'regular value'
      },
      rootpath: ":/a.com/"
   };
</script>

<script src = "less.js"></script>
  • async− 부울 유형입니다. 가져온 파일은 옵션 async 여부에 관계없이 요청됩니다. 기본적으로는 false입니다.

  • dumpLineNumbers− 스트링 타입입니다. 출력 css 파일에서 dumpLineNumbers가 설정되면 소스 행 정보가 추가됩니다. 특정 규칙을 디버깅하는 데 도움이됩니다.

  • env− 스트링 타입입니다. 환경은 개발 또는 프로덕션에서 실행될 수 있습니다. 문서 URL이 다음으로 시작하면 개발이 자동으로 설정됩니다.file:// 또는 로컬 컴퓨터에 있습니다.

  • errorReporting − 컴파일 실패시 오류보고 방식을 설정할 수 있습니다.

  • fileAsync− 부울 유형입니다. 페이지에 파일 프로토콜이있는 경우 비동기 적으로 가져올 지 여부를 요청할 수 있습니다.

  • functions − 객체 유형입니다.

  • logLevel− 숫자 유형입니다. 자바 스크립트 콘솔에 로깅 수준을 표시합니다.

    • 2 : 정보 및 오류

    • 1 : 오류

    • 0 : 없음

  • poll− 시계 모드에서 시간은 폴링 사이에 밀리 초 단위로 표시됩니다. 정수 유형입니다. 기본적으로 1000으로 설정됩니다.

  • relativeUrls− URL이 상대적으로 조정됩니다. 기본적으로이 옵션은 false로 설정됩니다. 이는 URL이 이미 파일이 적은 항목에 상대적임을 의미합니다. 부울 유형입니다.

  • globalVars− 전역 변수 목록을 코드에 삽입합니다. 문자열 유형 변수는 따옴표로 묶어야합니다.

  • modifyVars− 글로벌 변수 옵션과 다릅니다. 적은 파일의 끝에서 선언을 이동합니다.

  • rootpath − 모든 URL 리소스의 시작 부분에 경로를 설정합니다.

  • useFileCache− 세션 당 파일 캐시 사용. 적은 파일의 캐시는 모든 적은 파일이 다시 검색되지 않는 modifyVars를 호출하는 데 사용됩니다.