Sass &Less中mixin的用法

最新推荐文章于 2024-08-25 15:49:46 发布
最新推荐文章于 2024-08-25 15:49:46 发布
阅读量1.3k 收藏 5
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/A_9888/article/details/106452884
版权

Sass的mixin用法

1.以vue项目开发演示，先在assets里面建Sass文件夹mixin.sass

// 1. 布局
 //flex布局复用
@mixin flex($hov:space-between,$col:center){
  display:flex;
  justify-content:$hov;
  align-items:$col;
}
//after伪类加小图标
@mixin bgImg($w:0,$h:0,$img:'',$size:contain){
  display:inline-block;
  width:$w;
  height:$h;
  background:url($img) no-repeat center;
  background-size:$size;
  content：''
}
// 固定定位, 兼容IE6
@mixin fixed {
  position: fixed;
  _position: absolute;
  *zoom: 1;
}
 
// 水平竖直方向居中-translate
@mixin center {
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
 
// 水平竖直方向居中-flex
@mixin flex-center($w, $h) {
  @include flex;
  align-items: center;
  justify-content: center;
}
 
//水平竖直方向居中-margin
@mixin know-center($w, $h) {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -($w/2);
  margin-top: -($h/2);
}
 
// 吸顶导航
@mixin fix-header($h: 70px) {
  @include fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: $h;
  z-index: 1000;
}
 
// 吸底导航
@mixin fix-footer($h: 70px) {
  @include fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: $h;
  z-index: 1000;
}
 
// 浮动, 兼容 IE6
@mixin fl {
  float: left;
  *display: inline;
  _display: inline;
}
 
@mixin fr {
  float: right;
  *display: inline;
  _display: inline;
}
 
// 清除浮动
@mixin clearfix {
  *zoom: 1;
  &:after {
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
  }
}
 
// 弹性盒
@mixin flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}
 
// IE盒模型
@mixin border-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
 
// 尺寸
@mixin size($w, $h) {
  width: $w;
  height: $h;
}
 
// 最小尺寸, 兼容IE6
@mixin min-width($min-w) {
  min-width: $min-w;
  _width: $min-w;
}
 
@mixin min-height($min-h) {
  min-height: $min-h;
  _height: $min-h;
}
 
// 全屏大图背景
@mixin fullscreen-bg($url) {
  width: 100vw;
  height: 100vh;
  background: url($url) no-repeat 50% 50%;
  background-size: cover;
}
 
// 2. 文本
// 禁止文本被选择
@mixin user-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
 
// 文字超出显示省略号
@mixin ellipsis {
  /*加宽度width属来兼容部分浏览*/
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
 
//文字超出几行显示省略号
@mixin ellipsis-multi($line) {
  //     display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
  //   -webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式
  //   -webkit-line-clamp: 3; //用来限制在一个块元素显示的文本的行数
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
 
// 美化文本选中 ::selection
@mixin beauty-select($color, $bgcolor) {
  &::selection {
    color: $color;
    background-color: $bgcolor;
  }
}
 
// 美化占位符 placeholder 样式
@mixin beauty-placeholder($fz, $color: #999, $align: left) {
  &:-moz-placeholder {
    font-size: $fz;
    color: $color;
    text-align: $align;
  }
  &:-ms-input-placeholder {
    font-size: $fz;
    color: $color;
    text-align: $align;
  }
  &::-webkit-input-placeholder {
    font-size: $fz;
    color: $color;
    text-align: $align;
  }
}
 
// 隔行换色
@mixin zebra-lists($evenColor, $evenBgColor, $oddColor, $oddBgColor) {
  &:nth-child(2n) {
    color: $evenColor;
    background-color: $evenBgColor;
  }
  &:nth-child(2n + 1) {
    color: $oddColor;
    background-color: $oddBgColor;
  }
}
 
// 首字下沉
@mixin first-letter($font-size: 6em) {
  &::first-letter {
    float: left;
    line-height: 1;
    font-size: $font-size;
  }
}
 
// 3. 图片
// 滤镜: 将彩色照片显示为黑白照片、保留图片层次
@mixin grayscale {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}
// 模糊  毛玻璃效果
@mixin blur($blur: 10px) {
  -webkit-filter: blur($blur);
 
  -moz-filter: blur($blur);
  -o-filter: blur($blur);
  -ms-filter: blur($blur);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='${blur}');
  filter: blur($blur);
  *zoom: 1;
}
 
// 鼠标禁用样式，但仍然可以触发事件
@mixin disabled {
  cursor: not-allowed;
}
 
// 4.图形
 
// 三角形
@mixin triangle($width: 4px, $color: #000) {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  border-top: $width solid $color;
  border-left: $width solid transparent;
  border-right: $width solid transparent;
}


**// 背景图片
@mixin bgImage($path) {
  background-image: url($path + '@2x.png');
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url($path + '@3x.png');
  }
}

// 居中布局
@mixin center() {
  justify-content: center;
  align-content: center;
}

