목 대 목: 더 적음 vs Scss

반응형

Less와 Scss는 오늘날 가장 널리 사용되는 CSS 전처리장치이다. 대부분의 프로젝트는 둘 중 하나를 사용하며, 다른 프로젝트를 꽤 오랫동안 수행할 때 하나를 어떻게 구현해야 하는지 기억하기가 어렵습니다. 그래서 나는 이 기사가 Less에서 Scss로, 그리고 Visa에서 context 전환을 위한 빠른 조회 역할을 할 수 있기를 목표로 하고 있습니다.

종속성 가져오기

--- less ---
  @import <file_path>
  @import (<comma separated keywords list>) <file_path>
  // read about keywords here - https://lesscss.org/features/#import-atrules-feature
  --- scss ---
  @import <file_path>
  @use <file_path>
  @forward <file_path>

기본 클래스 확장

 

.base-class {
    border: 1px solid;
}
--- less ---
  .newClass {
      &:extend(.base-class);
  }
--- scss ---
  .newClass {
      @extend(.base-class);
  }

변수

--- less ---
  @bg-color: #ffc;
--- scss ---
  $bg-color: #ffc;

믹스인

--- less ---
  .lessMixin(@color) {
       color: @color;
       background: @bg-color 
  }
  .someclass {
      .lessMixin(#fff);
  }
    --- scss ---
      @mixin scssMixin($color) {
            color: $color;
            background: $bg-color;
      }
    .someclass {
        @include scssMixin(#fff);
    }

    ```

    <div class="content-ad"></div>

    ## 기능들

    ```js

--- less ---
// use like this .square(5)[@res]
.square(@var) {
  @res: @var*@var;  
  }
  --- scss ---
  @function square($var) {
    @return $var*$var
    }

네임스페이스

--- less ---
// use like this #namespace.container
#namespace {
  .container(@h, @w) {
       width: @w;
            height: @h;
                 padding: 10px
                    }
                    }
                    --- scss ---
                    In scss this feature was mssing for long time. Now namespcing is achievied using @use rule while importing modules

pl. = LIST

 

--- less ---
  @colors: blue, green, yellow, red;
// accessing list item
@index: 1;
extract(@colors, @index);
--- scss ---
  $colors: blue, green, yellow, red;
// accessing list item
$index: 1;
list.nth($list, $index);

지도

--- less ---
  @sizes: {
      xs: 10px;
      s: 12px;
      @new: {
            xs: 13px;
      }
  }
use as font: @sizes[xs]
// for nested 
font: @sizes[@new][xs] 
--- scss ---
$sizes: (
    xs: 10px,
    s: 12px,
    new: (
      xs: 13px
    )
);
use as font: map.get($sizes, 'xs') 
// for nested
font: map.get(map.get($sizes, 'new'), 'xs')

조건부 논리

--- less ---
  // use when for conditional styles, mixins, functions etc
  @option: true
.conditional-style when(@option = true) {
     color: red;
}
--- scss ---
  .class {
      @if $option == 'R' {
           text-align: right;
      } 
      @else if $option == 'L' {
            text-align: left;
      } @else {
            text-align: center;
      }
  } 

 

루프스

--- less ---
  // use recursion and condition for loops
  .gen-clss(@n) when (@n>0) {
      .gen-clss(@n - 1);
      .clss-@{n} {
            font-size: @n*2px;
      }
  }
.gen-clss(5);
--- scss ---
  $n : 5;
@while($n != 0) {
    .clss-#{$n} {
          font-size: $n*2px;
    }
    $n: $n - 1;
}
@for $i from 1 through 3 {
     .myclss-#{$i} {
           font-size: $i*2px;
     }
}
$sizes: 40px, 50px, 80px;
@each $size in $sizes {
    .icon-#{$size} {
          font-size: $size;
    }
}

그게 다야. 제가 중요한 걸 놓쳤으면 댓글로 알려주세요.