'2018/01'에 해당되는 글 1건

  1. about {LESS} CSS 2018.01.23

about {LESS} CSS

시작하기

  • 역사

    • 2009년 Alexis Sellier가 만들었으며 Ruby로 처음 작성되었고 그 이후에 javaScript로 대체되었습니다.

  • 지원하는 언어

    • LESS는 아래의 프로그래밍언어에 사용할 수 있으며, 각 언어들마다 다양한 Open Source 프로젝트로서 LESS를 지원하고 있습니다.

    • 참고 ( http://lesscss.org/about/#ports )
      1. Java
      2. .Net
      3. PHP
      4. Python
      5. Ruby
      6. Go
  • 그래서 LESS는

    • Open Source
    • CSS로 컴파일되고 클라이언트 혹은 서버에 실행될 수 있는 동적 스타일 시트 언어입니다.
    • 브라우저가 LESS.js를 통해 실시간 컴파일

LESS 설치

  • 설치 전 준비

    • NPM을 이해하고 설치해야 합니다.
  • 설치하기

    • 다음의 명령을 이용하여 시스템 전역으로 설치하거나
      • npm install less -g
    • 프로젝트에서만 사용할 수 있도록 설치할 수 있습니다.
      • npm i less --save-dev

    사용하기

  • 설치가 끝나고 바로 HTML 혹은 CSS에서 LESS(*.less)로 작성된 파일을 읽어서 사용할 수 있을까요? 그렇지 않습니다.
  • LESS로 작성된 파일은 css로 변환하는 과정이 필요합니다.
  • 이 문서에서는 node에서 설치된 less 도구로 변환하는 방법을 소개합니다.
  • less로 작성된 코드가 있는 곳으로 이동하여 Terminal 에서 명령어를 아래와 같이 입력합니다. lessc 라는 컴파일러를 사용합니다.

    예 (style.less)

    • lessc style.less > style.css

    • 결과 (style.css)

  • 이렇게 생성된 css를 프로젝트에서 불러오기하여 사용할 수 있습니다.
  •  주의사항

  • 작성된 less 코드에서 변수 선언 시 공백을 주의하세요.
  • 위의 방법외에 직접 less(*.less)를 파일(웹 페이지를 의미)에서 직접 불러오고 사용할 수 있으나, 별도의 less.js 파일이 필요하며, 성능이 느린 단점이 있어 권장하지 않습니다. 따라서 관련된 정보는 이 문서에서는 안내하지 않습니다.

    • <link rel="stylesheet/less" type="text/css" href="style.less> <script src="less-1.3.1.min.js" type="text/javascript"></script>

    • 우리가 LESS로 할 수 있는 것 (+특징)

      코드 작성

      LESS는 변수를 정의할 수 있으며 변수의 정의는 (@)로 변수의 할당은 (;)로 수행됩니다.

    • LESS는 변환이 되는 동안 CSS문서로 출력이 됩니다.

    • 변수를 정의하고 할당할 수 있다는 것은 그 역할을 재사용할 수 있다는 뜻이 될 수 있습니다.

    • 변수 혹은 코드의 재사용은 LESS의 큰 장점 중 하나입니다. (-기본 코드 참고)

    • 기본 코드


    • @pale-green-color : #4D926F ; #header { color : @pale-green-color ; } h2 { color : @pale-green-color ; }



    • #header { color : #4D926F ; } h2 { color : #4D926F ; }


    • MixIn

      MixIn(믹스인)이라고 명명하고 있는 이 것은 마치 정의된 클래스를 Function과 같이 사용할 수 있음을 의미합니다.

      예:


    • .mixin() { @width: 100%; @height: 200px; } .caller { .mixin(); width: @width; height: @height; } .rounded-corners ( @radius : 5px 10px 8px 2px ) { -webkit- border-radius : @radius ; -moz- border-radius : @radius ; border-radius : @radius ; } #header { .rounded-corners; } #footer { .rounded-corners (10px 25px 35px 0px) ; }


    • 결과:


    • .caller { width: 100%; height: 200px; } #header { -webkit-border-radius: 5px 10px 8px 2px; -moz-border-radius: 5px 10px 8px 2px; border-radius: 5px 10px 8px 2px; } #footer { -webkit-border-radius: 10px 25px 35px 0px; -moz-border-radius: 10px 25px 35px 0px; border-radius: 10px 25px 35px 0px; }


    • 따라서 위와 같이 정의된 변수를 function처럼 사용할 수 있고 function에서 가져온 변수를 현재의 영역에 대입할 수 있습니다. (재사용할 수 있죠)
    • 단순히 값만 지정할 수 있는 것이 아니며, 계산식을 대입하여 사용할 수도 있습니다.

      예:


    • .average(@x, @y) { @average: ((@x + @y) / 2); } div { .average(16px, 50px); // "call" the mixin padding: @average; // use its "return" value }


    • 결과:


    • div { padding: 33px; }


    • 중요한 부분 중 한가지는 호출자 범위 내에서 지정된 변수는 외부의 전역변수보다 우선시 됩니다. (이전의 CSS와 동일한 수준)
    • 연산

      위의 Mix In 예제에서도 나왔지만 연산기능이 있습니다.


    • .sum(@a, @b) { @summary: @a + @b; } div { .summer { .sum(5, 5); left: @summary; } }


    • 결과:


    • div.summer { left: 10; }


    • 중첩

      CSS의 관계식보다 보다 편리하게 표현 및 이해할 수 있습니다.

      CSS의 경우 div 하위의 모든 <button />과 <a /> Element를 포현할 경우


    • div > button { ... } div > a { ... }


    • LESS의 경우 보다 쉽게 표현할 수 있습니다.


    • div { button { font-size: 10px; color: blue; } a { size: 5px; } }


    • Mixin Guards

    • 앞서 언급한 Mixin 기능에서 한걸음 더 나아간 기능이며, 조건식을 포함할 수 있습니다.
    • 예를 들어 어떤 Element의 배경색이 50%이하일 때 특정 클래스의 값을 변경하는 등의 조건으로 javascript를 이용하지 않더라도 LESS 내에서 처리할 수 있습니다.

      예 (정의하기)


    • .mixin (@a) when (lightness(@a) >= 50%) { // lightness가 50% 이상일 때 background-color: black; // 배경색을 black으로 지정하고 } .mixin (@a) when (lightness(@a) < 50%) { // lightness가 50% 이하일 때 background-color: white; // 배경색을 white로 지정해라 } .mixin (@a) { color: @a; }


    • 예(사용하기)


    • .class1 { .mixin(#ddd) } .class2 { .mixin(#555) }


    • 결과 (CSS로 컴파일)


    • .class1 { background-color: black; color: #ddd; } .class2 { background-color: white; color: #555; }


    • 사용할 수 있는 연산자

    • >, >=, =, =<, <, true

    • 이외에는 모두 false 입니다.
    • 이외 상세한 내용은 여기에서 확인할 수 있습니다.

    • http://lesscss.org/features/#mixin-guards-feature
    • 반복문(loop)

      반복문을 사용하여 클래스(들)를 생성할 수 있습니다. 좋은 예제로 테이블의 컬럼 수에 따라 컬럼별 색상을 다르게 주거나 혹은 row의 색상을 다르게 줄 수 있습니다.


    • .generate-columns(4); .generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1)); }


    • 결과


    • .column-1 { width: 25%; } .column-2 { width: 50%; } .column-3 { width: 75%; } .column-4 { width: 100%; }


    • 상위 셀렉터

      & 를 이용하여 상위 셀렉터를 묵시적 지정할 수 있습니다. 


    • a { color: blue; &:hover { color: green; } } .button { &-ok { background-image: url("ok.png"); } &-cancel { background-image: url("cancel.png"); } &-custom { background-image: url("custom.png"); } }


    • 결과


    • a { color: blue; } a:hover { color: green; } .button-ok { background-image: url("ok.png"); } .button-cancel { background-image: url("cancel.png"); } .button-custom { background-image: url("custom.png"); }


    • & 는 모든 부모를 나타냅니다. 즉 바로 위의 부모 셀렉터만 의미하는 것이 아닌 나열된 모든 부모 셀렉터를 의미합니다.


    • .grand { .parent { & > & { color: red; } & & { color: green; } && { color: blue; } &, &ish { color: cyan; } } }


    • 결과


    • .grand .parent > .grand .parent { color: red; } .grand .parent .grand .parent { color: green; } .grand .parent.grand .parent { color: blue; } .grand .parent, .grand .parentish { color: cyan; }


    • 위의 예제에서 &가 1개 표현될 때 상위의 모든 부모들이 나열되는 것을 확인할 수 있습니다.
    • 이외의 Selecoor의 순서를 변경하는 방법은 이곳을 참고하세요 ( http://lesscss.org/features/#parent-selectors-feature )
    • Functions

    • LESS에서 제공하는 다양한 Function에 대한 설명입니다.
    • 아래의 사이트에서 제공하는 Function을 확인하고 사용할 수 있습니다.
    • Misc, String, List, Math, Type, Color의 카테고리에 관련된 Function들이 준비되어 있습니다.


http://lesscss.org/functions/


'Front-end > CSS' 카테고리의 다른 글

about {LESS} CSS  (0) 2018.01.23
Tag // ,
|  1  |