// 不换行
@mixin no-wrap() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@mixin top-line($c: #c7c7c7) {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid $c;
  color: $c;
  transform-origin: 0 0;
  transform: scaleY(0.5);
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    transform: scaleY(0.333333333);
  }
}

@mixin bottom-line($c: #E6E6E6) {
  content: ' ';
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid $c;
  color: $c;
  transform-origin: 0 100%;
  transform: scaleY(0.5);
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    transform: scaleY(0.333333333);
  }
}

@mixin left-line($c: #c7c7c7) {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-left: 1px solid $c;
  color: $c;
  transform-origin: 0 0;
  transform: scaleX(0.5);
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    transform: scaleX(0.333333333);
  }
}

@mixin right-line($c: #c7c7c7) {
  content: ' ';
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-right: 1px solid $c;
  color: $c;
  transform-origin: 100% 0;
  transform: scaleX(0.5);
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    transform: scaleX(0.333333333);
  }
}

@mixin line($c: #c7c7c7, $border-radius: 0) {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 200%;
  border: 1px solid $c;
  color: $c;
  transform-origin: left top;
  @if ($border-radius != 0) {
    border-radius: $border-radius * 2;
  }
  transform: scale(0.5);
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    @if ($border-radius != 0) {
      border-radius: $border-radius * 3;
    }
    width: 300%;
    height: 300%;
    transform: scale(0.333333333);
  }
}

// 一像素上边框
@mixin border-top-1px($color: #c7c7c7) {
  position: relative;
  &:before {
    @include top-line();
  }
}

// 一像素下边框
@mixin border-bottom-1px($color: #c7c7c7) {
  position: relative;
  &:after {
    @include bottom-line();
  }
}

// 一像素上下边框
@mixin border-top-bottom-1px($color: #c7c7c7) {
  position: relative;
  &:before {
    @include top-line();
  }
  &:after {
    @include bottom-line();
  }
}

// 一像素左边框
@mixin border-left-1px($color: #c7c7c7) {
  position: relative;
  &:before {
    @include left-line();
  }
}

// 一像素右边框
@mixin border-right-1px($color: #c7c7c7) {
  position: relative;
  &:before {
    @include right-line();
  }
}

// 一像素边框
@mixin border-1px($color: #c7c7c7, $position: relative, $border-radius: 0) {
  position: $position;
  &:after {
    @include line($color, $border-radius);
  }
}

2.使用方法

2.1首先在使用界面style里面导入mixin（vue以例子）

@import url(‘地址’)

在这里插入图片描述

2.2.具体使用

sass中以@include+类名导入，括号里面传入具体的参数
在这里插入图片描述

3.less的mixin用法

3.1先建mixin.less文件，定义方法跟sass有所不同

//flex布局复用
.flex(@hov:space-between,@col:center) {
    display: flex;
    justify-content: @hov;
    align-items: @col;
  }
  .bgImg(@w:0,@h:0,@img:'',@size:contain) {
    display: inline-block;
    width: @w;
    height: @h;
    background: url(@img) no-repeat center;
    background-size: @size;
  }
 .position(@pos:absolute,@top:0,@left:0,@w:100%,@h:100%) {
    position: @pos;
    top: @top;
    left: @left;
    width: @w;
    height: @h;
  }
 .positionImg(@pos:absolute,@top:0,@right:0,@w:0,@h:0,@img:'') {
    position: @pos;
    top: @top;
    right: @right;
    width: @w;
    height: @h;
    background: url(@img) no-repeat center;
    background-size: contain;
  }
  .height(@h:0,@lh:@h) {
    height: @h;
    line-height: @lh;
  }
 .wH(@w:0,@h:0) {
    width: @w;
    height: @h;
  }
.border(@bw:1px,@bc:@colorF,@bs:solid) {
    border: @bw @bs @bc;
  }

3.2@import引入后使用方法

主要以 .+类名使用

  .bgImg(22px,22px,'../../public/imgs/icon-cart-hover.png');

在这里插入图片描述

