十个有用的Sass Mixins

最新推荐文章于 2024-06-27 16:21:37 发布
最新推荐文章于 2024-06-27 16:21:37 发布
阅读量987 收藏
点赞数
分类专栏： css scss 文章标签： css sass scss mixin
css 同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
scss
3 篇文章 0 订阅
订阅专栏

Sass是世界上最成熟、最稳定、强大而又专业的CSS预处理器。我使用Sass有相当长的一段时间了。发现Sass的Mixins对于任何前端开发人员都非常有用，可以帮助前端开发人员节省很多时间，而且能更好的利用。

Sass的Mixins可以让你声明任何可重用的CSS代码块。你甚至可以通过传值，使用你的Mixins更佳灵活。它让前端开发人员节省了大量的时间，确保前端人员写出来的代码不会冗余而且便于组织和管理代码。

我推荐使用Compass,因为他创建了很多有用的Mixins，简化了前端开发人员的很多工作。

1、浏览器前缀

来源于：Useful Sass (SCSS) mixin Snippets

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、响应式断点

来源于：Handy 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图片

来源于：Easy retina-ready images using SCSS

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、清除浮动

来源：A new micro clearfix hack

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、Black和White

来源：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;
}

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

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

9、行高

来源：Handy Sass Mixins

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

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

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

10、图片标题动画

来源：4 useful SASS mixins

SCSS:
@mixin animated-caption($font-color, $bg-color, $bg-opacity, $padding, $transition-speed) {
  display:inline-block;
  position:relative;
  overflow:hidden;
  & img {
    display:block;
    width:100%;
    height:auto;
  }
  & span.outer {
    display:block;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding:$padding;
    color:$font-color;
    position:absolute;
    bottom:-100px;
    -webkit-transition: bottom $transition-speed ease;
    -moz-transition: bottom $transition-speed ease;
    -o-transition: bottom $transition-speed ease;
    -ms-transition: bottom $transition-speed ease;
    transition: bottom $transition-speed ease;
    & span.inner{
      margin:0px;
      position:relative;
    }
    &:before{
      content: " ";
      display:block;
      position:absolute;
      z-index:0;
      left:0px;
      top:0px;
      width:100%;
      height:100%;
      background:$bg-color;
      filter: alpha(opactiy=($bg-opacity * 100));
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$bg-opacity * 100})";
      -moz-opacity: $bg-opacity;
      -khtml-opacity: $bg-opacity;
      opacity: $bg-opacity;
    }
  }
  &:hover span.outer{
    bottom:0px;
  }
}

