Squarespace 템플릿과 Less CSS

Question

기존 템플릿을 더 잘 이해할 수 있도록 Squarespace 템플릿 디자인 리소스를 살펴 보았습니다.이 템플릿은 Less 템플릿을보다 잘 이해할 수있게 해주 었으며, 어느 부분이 적합한 지 잘 모르겠습니다. . 설명서는 Node.js에 대해 언급하고 Less를 컴파일하면 기본적으로 CSS와 같은 JavaScript처럼 보입니다.

Less를 추가하는 것이 JavaScript의 일부 양식으로 수행 될 수없고 어쨌든 JavaScript가 필요한 것처럼 보일지 확신 할 수 없습니다. 내가 Less의 요점을 놓치고 있는지, 아니면 내가 볼 수없는 JavaScript에서 할 수없는 일이 있는지 확실하지 않습니다.

Answer 1

다 적은 양은 자바 스크립트로 수행 할 수 있지만 모든 인스턴스에서 스타일 시트를 조작하는 것은 실용적이지 않습니다. 이 같은

이하에서

, 뭔가 :

@link-color: #428bca; 

a { 
    color: @link-color; 
} 

일반 JS이과 같습니다

const linkColor = '#428bca'; 
document.getElementsByTagName('a').forEach(link => { 
    link.style.color = linkColor; 
}); 

브라우저에게 훨씬 더 많은 작업 자바 스크립트 해석과 역할을보다 스타일을 설정을 제공하고 있습니다 출력 Less가 생성 된 CSS 파일입니다.

또한 별거입니다. 일반적으로 레이아웃에는 HTML을 사용하고 스타일에는 CSS를 사용하고 상호 작용에는 자바 스크립트를 사용하고 CSS가 충분하지 않을 수있는 부분을 선택합니다.

최상의 성능을 얻으려면 필요에 따라 순서대로 사용하십시오.

덜 브라우저가 CSS를 변환 할 수 있어야하므로 자바 스크립트가 작동하지 않아도됩니다. Squarespace의 템플릿에 Less 파일을 포함시키는 것이 자동으로 변환되어야한다는 것을 알게되면 각 사용자에게 페이지의 스타일을 그리는 데 추가 오버 헤드가 발생하지 않아 사이트 속도가 빨라집니다.