LESS
-
Less VariablesCSS Preproseccor/Less 2019. 3. 28. 22:07
Less Variables 변수 (Variables) 변수는 한 위치에서 값을 제어할 수 있는 방법을 제공하며, 코드를 보다 쉽게 관리 및 유지할 수 있게 도와준다. 일반적인 CSS 코드 a, .link { color: red; } .widget { color: white; background: red; } 변수를 사용한 코드 // 변수 @link-color: red; @link-color-hover: hotpink; // 사용법 a, .link { color: @link-color; // red } a:hover { color: @link-color-hover; // hotpink } .widget { color: white; background: @link-color; // red } 변수 보간법 (..
-
CSS Preprocessor [Less]CSS Preproseccor/Less 2019. 3. 28. 19:42
CSS Preprocessor [Less] CSS preprocessror Less 사용법 Less 사용법 Node.js와 함께 사용. [Node.js 설치 필수] npm install -g less lessc styles.less > styles.css 혹은 styles.less styles.css 브라우저가 less 파일을 읽지 못 하기 때문에 css로 컴파일 해주어야 한다. less.js 파일과 함께 사용. 변수 (Variables) Less @background-color: skyblue; @padding: 10px; @margin: @padding + 2px; @border: 1px solid black; css.title { background-color: @background-color; p..