StyleSheet/LESS 검색 결과

해당 글 12건

LESS Mixin Guards & CSS Guards

Mixin & CSS Guards 이 글에서는 믹스인 가드와 CSS 가드에 대해 알아봅니다. 믹스인 가드와 CSS 가드 원문보기 Mixin Guards(믹스인 가드) 먼저 Guard란 용어부터 짚고 넘아가 보겠습니다. Guard 는 함수형 프로그래밍에서 사용하곤 하는데 가드는 우리가 어떠한 조건의 검사를 하는 것을 강조하고 있습니다. 무언가를 정말 가드(보호,지키는 것)치는 겁니다. 요점은 guard가 일반 if문에 비해서 좀더 조건검사에 있어서 명료한 구문이라는 점입니다. 다시 말해, 단순히 값이나 인자의 개수(arity)가 아니라, 표현식(expression)과 일치하는 것을 찾을 때에, 가드가 유용합니다. LESS는 CSS의 본래 정의를 충실하게 반영하기 위해서 if/else 조건문 대신에 미디어쿼..
StyleSheet/LESS 2016. 9. 29. 09:58

LESS Loops & Merge

Loop 그리고 Merge 이 글에서는 LESS의 루프 작성과 병합에 대해 알아봅니다. LESS Loops & Merge 원문보기 Loops LESS 믹스인은 믹스인 내부에서 자신을 호출할 수 있습니다. 믹스인을 반복하여 실행하려고 할 경우에 가드 표현식과 패턴 매칭을 조합하여 다양한 루프 구조를 만들어 사용할 수 있습니다. 다음의 코드를 살펴봅니다. less .loop(@counter) when (@counter > 0) { .loop((@counter - 1)); // 반복 처리 width: (10px * @counter); // 각각의 반복처리를 위한 코드 } div { .loop(5); // 루프 실행 } 컴파일된 css div { width: 10px; width: 20px; width: 30p..
StyleSheet/LESS 2016. 9. 29. 09:57

Import Directives & Options

@import 지시자 및 옵션 이 글에서는 @import 지시자 그리고 옵션에 대해 알아봅니다. LESS import 원문보기 Import Directives @import 지시자는 다른 스타일시트에서 스타일을 불러옵니다. 그리고 표준 CSS @import 구문 규칙은 다른 모든 타입보다 먼저 작성되어야 합니다. 즉, 최상단에 위치해야 됩니다. 하지만 LESS 에서는 @import 문을 두는 곳에 어디든 상관없습니다. 다음과 같이 : less .foo { background: #900; } .bar { text-align: center; } @import "this-is-valid.less"; File Extensions(파일 확장자) @import 문은 파일의 확장자에 따라서 다른 방법으로 처리 할 수..
StyleSheet/LESS 2016. 9. 29. 09:57

LESS Parent Selector(&)

LESS 부모 선택자 이 글에서는 LESS 문법 중 부모(상위) 선택자에 대해 알아보는 시간을 가져보겠습니다. LESS Parent Selectors documentation Parent Selectors LESS 에서 부모 선택자를 참조하기위해 & 지시자를 사용합니다. & 지시자는 중첩된 규칙의 부모 선택자를 참조하며 일반적으로 클래스를 변경적용하거나 가상 클래스를 적용할 때 사용됩니다. less a { color: blue; &:hover { // 이 코드에서는 중첩된 바로 위의 부모 선택자인 a를 참조한다 color: green; } } 컴파일된 css a { color: blue; } a:hover { color: green; } 부모 선택자인 & 는 다양한 용도로 사용할 수 있습니다. 기본적으로..
StyleSheet/LESS 2016. 9. 29. 09:56

LESS Extend

Extends in LESS 이 글에서는 LESS에서 Extend 문법에 대해 알아봅니다. extend는 참조하는 내용과 일치하는 곳에 선택자를 병합해 주는 의사 클래스입니다. Extend :extend 인자로 전달된 선택자를 :extend 가 선언된 블록(이용되는 선택자)을 확장하여 적용할 수 있도록 해줍니다.(CSS를 확장하지는 않습니다) 다음의 코드를 살펴봅니다. less nav ul { &:extend(.extend-demo); // nav ul 을 확장한다 background: blue; } .extend-demo { color: red; } 컴파일된 css nav ul { background: blue; } .extend-demo, nav ul { color: red; } Extend Synt..
StyleSheet/LESS 2016. 9. 29. 09:56

Mixins as Functions & Passing Rulesets to Mixins

함수로서의 믹스인 & 믹스인에 룰셋 전달하기 이번 시간에는 믹스인의 활용법에 대해 좀더 살펴보기로 합니다. Mixins as Functions(믹스인으로부터 변수 또는 믹스인 반환하기) 믹스인에 정의된 변수와 믹스인은 호출자 범위에서 나타내고 사용할 수 있습니다. 단 한가지 예외는 호출자가 같은 이름으로 변수를 포함하고 있는 경우에는 복사되지 않습니다. 같은 이름의 경우 또 다른 믹스인 호출에 의해 정의된 변수를 포함하게 됩니다. 오직 호출 로컬 범위 내에 존재하는 변수만이 보호되어 있습니다. 부모 스코프에서 상속된 변수는 덮어쓰게 됩니다. less .caller { .mixin(); width: @width; height: @height; } 컴파일된 css .caller { width: 100%; h..
StyleSheet/LESS 2016. 9. 29. 09:56

LESS Parametric Mixins

인자를 가지는 믹스인 지난 포스팅에서는 기본적인 믹스인에 대해 알아보았습니다. 이 글에서는 인자를 이용한 믹스인과 그외 믹스인 용법에 대해 계속 알아보도록 하겠습니다. Parametric Mixins LESS에는 특별한 유형의 룰셋이 있습니다. 믹스인은 인자를 취할 수 있기 때문에 믹스인을 호출할 경우에 인자를 전달할 수 있습니다. 다음의 예제를 살펴봅니다. less .border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } 그리고 우리는 다음과 같이 인자를 전달함으로서 호출할 수 있습니다 less #header { .border-radius(4px); // 4p..
StyleSheet/LESS 2016. 9. 29. 09:35

LESS 변수 & 믹스인(Mixins)

LESS 변수와 믹스인 LESS는 CSS의 확장 언어로서 CSS와의 호환성도 있을 뿐만 아니라 추가적으로 기존 CSS 구문을 사용할 수도 있습니다. 이 글에서는 LESS 문법 중 변수 및 믹스인 사용 방법에 대해 알아보는 시간을 가져보겠습니다. Variables LESS 변수는 변수명 앞에 @를 붙여서 표기합니다. (@variables) 다음의 예제를 살펴보겠습니다. LESS @red: red; @light-red: @red + #222; // 연산 #header { color: @light-red; } @friend : "I have a friends."; @overVar : 'friend'; // @friend 변수를 또 다른 변수로 사용하기 위해 문자열로 참조 .demo { content: @@ov..
StyleSheet/LESS 2016. 9. 29. 09:34

LESS 변수

LESS에서 변수 사용하기 이 글에서는 LESS 변수 사용 방법에 대해 알아보겠습니다. LESS 변수 원문보기 Variables LESS 변수를 사용하면 이제 더이상 스타일 시트에 반복적으로 속성값을 선언하지 않을 수 있습니다. 우리는 다음과 같이 스타일시트를 작성하곤 합니다. 컴파일된 css a, .link { color: #428bca; } .widget { color: #fff; background: #428bca; } 변수는 사용자가 하나의 위치 선언하여 값을 제어하는​​ 방법을 제공함으로써 유지보수 하기 쉽고 여러분의 코드를 간결하게 만들어 줄 것입니다. less // Variables @link-color: #428bca; // sea blue @link-color-hover: darken(@..
StyleSheet/LESS 2016. 9. 29. 09:34

LESS Syntax 시작하기

LESS Language Features 이 글에서는 LESS에 관한 전체적인 숲을 보며 공부하는 시간을 가져보도록 하겠습니다. 이 파트가 먼저 선행된다면 조금 LESS Syntax 가 수월해 질 것입니다. LESS OVERVIEW 지금부터 전반적인 LESS에 대해 알아봅니다. Variables LESS 변수는 다음 코드를 보면 이해하기 빠릅니다. 변수명은 @를 사용합니다. less @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; } 컴파일된 css #header { color: #6c94be; } 주목!!! LESS에서 변수는 실질적으로 ‘상수(constants)'라고 할 수 있습니다. 그래서 한 번만 ..
StyleSheet/LESS 2016. 9. 29. 09:34

LESS 사용 방법(컴파일)

LESS - The dymamic Stylesheet language 이 글에서는 LESS를 사용함에 있어 초기화하고 LESS를 컴파일 하는 방법에 대해 간단히 알아보겠습니다. 필자는 에디터 webstorm을 사용하고 있기 때문에 이 에디터를 통해 LESS 컴파일을 하고 있습니다. 필자의 에디터에서 컴파일하는 방법은 설명하지 않고 GUI 기반 및 CLI 에서 사용하는 법에 대해 간단히 소개하고자 합니다. 에디터 중에 Atom, Bracket 을 사용하여 해당 에디터에서 LESS 플러그인 autoComplie 을 설치하면 좀 더 수월하게 컴파일할 수 있습니다. LESS 적용하기 LESS의 문법으로 작성하기 위해서는 .less 확장자의 파일을 생성하여 LESS를 작성해야 합니다. 그리고 이 파일은 HTML에..
StyleSheet/LESS 2016. 9. 29. 09:33

Modern web LESS Framework(모던 웹 less 프레임워크)

About LESS CSS는 html을 꾸며주는 언어로서 정보와 표현을 분리해 주고 많은 장점을 가지고 있습니다. 하지만 불편한 점도 가지고 있습니다. 이를테면 작성하기는 쉽지만, 개발자 도구 없이는 유지보수하는 것이 매우 어렵습니다. 또한 동적인 언어의 특징인 변수나 함수와 같은 특성을 가지고 있지 않기 때문에 많은 양의 코드가 동원되기도 합니다. 이러한 문제를 해결하기 위해서 기술 중의 하나가 lesscss입니다. lesscss는 보다 간결하고 유지보수하기 쉬운 css를 만드는데 도움을 줍니다. LESS 란? LESS는 CSS에 Script의 능력(변수, 함수, 연산, 중첩, 스코프등등)을 덧붙여 확장한 언어입니다. 그리고 LESS는 클라이언트 또는 서버환경(node.js) 모두에서 실행됩니다. LE..
StyleSheet/LESS 2016. 9. 29. 09:33