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를 호출하는 데 사용됩니다.