scss 实用程序mixin轻松设置元素的宽度和高度。来自:http://codepen.io/jackiebackwards/pen/vlrsq

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss 实用程序mixin轻松设置元素的宽度和高度。来自:http://codepen.io/jackiebackwards/pen/vlrsq相关的知识,希望对你有一定的参考价值。

/**
  * Utility mixin to easily set the width and height of an element.
  * Makes perfect squares easier to create and maintain.
  *
  * http://codepen.io/jackiebackwards/pen/vlrsq
  */

@mixin size( $width, $height: false ) {
  width: $width;
  
  @if( $height ) {
    height: $height;
  }
  @else {
    height: $width;
  }  
}

//Usage
.selector {
  @include size(10px);
}

.selector2 {
  @include size(10px,50px);
}

以上是关于scss 实用程序mixin轻松设置元素的宽度和高度。来自:http://codepen.io/jackiebackwards/pen/vlrsq的主要内容,如果未能解决你的问题,请参考以下文章

text 使用Transform Rotate SCSS Mixin轻松旋转元素。只需一行SCSS,您的旋转元素将具有所需的静脉

scss Bootstrap 4 Mixins实用程序

scss 一些最小的实用程序mixins。请参阅:http://codepen.io/chriscoyier/blog/some-mini-sass-mixins-i-like

如何使用 webpack 预加载 SASS 自定义实用程序(变量和 mixins)

scss Sass mixin具有相同的宽度和高度

scss Sass mixin可轻松将视网膜图像添加到CSS属性中