Sass学习笔记 -- 混合器
如果你的整个网站中有几处小小的样式类似(例如一致的颜色和字体),那么使用变量来统 一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂,你需要大段大段的重用样 式的代码,独立的变量就没办法应付这种情况了。你可以通过Sass的混合器实现大段样式的重用。
混合器使用@mixin标识符定义。看上去很像其他的CSS @标识符,比如说@media或者CSS3 的@font-face。这个标识符给一大段样式赋予一个名字,这样你就可以轻易地通过引用这个名 字重用这段样式。
下边的这段Sass代码,定义了一个非常简单的混合器,目的是添加跨浏览器的圆角边框。
1
2
3
4
5
6
|
//scss
@mixin rounded-corners {
-moz-border-radius: 5px ;
-webkit-border-radius: 5px ;
border-radius: 5px ;
}
|
然后就可以在你的样式表中通过@include来使用这个混合器,放在你希望的任何地方。 @include调用会把混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
//scss
.notice {
background-color : green ;
border : 2px solid #00aa00 ;
@include rounded-corners;
}
//css
.notice {
background-color : green ;
border : 2px solid #00aa00 ;
-moz-border-radius: 5px ;
-webkit-border-radius: 5px ;
border-radius: 5px ;
}
|
mixin可以接收和使用参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
//scss
@mixin opacity($opacity: 50 ) {
opacity: $opacity / 100 ;
filter: alpha(opacity=$opacity);}
.opacity{ @include opacity; //参数使用默认值
}
.opacity -80 { @include opacity( 80 ); //传递参数
}
//css
.opacity {
opacity: 0.5 ;
filter: alpha(opacity= 50 );
}
.opacity -80 {
opacity: 0.8 ;
filter: alpha(opacity= 80 );
}
|
多个参数mixin
调用时可直接传入值,如@include传入参数的个数小于@mixin定义参数的个数,则按照顺序表示,后面不足的使用默认值,如不足的没有默认值则报错。除此之外还可以选择性的传入参数,使用参数名与值同时传入。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
//scss
@mixin horizontal-line($ border : 1px dashed #ccc , $ padding : 10px ){
border-bottom :$border;
padding-top :$padding;
padding-bottom :$padding; }
.imgtext-h li{ @include horizontal-line( 1px solid #ccc );}
.imgtext-h--product li{ @include horizontal-line($ padding : 15px );}
//css
.imgtext-h li {
border-bottom : 1px solid #ccc ;
padding-top : 10px ;
padding-bottom : 10px ;
}
.imgtext-h--product li {
border-bottom : 1px dashed #ccc ;
padding-top : 15px ;
padding-bottom : 15px ;
}
|
多组值参数mixin
如果一个参数可以有多组值,如box-shadow、transition等,那么参数则需要在变量后加三个点表示,如$variables...。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
//scss box-shadow可以有多组值,所以在变量参数后面添加...
@mixin box-shadow($shadow...) {
-webkit-box-shadow:$shadow;
box-shadow:$shadow;
}
.box{
border : 1px solid #ccc ;
@include box-shadow( 0 2px 2px rgba( 0 , 0 , 0 ,. 3 ), 0 3px 3px rgba( 0 , 0 , 0 ,. 3 ), 0 4px 4px rgba( 0 , 0 , 0 ,. 3 ));
}
//css
.box {
border : 1px solid #ccc ;
-webkit-box-shadow: 0 2px 2px rgba( 0 , 0 , 0 , 0.3 ), 0 3px 3px rgba( 0 , 0 , 0 , 0.3 ), 0 4px 4px rgba( 0 , 0 , 0 , 0.3 );
box-shadow: 0 2px 2px rgba( 0 , 0 , 0 , 0.3 ), 0 3px 3px rgba( 0 , 0 , 0 , 0.3 ), 0 4px 4px rgba( 0 , 0 , 0 , 0.3 );
}
|
如果不写这三个点,就会报错:混合器只带一个参数,却传入了3个参数
@content
@content在sass3.2.0中引入,可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式,接受的样式从@content开始。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//scss
@mixin max- screen ($res){
@media only screen and ( max-width : $res )
{
@content;
}
}
@include max- screen ( 480px ) {
body { color : red }
}
//css
@media only screen and ( max-width : 480px ) {
body {
color : red ;
}
}
|
PS:@mixin通过@include调用后解析出来的样式是以拷贝形式存在的,而下面的继承则是以联合声明的方式存在的,所以从3.2.0版本以后,建议传递参数的用@mixin,而非传递参数类的使用下面的继承。
继承
sass中,选择器继承可以让选择器继承另一个选择器的所有样式,并联合声明。使用选择器的继承,要使用关键词@extend,后面紧跟需要继承的选择器。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
//scss
h 1 {
border : 4px solid #ff9aa9 ;
}
.speaker{
@extend h 1 ;
border-width : 2px ;
}
//css
h 1 , .speaker {
border : 4px solid #ff9aa9 ;
}
.speaker {
border-width : 2px ;
}
|
占位选择符%
从sass 3.2.0以后就可以定义占位选择器%。这种选择器的优势在于:如果不调用则不会有任何多余的css文件,避免了以前在一些基础的文件中预定义了很多基础的样式,然后实际应用中不管是否使用了@extend去继承相应的样式,都会解析出来所有的样式。占位选择器以%标识定义,通过@extend调用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
//scss
%ir{
color : transparent ;
text-shadow : none ;
background-color : transparent ;
border : 0 ;
}
%clearfix{
@if ltie 7 {
*zoom: 1 ;
}
&:before,
&:after {
content : "" ;
display : table;
font : 0 / 0 a;
}
&:after {
clear : both ;
}
}
#header{
h 1 {
@extend %ir;
width : 300px ;
}
}
.ir{
@extend %ir;
}
//css
#header h 1 , .ir {
color : transparent ;
text-shadow : none ;
background-color : transparent ;
border : 0 ;
}
#header h 1 {
width : 300px ;
}
|
如上代码,定义了两个占位选择器%ir和%clearfix,其中%clearfix这个没有调用,所以解析出来的css样式也就没有clearfix部分。占位选择器的出现,使css文件更加简练可控,没有多余。所以可以用其定义一些基础的样式文件,然后根据需要调用产生相应的css。
ps:在@media中暂时不能使用@extend @media外的代码片段,以后将会可以。
关于@extend有两个要点
1、跟混合器相比,继承生成的CSS代码相对更少。因为继承仅仅是重复选择器,而不会重复 属性,所以使用继承往往比混合器生成的CSS体积更小。如果你非常关心你站点的速度, 请牢记这一点。
2、继承遵从CSS层叠的规则。当两个不同的CSS规则应用到同一个HTML元素上时,并且这 两个不同的CSS规则对同一属性的修饰存在不同的值,CSS层叠规则会决定应用哪个样 式。相当直观:通常权重更高的选择器胜出,如果权重相同,定义在后边的规则胜出
@mixin 和 @extend该如何选择呢? 可以先看两个实际的例子对比下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
//scss
.button {
background : green ;
}
.button -1 {
@extend .button;
}
.button -2 {
@extend .button;
}
//css
.button, .button -1 , .button -2 {
background : green ;
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
//scss
@mixin button {
background-color : green ;
}
.button -1 {
@include button;
}
.button -2 {
@include button;
}
//css
.button -1 {
background-color : green ;
}
.button -2 {
background-color : green ;
}
|
可以对比看出@extend编译出来的代码要更加的干净,但是@extend也有硬伤--不能传参
在大作数情况下@mixin会比@extend更好,但是它们俩都有自己的一席之地。当样式和选择器之间的关系在某些方面比较紧密的时候,使用@extend。除此之外,你可以使用@mixin在任何地方。
本文转自 frwupeng517 51CTO博客,原文链接:http://blog.51cto.com/dapengtalk/1871513
Sass学习笔记 -- 混合器相关推荐
- 菜鸟的 Sass 学习笔记
介绍 sass 是什么?? 在sass的官网,它是这么形容给自己的 Sass is the most mature, stable, and powerful professional grade C ...
- Sass学习笔记 -- 初步了解函数、运算、条件判断及循环
函数 sass定义了很多函数可供使用,当然你也可以自己定义函数,以@fuction开始.sass的官方函数链接为:sass fuction,实际项目中我们使用最多的应该是颜色函数,而颜色函数中又以li ...
- Sass学习笔记(一)
1 使用变量 $nav-color: #F90; nav {$width: 100px;width: $width;color: $nav-color; }//编译后nav {width: 100px ...
- sass学习笔记(二):sass的不同样式风格的输出方法
sass的不同样式风格的输出方法 1.嵌套式nested Sass 提供了一种嵌套显示 CSS 文件的方式.例如 nav {ul {margin: 0;padding: 0;list-style: n ...
- Sass学习笔记 — 4. 参考手册
Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式表结构良好, 同 ...
- Scss、elementUI引入、transition动画 - 学习笔记
文章目录 Scss.elementUI引入.transition动画 - 学习笔记 Sass 是什么? elementUI transition动画 Scss.elementUI引入.transiti ...
- vue 使用了浏览器的刷新之后报错_Laravel 7 + vue.js 学习笔记(一)
laravel laravel是php为底层所写的框架,和大多数的开源框架一样使用了mvc模式,在使用的时候使用了一些编程语言的高级特性,如:解决类与类之间依赖的问题引入了依赖注入(DI),管理多个类 ...
- webpack学习笔记1
webpack学习笔记1:基本概念 前言: 现在在日常的开发中,webpack已经是必不可少的东西了,现在的需求基本都是用webpack对资源进行打包整合,所以打算写一点关于webpack的东西,这是 ...
- JavaScript学习笔记:数组reduce()和reduceRight()方法
很多时候需要累加数组项的得到一个值(比如说求和).如果你碰到一个类似的问题,你想到的方法是什么呢?会不会和我一样,想到的就是使用for或while循环,对数组进行迭代,依次将他们的值加起来.比如: v ...
- 前端学习笔记:Bootstrap框架入门
前端学习笔记:Bootstrap框架入门 一.Bootstrap概述 1.基本信息 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS. ...
最新文章
- 【Kettle学习笔记】从Hbase导入数据至Mysql
- 中文分词最佳记录刷新了,两大模型分别解决中文分词及词性标注问题丨已开源...
- 保姆级教程:Spring Boot 单元测试
- jQuery-对Select的操作集合
- 二、抽象层的Builder模式
- js事件流、事件代理等
- 青年节寄语和新课程免费上架
- 阿帕奇链接mysql_apache guacamole 使用mysql 连接
- Linux多线程工作笔记0004---C语言中g++ -o -c -g 功能
- 使用Movavi Photo Editor如何修复照片中的红眼
- 青果教务处系统爬虫(java)
- 任正非:向谷歌军团学习,扑上去,杀出一条血路
- State Threads 回调终结者(ST线程库)
- JS写一个简单的五星评价
- 简单游戏的c语言程序,[C语言编写小程序]简单打飞碟游戏
- stm32——中断优先级管理
- bot机器人账号八大类特征分析---识别问题账号
- LDM522-MINI射频读卡模块 迷你款 手持平板门禁首选
- 细数最暖心的地铁营销事件,你最喜欢哪一个?
- URLEncode 编码
热门文章
- java 代码解压7z(带密码)转载请注明出处,谢谢
- OC 自定义 get/set 方法注意点
- Spring properties dependency checking
- java long类型6_Java学习6——基本数据类型及其转换
- GICv3驱动初始化
- USB-AUDIO初步分析
- 使用tinymini210开发远程的温度监控系统,实现C#和安卓客户端显示数据和控制
- Trie树讲解(例题:ACWING 835,ACWING 143)
- python 嵌套list的一些小结
- h5 iframe显示不全_干货|H5 唤醒APP小记