CSS预处理器sass和less
weixin_68658847的博客
02-21 2528
CSS预处理器sass和less
vue引入全局sass/less变量、function、mixin
Myinlg的博客
07-26 2925
当我们使用vue框架开发的时候，会使用一些全局配置，但是每当我们使用这些全局变量时，每个vue文件或者组件都必须导入该文件@import ‘variables.scss’,那得重复做这样的工作很多很多...次，过程显得非常繁琐。 下面给大家介绍一个解决该难题的办法，好了废话不多说，直接上干货，sass-resources-loader,它可以省去重复性的引入，还支持less,postcss等，具...
Less实战（三）：混合（Mixins）
数据库爆破专家的博客
05-06 2008
文章目录混合（Mixins）Mixins中的选择器命名空间!important 关键词参数传递混合匹配选择器函数功能混叠（Aliasing Mixins） 混合（Mixins） 混合（Mixin） 是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。 Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。 @c...
Less 混合方法（mixin）
最新发布
听海边涛声
08-25 1673
Less 混合方法（mixin）
Less/Sass预处理器
以码平川的博客
03-09 892
Less,Sass预处理器教程 1.0 CSS预处理器的介绍 CSS预处理器 基于CSS的另一种语言 通过工具编译成CSS 添加了很多CSS不具备的特性 能提升CSS文件的组织方式 CSS预处理器到底提供了哪些功能? 嵌套 反映层级和约束 变量和计算,减少重复代码 Extend和Mixin代码片段 循环 适用于复杂有规律的样式 import CSS文件模块化 Nesting(嵌套) less 嵌套 因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加
快速搞定 Less 之 —— Mixins
我是张跑跑
10-14 1526
快速搞定 Less 之 —— Mixins
less和mixin
huali_1995的博客
08-28 469
作为CSS的一种扩展，LESSCSS不仅向下兼容CSS的语法，而且连新增的特性也是使用CSS的语法。这样的设计使得学习LESS很轻松，而且你可以在任何时候回退到CSS。变量@nice-blue: #5B83AD; @light-blue: @nice-blue + #111;#header { color: @light-blue; }输出：#header { color: #6c94be; }甚至
详解vue项目中如何引入全局sass/less变量、function、mixin
08-27
Vue 项目中如何引入全局 Sass/Less 变量、函数、Mixin 在 Vue 项目中，如何引入全局 Sass/Less 变量、函数...使用 sass-resources-loader 是 Vue 项目中引入全局 Sass/Less 变量、函数、Mixin 的一种简洁高效的方法。
有关CSS预处理器的比较选择(Sass&Less&Stylus)
07-02 1613
CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数
Sass与Less Mixin封装实践与示例
6. **使用方法**：在Less代码中，通过`@include`指令结合Mixins名称，可以方便地引入和使用这些预定义的样式规则。 7. **适用场景**：这些Mixin适用于各种Web开发项目，尤其是那些需要跨浏览器兼容性和高效代码维护...
sass与less的简单基本总结
冰封大海
06-24 559
1.拓展名 less的文件拓展名是xxx.less sass的拓展名是xxx.scss(Sassy CSS)或xxx.sass(Indented Sass缩进格式) 2.变量 sass中的变量以$开头，例： $width: 12rem; #main:{ width:$width; } less中的变量以@开头，例： @width:12rem; #main:{...
Flex.less:一套用于CSS3 Flex布局的Less mixins
05-26
灵活少 一个的混入。 可用的混合 混合名称及其值对应于正式草案。 display justify-content align-items align-self align-content order flex flex-grow flex-shrink flex-basis flex-direction flex-wrap flex-flow 浏览器兼容性 在Firefox <22中，您需要将以下代码段添加到您设置的display: flex每个元素中display: flex 。 /* * Legacy Firefox implementation treats all flex containers * as inline-block elements. */ @-moz-document url-prefix() { # selector
less、scss mixin简单使用
weixin_41881346的博客
06-28 226
less scss
less-mixin（混入）
稻草人
06-17 3471
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; }#menu a { color: #111; .bordered; }.post a { color: red; .bordered; }输出： .bordered { border-top: dotted 1px blac
less和scss分别使用@mixin
zhu_haiyun的博客
06-02 1383
scss使用@mixin @mixin size($width: 10px; $height: 10px) { width: $width; height: $height; } @include size(12px;12px); @mixin square($size) { @include size($size, $size); } @include size(14px;14px); less使用@mixin .size(@width: 10px;@height: 10px.
less : 写一个display:flex的mixin
weixin_30915951的博客
03-20 283
和scss一样，less也是一个好用的css预处理语言，语法也很相近。 而我们在使用display:flex的时候，很容易苦恼于里面的设置的单词很难记（尤其是对我这种英语很差的人来说）。 所以我们可以写一个display:flex的mixin。 上代码。 .flex_init_func(@jc: flex-start, @ai: stretch){ display: flex...
CSS预处理 Less和Sass总结
Hiroshi's
02-19 368
less基于nodejs编写 sass用ruby写的，用node-sass包解决编译问题 less中变量用@ less中定义mixin.block 使用： lessc命令编译less文件方法： mixin”属性只能基于现在已有的样式规则！你可以在mixin中使用类选择器和id选择器： .a,#b{ color: rebeccapurple; } .mixin-class{ .a(); } .mixin-id{ #b(); } 输出： .a, #b { color:..
css(7)less和flex的基本知识
m0_62520946的博客
02-27 434
less 简介 less是一门css的预处理，是一个css的增强版，通过less可以写更少的代码实现更强大的样式 在less中添加了许多的新特性，eg对变量的支持，对mixin的支持 less的语法大体上和css语法一致，但less中增添了许多对css的扩展 所以浏览器无法直接执行less代码，要执行必须将less转换为css，然后再由浏览器执行 示例： <!DOCTYPE html> <html> <head> <meta charset="
less函数的自调用不生效怎么回事？
weixin_41859136的博客
10-13 927
less函数的自调用不生效怎么回事？ @adapterDeviceList:750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px; //设计稿 @psdWidth:750px; //预设 @baseFontSize:100px; @len:length(@adapterDeviceList); .adapt...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值