css가 유성을 사용하여 변수를 선언합니다.

Question

유성을 사용하여 CSS에서 변수를 선언하는 가장 쉬운 방법은 무엇입니까? 두 개의 CSS 컴파일러 인 SASS와 LESS 사이에서 변수 선언을 허용 할 수 있으므로 정확한 값을 정의 할 필요가없고 대신 변수를 제어 할 수 있습니다. 예를 들어 ...

variableNameOne: value; 
variableNameTwo: value; 

.sidebar-nav li a { 
color: variableNameOne; 
} 

나는 css에서 이보다 진보 된 것을 원하지 않습니다. 유성에 boootstrap을 사용하고 있습니다.

CSS3는 스타일 시트의 맨 위에있는 변수를 선언하여 변수를 지원합니다 (root {varName : value;}). 그러나 모든 브라우저에서 지원되는 것은 아닙니다.

nemo64의 부트 스트랩 이하를 설치하는 것이 가장 좋은 방법입니까? 당신이 다시 가고 싶지 않을 것입니다 그것을 사용하기 시작하면 내가 강하게하는 CSS 프리 D 파일러를 사용하여 권합니다 http://www.manuel-schoebel.com/blog/meteorjs-and-twitter-bootstrap---the-right-way

// 1. Add the less compiler so meteor compiles everything for you 
meteor add less 

// 2. Add the bootstrap 
meteor add nemo64:bootstrap 

// 3. Clone this stylesheet boiler 
// Also delete the .git folder and .gitignore if you don't like those 
cd yourapp/client/ 
git clone https://github.com/DerMambo/stylesheets.git 

// 4. Add everything you need into the file 
// yourapp/client/vendor/custom.bootstrap.json 

Answer 1

에서 공급.

부트 스트랩을 사용 중이므로 부트 스트랩이 지원하는 2 개의 CSS 사전 컴파일러를 나열합니다 : LESS 및 SASS.

LESS :

는

가장 쉬운 솔루션, LESS는 유성 (단지 meteor add less하고 소스에 .less 및 .import.less 파일을 던져)로 구워 그것은 모든이 CSS 전문가되지 않은 경우 당신은 아마 필요합니다 기능을 제공합니다.

이 패키지 https://github.com/Nemo64/meteor-bootstrap을 사용하여 앱에 맞춤화 할 수없는 부트 스트랩을 통합하는 것이 좋습니다. 변수 값을 변경하거나 더 이상 더러운 CSS를 사용하지 않고 부트 스트랩 변수 (색상, 응답 중단 점 및 다른 많은 것들)를 무시할 수 있습니다. !important으로 해킹).

SASS는 :

말대꾸이 우수한 것으로 간주됩니다 LESS까지 기능에 관한 한 당신은 웹 응용 프로그램의 스타일 시트 디자인에서 시간을 보낼 계획이라면 아마도 장기적으로 더 나은 선택되어있다. Meteor 앱 (https://atmospherejs.com/fourseven/scss) 내에서 Sass 소스 파일 컴파일을 지원하는 패키지가 있으며 적절한 부트 스트랩 패키지를 찾을 수 있어야합니다.

Meteor Sass는 libsass를 기반으로하는 node-sass를 기반으로한다는 점에 유의하십시오. C++의 원래 Ruby Sass를 다시 구현 한 것으로, 일반 Ruby 구현과 정확히 일치하지는 않지만 꽤 고급 기능 만 libsass에서 지원되지 않기 때문에 문제가 될 수 있습니다.

이것은 CSS 프리 컴파일러의 초소형 프리젠 테이션이므로 주로 의견을 바탕으로 한 주석이 적용됩니다.