使用：
a{
  @include animated-caption(#ffffff, #333333, 0.75, 10px, 0.5s)
}

CSS:
a {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
a img {
  display: block;
  width: 100%;
  height: auto;
}
a span.outer {
  display: block;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  color: #ffffff;
  position: absolute;
  bottom: -100px;
  -webkit-transition: bottom 0.5s ease;
  -moz-transition: bottom 0.5s ease;
  -o-transition: bottom 0.5s ease;
  -ms-transition: bottom 0.5s ease;
  transition: bottom 0.5s ease;
}
a span.outer span.inner {
  margin: 0px;
  position: relative;
}
a span.outer:before {
  content: " ";
  display: block;
  position: absolute;
  z-index: 0;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: #333333;
  filter: alpha(opactiy=75);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
  -moz-opacity: 0.75;
  -khtml-opacity: 0.75;
  opacity: 0.75;
}
a:hover span.outer {
  bottom: 0px;
}

注：这个Mixins如果在实际项目中，可以配合其它的Mixins更简单些。











mychirs
关注
专栏目录
一系列实用的SASSMixins集合
08-11
一系列实用的SASS Mixins集合
SASS-Useful-Mixins:有用的SASS Mixins
05-20
有用的SASS Mixins 如果您使用的是SASS，则应该发现这些mixins确实很有帮助。 这些mixins应该有助于加快您的开发过程。 该文件包括用于REM单元后备支持的SASS mixins，视网膜图像，断点，动画，过渡，线性渐变，...
SASS详解之混合(mixins)
梦龙小站
10-28 4214
SASS详解之混合(mixins)可以出现在SASS的任何地方。有很多类名具有相同或者相似的样式，就可以用SASS中的混合(mixins)来进行编写，然后针对不同类名的不同样式逐一编写。
sass响应式断点函数
最新发布
weixin_47908090的博客
06-27 125
自用sass响应式断点函数
SASS基础——十个常见的Mixins
weixin_34014277的博客
03-10 319
http://www.w3cplus.com/preprocessor/ten-best-common-mixins.html 从W3cplus最近的更新都可以看出我的学习新动向。是的，自从开始学习SASS之后，我喜欢上了SASS。因为他能让我的工作效率更快，同时让我更加节约出时间去做一些我自己喜欢的事情。 现在开始我开始使用SASS私下用在我喜欢的项目中，让我更加的对SASS喜欢与执着...
sass学习1-mixins
LRQQHM的博客
03-08 128
统一修改border-radius <style type='text/scss'> @mixin border-radius($x) { -webkit-border-radius: $x; -moz-border-radius: $x; -ms-border-radius: $x; border-radius: $x; } #awesome { width: 150px; height: 150px; background-color: gre
sass 引入sass_搅拌自己美味的Sass Mixins
Web design 教程小屋
07-07 591
Sass旨在帮助更快地编写CSS。 mixins具有使之成为可能的功能。 存在几种重量级的库，每种情况都具有复杂的公式，但是今天，我将展示如何激发您自己的mixins，以补充现有的工作流程。 缩略图：在PhotoDune上手动混合鸡蛋 。 注意： 完整的文档文件可以提前下载，以查看我们将要创建的文件，并了解原始Sass文件的外观。 我已经在前端开发中使用Sass一年多了，mix...
Sass-Mixins:普通的Sass mixins
05-02
一些Sass mixins可以满足您的需求 你要什么就拿！ 该存储库为您提供了一些Sass-Mixin： 转换 过渡 标签大小 用户选择 有关如何使用这些工具的文档可在部分文档中找到。 一般用法 通常，您应该在项目的mixins.scss ...
manila-mixins：一堆非常酷的Sass Mixins
02-05
一堆很酷的Sass Mixins，一部分是由我本人制作，另一部分是我由各种来源策划。 要覆盖某些设置，只需更改设置文件或进行复制并在马尼拉之前导入 :face_blowing_a_kiss: 文献资料 可在获得文档 混音 对齐 背景 边界...
圣杯：用于构建网格的Sass mixins
02-13
在CSS世界中，Sass（Syntactically Awesome Style Sheets）是一种预处理器，它允许开发者使用变量、嵌套规则、混合（mixins）、函数等高级特性来编写更易于维护和扩展的样式表。 标题中的“圣杯：用于构建网格的...
pi-sass-mixins:我正在使用pi-sass应用程序的SASS mixins。 没有任何依赖性
05-08
Pi SASS Mixins 我正在使用pi-sass库开发的应用程序使用SASS mixins。 它没有任何依赖性。 Bower安装pi-sass-mixins --save @import“＃{$ bower_path} / pi-mixins-sass / src / boot”;
一些有用的sassmixins
08-12
一些有用的 sass mixins
一个极简的轻量级Sass工具库
08-11
一个极简的轻量级 Sass 工具库，包括 Sass 混合、函数、预设变量等
使用sass中的@mixin
weixin_43768107的博客
06-27 679
为了有效的维护和开发项目，代码的重复利用就显得尤为重要。在Sass中，除了@import和@extend可以使你的代码更加具有重复利用性，@mixin指令也同样能提高你代码的重复使用率并简化你的代码。 @extend指令通过继承从而简化了代码，但是它也有缺陷之处，首先是不够灵活，其次它还会将你不需要的其他地方具有相同类名的样式都继承过来。 @mixin指令是另一种简化代码的方法。Mixins可以包含任意内容且可以传递参数，因此比@extend更加灵活和强大。 定义Mixins 通过@mixin加名称的方式就
Sass混合宏(Mixins)使用
一名全栈开发工程师
06-06 724
混合宏是一个可以复用的Sass代码块，你可以将任何样式放入一个混合宏，然后在需要的地方引用它。
sass中mixin的用法
weixin_42801311的博客
08-20 4245
使用sass中mixin方法 在sass中可以声明@mixin来使用sass的一个规则集中 // 声明mixin模块 @mixin border-1px { position: relative; &:after { display : block; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
如何使用Sass Mixins
culiu9261的博客
07-23 334
Sass is incredible. Whether using it as Sass or SCSS, it improves productivity and makes complex CSS tasks easy. Sass is easy to debug and lets us do more with CSS. 萨斯是不可思议的。 无论将其用作Sass还是SCSS，它都可以提高生...
sass 公用10个mixins代码块
05-05 1846
sass 公用10个mixins代码块
mixin sass_面向Sass设计师的9种Mixin库
cune1359的博客
06-26 353
如果在开发工作流程中使用Sass ，那么您就会知道mixins的重要性。 当您看到用CSS反复繁琐地编写的某些东西时，mixin可以在其中帮助您防止重复工作。 mixin包含CSS声明，您可以在整个站点中重复使用这些声明。 开发人员制作了许多mixin，以在开发中使用Sass时为您提供帮助。 大多数涵盖了CSS中经常重复的内容。 从在多个浏览器中进行适应到创建按钮，动画和过渡效果 ，在您为...
掌握Sass实战指南
3. **混合（Mixins）**：Mixins是Sass的一个强大功能，它们允许你定义一组样式，然后在需要的地方导入。这对于创建可复用的CSS代码块非常有用，比如响应式设计中的媒体查询。 4. **函数**：Sass内置了一系列函数，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值