10 の便利な Sass Mixins_html/css_WEB-ITnose

Sass は、世界で最も成熟し、安定しており、強力かつプロフェッショナルな CSS プリプロセッサです。私はかなり長い間 Sass を使用しています。 Sass Mixins は、フロントエンド開発者にとって非常に便利であることがわかっており、フロントエンド開発者が時間を大幅に節約し、有効活用するのに役立ちます。

Sass の Mixins を使用すると、CSS コードの再利用可能なブロックを宣言できます。値を渡すこともできるので、ミックスインの柔軟性が高まります。これにより、フロントエンド開発者は時間を大幅に節約でき、フロントエンド担当者が作成したコードが冗長にならず、コードの整理と管理が容易になります。

Compass を使用することをお勧めします。これは、便利な Mixin を多数作成し、フロントエンド開発者の多くの作業を簡素化するためです。

1. ブラウザープレフィックス

ソース: Useful Sass (SCSS) mixin スニペット

SCSS:

@mixin css3($property, $value) {    @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {        #{$prefix}#{$property}: $value;    }}

使用:

.border_radius {  @include css3(transition, 0.5s);}

CSS:

.border_radius {  -webkit-transition: 0.5s;  -moz-transition: 0.5s;  -ms-transition: 0.5s;  -o-transition: 0.5s;  transition: 0.5s;}

2. レスポンシブブレークポイント

Sour ce: 便利な Sass Mixins

SCSS:

@mixin breakpoint($point) {  @if $point == large {    @media (min-width: 64.375em) { @content; }  }  @else if $point == medium {    @media (min-width: 50em) { @content; }  }  @else if $point == small {    @media (min-width: 37.5em) { @content; }  }}

使用:

.page-wrap {  width: 75%;  @include breakpoint(large) {     width: 60%;   }  @include breakpoint(medium) {     width: 80%;   }  @include breakpoint(small) {     width: 95%;   }}

CSS:

.page-wrap {  width: 75%;}@media (min-width: 64.375em) {  .page-wrap {    width: 60%;  }}@media (min-width: 50em) {  .page-wrap {    width: 80%;  }}@media (min-width: 37.5em) {  .page-wrap {    width: 95%;  }}

3. Retina 画像

出典: SCSS を使用した簡単な Retina 対応画像

SCSS

@mixin image-2x($image, $width, $height) {  @media (min--moz-device-pixel-ratio: 1.3),         (-o-min-device-pixel-ratio: 2.6/2),         (-webkit-min-device-pixel-ratio: 1.3),         (min-device-pixel-ratio: 1.3),         (min-resolution: 1.3dppx) {            /* on retina, use image that's scaled by 2 */            background-image: url($image);            background-size: $width $height;  }}

使用:

div.logo {  background: url("logo.png") no-repeat;  @include image-2x("logo2x.png", 100px, 25px);}

CSS:

div.logo {  background: url("logo.png") no-repeat;}@media (min--moz-device-pixel-ratio: 1.3),        (-o-min-device-pixel-ratio: 2.6 / 2),        (-webkit-min-device-pixel-ratio: 1.3),        (min-device-pixel-ratio: 1.3),        (min-resolution: 1.3dppx) {        div.logo {            /* on retina, use image that's scaled by 2 */            background-image: url("logo2x.png");            background-size: 100px 25px;        }}

4、クリアフロート

ソース: 新しいマイクロクリアフィックスハック

SCSS:

@mixin clearfix() {  &:before,  &:after {    content: "";    display: table;  }  &:after {    clear: both;  }}

使用:

.article {  @include clearfix();}

CSS:

.article:before, .article:after {  content: "";  display: table;}.article:after {  clear: both;}

5、白黒

出典: Useful SASS Mixins

SCSS:

@function black($opacity){  @return rgba(0,0,0,$opacity)}@function white($opacity){  @return rgba(255,255,255,$opacity)}

特別な免責事項:上記はそうではありませんSass の Mixins カテゴリに属しますが、Sass のカスタム関数関数です。

使用:

.my-class{  background:black(0.15);  color:white(0.9);}

CSS:

.my-class {  background: rgba(0, 0, 0, 0.15);  color: rgba(255, 255, 255, 0.9);}

6. インナーシャドウとアウターシャドウ

出典: Useful SASS Mixins

SCSS:

@mixin box-emboss($opacity, $opacity2){  box-shadow:white($opacity) 0 1px 0, inset black($opacity2) 0 1px 0;}

使用:

.box{  @include box-emboss(0.8, 0.05);}

CSS:

.box {  box-shadow: white(0.8) 0 1px 0, inset black(0.05) 0 1px 0;}

7. 透明性

出典: Handy Sass Mixins

SCSS:

@mixin opacity($opacity) {  opacity: $opacity;  $opacity-ie: $opacity * 100;  filter: alpha(opacity=$opacity-ie); //IE8}

使用:

.article-heading {  @include opacity(0.8);}

CSS:

.article-heading {  opacity: 0.8;  filter: alpha(opacity=80);}

8. 絶対位置決め

出典: Handy Sass Mixins

SCSS:

@mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) {  top: $top;  right: $right;  bottom: $bottom;  left: $left;  position: absolute;}

使用:

RREE

CSS:

RREE

9 、行の高さ

出典: Handy Sass Mixins

SCSS:

.abs {  @include abs-pos(10px, 10px, 5px, 15px);}

使用:

.abs {  top: 10px;  right: 10px;  bottom: 5px;  left: 15px;  position: absolute;}

CSS:

@mixin line-height($heightValue: 12 ){  line-height: $heightValue + px; //fallback for old browsers  line-height: (0.125 * $heightValue) + rem;}

10. 画像タイトルアニメーション

出典: 4 つの便利な SASS mixins

SCSS:

使用:

body {  @include line-height (16);}

CSS:

body {  line-height: 16px;  line-height: 2rem;}

注: この Mixin を実際のプロジェクトで使用すると、他の Mixin と連携することが簡単になります。

🎜