基础(二)
嵌套-伪类嵌套 伪类嵌套和属性嵌套非常类似,只不过他需要借助“&”符号一起配合使用 例如:sass
.clearfix{
&:before,
&:after {
content:"";
display: table;
}
&:after {
clear:both;
overflow: hidden;
}
}
编译出来的 CSS:
clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
overflow: hidden;
}
混合宏-声明混合宏 如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的。 但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到我们目了。 不带参数混合宏: 在 Sass 中,使用“@mixin”来声明一个混合宏。
@mixin border-radius{
-webkit-border-radius: 5px;
border-radius: 5px;
}
复杂的混合宏: Sass中的混合宏还提供更为复杂的,你可以在括号里写上带有逻辑关系,帮助更好的做你想做的事情。
@mixin box-shadow($shadow...){
@if length($shadow) >= 1{
@include prefixer(box-shadow,$shadow);
}@else{
$shadow:0 0 4px rgba(0,0,.3);
@include prefixer(box-shadow,$shadow);
}
}
这个 box-shadow 的混合宏,带有多个参数,这个时候可以使用“ … ”来替代。简单的解释一下,当 $shadow 的参数数量值大于或 等于“ 1 ”时,表示有多个阴影值,反之调用默认的参数值“ 0 0 4px rgba(0,0,0,.3) ”。 混合宏-调用混合宏 在Sass 中通过@mixin 关键词声明了一个混合宏,那么在实际调用中,在匹配了一个关键词“@include”来调用声明好 的混合宏。
@mixin border-radius{
-webkit-border-radius:3px;
border-radius:3px;
}
在一个按钮中腰调用定义好的混合宏“border-radius”可以这样使用
button{
@include border-radius;
}
编译出来的css
button{
-webkit-border-radius:3px;
border-radius:3px;
}
混合宏的参数-传一个不带值的参数 Sass 的混合宏有一个强大的功能,可以传参,那么在Sass中传参主要有以下几种形式 (A)传一个不带值的参数 在混合和宏中,可以穿个不在任何值的参数 比如:
@mixin border-radius($radius){
-webkit-border-radius:$radius:
border-radius:$radius:
}
在混合宏“border-radius”中定义了一个不带任何值的参数$radius 在调用的时候可以给这个混合宏专递一个数值
.box{
@include border-radius(3px);
}
在这里表示混合宏传递了一个“border-radius”的值为“3px”。
.box{
-webkit-border-radius:3px;
border-radius:3px;
}
混合宏的参数-传个带值的参数 在Sass的混合宏中,还可以给混合宏的参数传递一个默认值,例如:
@mixin border-radius($radius:3px){
-webkit-border-radius:$radius;
border-radius:$radius;
}
混合宏“border-radius”传了一个参数“$radius”,而且给这个参数赋予了一个默认值“3px”。
在调用类似这样的混合宏时,会多有一个机会,假设你的页面中的圆角很多地方都是“3px”的圆角,那么这个时候只 需要调用默认的混合宏“border-radius”:
.btn {
@include border-radius;
}
编译出来的CSS
.btn{
-webkit-border-radius:3px
border-radius:3px
}
但有的时候,页面中有些元素的圆角值不一样,那么可以随机给混合宏传值,如: .box { @include border-radius(50%); } 编译出来的 CSS: .box { -webkit-border-radius: 50%; border-radius: 50%; } 混合宏的参数-传多个参数 Sass 混合宏除了能传一个参数之外,还可以传多个参数,如:
@mixin center($width,$height){
width:$width;
height:$height;
position:absolute;
top:50%;
left:50%:
margin-top:($height)/2;
margin-left:-($width)/2;
}
在混合宏“center”就传了多个参数。在实际调用其他混合宏是一样的。 .box-center{ @include center(500px,300px); } 编译出来 css
.box-center{
width:500px;
height:300px;
position:absolute;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-250px;
}
有一个特别的参数“...”,当混合宏穿的参数传的参数过多之时,可以使用参数来代替 如;
@mixin box-shadow($shadows...){
@if length($shadows) >=1{
-webkit-box-shadow:$shadows;
box-shadow:$shadows;
}@else{
$shadows: 0 0 2px rgba(#000,.25);
-webkit-box-shadow:$shadow;
box-shadow:$shadow;
}
}
在实际调用中: .box{ @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2)); } 编译出来的css: .box{ -webkit-box-shadow:0 0 1px rgba(0,0,0,0.5),0 0 2px rgba(0,0,0,0.2); box-shadow:0 0 1px rgba(0,0,0,0.5),0 0 2px rgba(0,0,0,0.2); } 混合宏的参数--混合宏的不足 混合宏在实际编码中给我们带来很多方便之处,特别是对于复用重复代码块,但是最大的不足之处是生产 冗余的代码块,比如在不同的地方调用一个相同的混合宏。
@mixin border-radius{
-webkit-border-radius:3px;
border-radius:3px;
}
. box{
@include border-radius;
margin-bottom:5px;
}
.btn{
@include border-radius;
}
示例在“.box”和“.btn”中等能调用了定义好的“border-radius”混合宏。先来看编译出来的css;
.box{
-webkit-border-radius:3px;
border-radius:3px;
margin-bottom:5px;
}
.btn{
-webkit-border-radius;3ox;
border-radius:3px;
}
sass 在调用相同的混合宏时,并不能智能的将相同的样式代码块合并在一起。这也是 Sass 的混合宏最不足之处
- httpd配置ResponseHeader
- 针对iPhone的pt、Android的dp、HTML的css像素与dpr、设计尺寸和物理像素的浅分析
- babel入门基础
- 如何构建爬虫代理服务?
- (19) 接口的本质 / 计算机程序的思维逻辑
- (18) 为什么说继承是把双刃剑 / 计算机程序的思维逻辑
- 有效的python属性管理:描述符的使用
- (17) 继承实现的基本原理 / 计算机程序的思维逻辑
- (16) 继承的细节
- Python时间处理完全手册
- 计算机程序的思维逻辑 (15) - 初识继承和多态
- 前端自动化测试漫长路之——Selenium初探
- 计算机程序的思维逻辑 (14) - 类的组合
- webpack中tree-shaking技术介绍
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法