CSS Preproseccor/Less
-
Less Mixins part #01CSS Preproseccor/Less 2019. 3. 30. 03:24
믹스인 (Mixins) 클래스 선택자와 id 선택자를 혼합할 수 있다. less.logo, #title{ font-weight: 900; } .mixin-class{ .logo(); } .mixin-id{ #title(); } css.logo, #title{ font-weight: 900; } .mixin-class{ font-weight: 900; } .mixin-id{ font-weight: 900; } 믹스인 호출을 할 때 [.logo(), #title()] 괄호는 선택사항이지만, 더 이상 사용되지 않을 예정이다.* .logo(); .logo; // 정상 작동. 믹스인을 출력하지 않음 (Not Outputting the Mixin) 직접 만든 믹스인을 컴파일할 CSS 파일 내부에 포함시키고 싶지 않..
-
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..