Bulma의 멋진 SASS 스니펫 강조 표시

Being the awesome CSS framework that it is, Bulma has a very clean and structured SASS codebase. Let's dive in it and get some Sassy gems 💎 for ourselves.

Bulma는 현장에 처음 온 사람이든 노련한 전문가이든 누구에게나 추천하고 싶은 프레임워크입니다. 특히 학습 중인 경우SASS .
오늘 강조할 내용은 해당 항목에 없습니다documentation. 그러나 이 겸손하지만 견고한 CSS 프레임워크의 잠재력을 최대한 활용하려면 살펴보십시오.

⚠ 고개를 들어!

Bulma는 완전히 SASS로 작성되었습니다. SASS. 그래서 친절한 알림으로.

믹스인이 다르게 보입니다! @mixin newMixin()는 SASS에서 =newMixin()와 같습니다.

내용물이 다르게 보입니다! @include newMixin()는 SASS에서 +newMixin()와 같습니다.

SASS는 세미콜론을 사용하지 않습니다;.

SASS는 중괄호를 사용하지 않습니다{}.

SASS는 중첩 대신 들여쓰기를 사용합니다. 정확해야 합니다.

I'm adding bits of information and annotations in the code, look for 📚 comments.

💎 입력을 위한 쉬운 자리 표시자

이 믹스인은 접두어가 있는 경우 실제로 필요하지 않지만 input 또는 textearea 의 자리 표시자를 신속하게 스타일 지정하는 멋진 방법입니다.

=placeholder
  $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
  @each $placeholder in $placeholders
    &:#{$placeholder}-placeholder
      @content
      // 📚 Content passed to @include ends up where the @content directive is.

💎 더 쉬운 미디어 쿼리

구성 요소에 대한 특정 미디어 쿼리를 작성할 때 유용합니다.

=from($device)
  @media screen and (min-width: $device)
    @content

=until($device)
  @media screen and (max-width: $device - 1px)
    @content

Bulma에는 변수로 정의된 자체 중단점 세트가 있어 매우 구체적인 믹스인을 허용합니다.

=mobile
  @media screen and (max-width: $tablet - 1px)
    @content

=tablet
  @media screen and (min-width: $tablet), print
    @content

=tablet-only
  @media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
    @content
    // 📚 Content passed to @include ends up where the @content directive is.

💎 절대 요소 오버레이

더 섹시해 보이려면 이미지 위에 그라데이션이 필요합니까?

이미지가 쉽게 잡히지 않도록 전체div?

아마도 부모를 덮어야 하는 ::after 또는 ::before입니까?

=overlay($offset: 0)
  bottom: $offset
  left: $offset
  position: absolute
  right: $offset
  top: $offset

다른 오프셋을 원할 경우에 대비하여 매개변수를 더 추가하여 혼합할 수 있습니다.

💎 어둡고 밝은 변형을 찾기 위한 색상 도우미 믹스인

colorLuminance는 색상의 휘도 수준을 0에서 1까지 결정합니다.
특히 이 기능은 라이브러리에서 내가 가장 좋아하는 기능 중 하나입니다.

@function colorLuminance($color)
  @if type-of($color) != 'color'
  // 📚 Checking if its an actual color. If not, returns .55
    @return 0.55
  $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
  // 📚 Grabs each RGB value for the color
  @each $name, $value in $color-rgb
    $adjusted: 0
    $value: $value / 255
    @if $value < 0.03928
      $value: $value / 12.92
    @else
      $value: ($value + .055) / 1.055
      $value: powerNumber($value, 2)
     // 📚 Calculates amount of luminance for each color (RGB) and then stores it back in the variable.
    $color-rgb: map-merge($color-rgb, ($name: $value))
  @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
  // 📚 Sums up the RGB luminances together to get the $color's luminance.

findColorInvert는 이전에 정의된 함수colorLuminance의 도움으로 흰색 또는 검은색(ish)을 반환합니다. 이것은 @each 를 사용하여 프로그래밍 방식으로 구성 요소를 생성할 때 매우 유용합니다.

@function findColorInvert($color)
  @if (colorLuminance($color) > 0.55)
    @return rgba(#000, 0.7)
  @else
    @return #fff

findLightColor는 lightness 함수를 사용하여 색상의 밝은 버전을 반환합니다. 주어진 색상은 특정 밝기 수준 미만이어야 합니다. 그렇지 않으면 함수가 동일한 색상을 반환합니다.

@function findLightColor($color)
// 📚 Checks the type of the variable sent to the function
  @if type-of($color) == 'color'
    $l: 96%
    // 📚 After defining a base lightness level ($l), checks if $color isn't above it already. Then proceeds to adjust the color.
    @if lightness($color) > 96%
      $l: lightness($color)
    @return change-color($color, $lightness: $l)
    // 📚 If its not a color, returns a variable Bulma has already declared before.
  @return $background

findDarkColor는 주어진 색상의 더 어두운 버전을 반환합니다. 이 함수는 max 함수를 사용하여 항상 베이스와 함께 합니다.

@function findDarkColor($color)
// 📚 Checks the type of the variable sent to the function
  @if type-of($color) == 'color'
    $base-l: 29%
    // 📚 After setting a base target of darkness ($base-l), gets the luminance of the color.
    $luminance: colorLuminance($color)
    $luminance-delta: (0.53 - $luminance)
    $target-l: round($base-l + ($luminance-delta * 53))
    // 📚 After doing some calculations, chooses the highest value between the target lightness ($target-l) and the base one defined previously.
    @return change-color($color, $lightness: max($base-l, $target-l))
    // 📚 If its not a color, returns a variable Bulma has already declared before.
  @return $text-strong

👋 이별의 말

Bulma의 리포지토리를 통해 SASS를 많이 배우고 있다는 것을 알게 되었고 이 기사를 통해 여러분도 그렇게 되었기를 바랍니다!

여기에서 강조한 이 스니펫은 코드베이스의 일부에 불과하며I encourage you to use Bulma 다음에 CSS 프레임워크가 필요할 때입니다. 매우 잘 작성된 문서가 있으며 사용자 정의가 가능하며 오픈 소스입니다 ♥.

이 게시물이 마음에 드셨거나 어쨌든 유용하셨다면 댓글이나 반응으로 알려주세요. 또한 다른 인기 있는 CSS 프레임워크를 분석하고 싶다면 댓글에 어떤 프레임워크가 있는지 알려주십시오.