Scss中的自定义函数

Posted 2023-03-26

参考技术A 一、字符串函数

1、unquote($string): 删除字符串中的引号

2、quote($string): 给字符串添加引号

注：quote在使用时加上""会避免一些报错

3、To-upper-cas($string): 字符串小写字母转换为大写字母

4、To-lower-case($string): 字符串大写字母转换为小写字母

二、数字函数

1、percentage($value): 将一个不带单位的数转换为百分比

2、round($value): 将数值四舍五入，转换为一个最接近的整数

3、ceil($value): 将大于自己的小数转换为下一位整数

4、floor($value): 将一个数去除他的小数部分

5、abs($value): 返回一个数的绝对值

6、min($numbers...): 找出几个数值之间的最小值

7、max($numbers...): 找出几个数值之间的最大值

8、random(): 获取随机数

三、列表函数

1、length($list): 返回一个列表的长度值

2、nth($list,$n): 返回一个列表中指定的某个标签值

3、join($list1, $list2, [$separator]): 将两个列表链接在一起，变成一个列表

$separator: auto/comma/space; comma表示列表项值之间使用逗号分隔，space表示列表项值之间使用空格分开

4、append($list,$val,[$separator]): 将某个值放在列表的最后

5、zip($lists...): 将几个列表结合成一个多维的列表

zip(1px 2px 3px,solid dashed dotted,green blue red)

6、index($list,$value): 返回一个值在列表中的位置值

四、introspection函数

1、type-of($value): 返回一个值的类型

2、unit($number): 返回一个值的单位

3、unitless($number): 判断一个值是否带有单位

4、comparable($number-1,$number-2): 判断两个值是否可以做加、减和合并

五、三元条件函数

if($condition,$if-true,$if-false)

六、Map函数

1、map-get($map,$key): 根据给定的key值，返回map中相关的值

2、map-merge($map1,$map2): 将两个map合并成一个新的map

3、map-remove($map,$key): 从map中删除一个key,返回一个新的map

4、map-keys($map): 返回map中所有的key

5、map-values($map): 返回map中所有的value

6、map-has-key($map,$key): 根据给定的key值判断map是否有对应的value值，如果有返回true，否则返回false

7、keywords($args): 返回函数的参数，这个参数可以动态的设置key和value

css Polylang的自定义语言切换器。包含PHP函数和SCSS样式。 HTML标记使用BEM方法。 SCSS文件是你

/* Component: Languages */
.languages {
  
  // El: Item
  &__item {
    text-transform: uppercase;
    color: #899099;
    font-size: 13px;
    line-height: 1.15;
    
    // Mod: Current
    &--current {
      color: #212121;
    }

    // Divider
    &:before {
      content: ' / ';
      color: #899099;
    }

    // Remove divider from first item
    &:first-child:before {
      content: '';
    }
  }

  // Hover Styling for links
  a.languages__item:hover {
    color: #212121;
  }
}

<?php // Don't copy this line in functions.php file if it's already added.

/**
 * Show Polylang Languages with Custom Markup
 * @param  string $class Add custom class to the languages container
 * @return string        
 */
function rarus_polylang_languages( $class = '' ) {

  if ( ! function_exists( 'pll_the_languages' ) ) return;

  // Gets the pll_the_languages() raw code
  $languages = pll_the_languages( array(
    'display_names_as'       => 'slug',
    'hide_if_no_translation' => 1,
    'raw'                    => true
  ) ); 

  $output = '';

  // Checks if the $languages is not empty
  if ( ! empty( $languages ) ) {

    // Creates the $output variable with languages container
    $output = '<div class="languages' . ( $class ? ' ' . $class : '' ) . '">';

    // Runs the loop through all languages
    foreach ( $languages as $language ) {

      // Variables containing language data
      $id             = $language['id'];
      $slug           = $language['slug'];
      $url            = $language['url'];
      $current        = $language['current_lang'] ? ' languages__item--current' : '';
      $no_translation = $language['no_translation'];

      // Checks if the page has translation in this language
      if ( ! $no_translation ) {
        // Check if it's current language
        if ( $current ) {
          // Output the language in a <span> tag so it's not clickable
          $output .= "<span class=\"languages__item$current\">$slug</span>";
        } else {
          // Output the language in an anchor tag
          $output .= "<a href=\"$url\" class=\"languages__item$current\">$slug</a>";
        }
      }

    }

    $output .= '</div>';

  }

  return $output;
}

/* Component: Languages */
.languages__item {
  text-transform: uppercase;
  color: #899099;
  font-size: 13px;
  font-size:  1.3rem;
  line-height: 1.15;
}
.languages__item--current {
  color: #212121;
}
.languages__item:before {
  content: ' / ';
  color: #899099;
}
.languages__item:first-child:before {
  content: '';
}
.languages a.languages__item:hover {
  color: #212121;
}