Sass は、世界で最も成熟し、安定しており、強力かつプロフェッショナルな CSS プリプロセッサです。私はかなり長い間 Sass を使用しています。 Sass Mixins は、フロントエンド開発者にとって非常に便利であることがわかっており、フロントエンド開発者が時間を大幅に節約し、有効活用するのに役立ちます。
Sass の Mixins を使用すると、CSS コードの再利用可能なブロックを宣言できます。値を渡すこともできるので、ミックスインの柔軟性が高まります。これにより、フロントエンド開発者は時間を大幅に節約でき、フロントエンド担当者が作成したコードが冗長にならず、コードの整理と管理が容易になります。
Compass を使用することをお勧めします。これは、便利な Mixin を多数作成し、フロントエンド開発者の多くの作業を簡素化するためです。
ソース: Useful Sass (SCSS) mixin スニペット
@mixin css3($property, $value) { @each $prefix in -webkit-, -moz-, -ms-, -o-, '' { #{$prefix}#{$property}: $value; }}.border_radius { @include css3(transition, 0.5s);}.border_radius { -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;}Sour ce: 便利な Sass Mixins
@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%; }}.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%; }}出典: SCSS を使用した簡単な Retina 対応画像
@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);}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; }}ソース: 新しいマイクロクリアフィックスハック
@mixin clearfix() { &:before, &:after { content: ""; display: table; } &:after { clear: both; }}.article { @include clearfix();}.article:before, .article:after { content: ""; display: table;}.article:after { clear: both;}出典: Useful SASS Mixins
@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);}.my-class { background: rgba(0, 0, 0, 0.15); color: rgba(255, 255, 255, 0.9);}出典: Useful SASS Mixins
@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);}.box { box-shadow: white(0.8) 0 1px 0, inset black(0.05) 0 1px 0;}出典: Handy Sass Mixins
@mixin opacity($opacity) { opacity: $opacity; $opacity-ie: $opacity * 100; filter: alpha(opacity=$opacity-ie); //IE8}.article-heading { @include opacity(0.8);}.article-heading { opacity: 0.8; filter: alpha(opacity=80);}出典: Handy Sass Mixins
@mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) { top: $top; right: $right; bottom: $bottom; left: $left; position: absolute;}出典: Handy Sass Mixins
.abs { @include abs-pos(10px, 10px, 5px, 15px);}.abs { top: 10px; right: 10px; bottom: 5px; left: 15px; position: absolute;}@mixin line-height($heightValue: 12 ){ line-height: $heightValue + px; //fallback for old browsers line-height: (0.125 * $heightValue) + rem;}出典: 4 つの便利な SASS mixins
body { @include line-height (16);}
body { line-height: 16px; line-height: 2rem;}
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
