本文介绍: var 表示变量,start表示开始值,end表示结束值,两种形式的区别在于 through 包括 end 的值,to 不包括 end 值。sass中使用@mixin声明混合,可以传递参数,参数名义$符号开始,多个参数以逗号分开,如果参数有多组值,那么在变量后面加三个点表示,如: $var…default即可, 默认变量一般用来设置默认值,当该变量出现另外一个值时,无论定义先后,都会使用另外一个值,覆盖默认值。在标准注释 /*后面加入一个感叹号,表示重要注释,压缩模式也会保留注释,用于版权声明等。
一、什么是Sass
Sass (Syntactically Awesome StyleSheets)是css的一个扩展开发工具,它允许你使用变量、条件语句等,使开发更简单可维护。这里是官方文档。
二、基本语法
1)变量
sass的变量名必须是一个$符号开头,后面紧跟变量名。
//sass 样式
$red: #f00;
div {
color: $red;
}
// 编译为css后
div {
color:#f00;
}
特殊变量:如果变量嵌套在字符串中,则需要写在 #{} 符号里面,如:
$top: top;
div {
margin-#{$top}: 10px; /* margin-top: 10px; */
}
默认变量:仅需在值后面加入 !default即可, 默认变量一般用来设置默认值,当该变量出现另外一个值时,无论定义先后,都会使用另外一个值,覆盖默认值
$color: red;
$color: blue !default;
div {
color: $color; /* color:red; */
}
多值变量:多值变量分为list类型和map类型,list有点像js对象中的数组,map类型像js中的对象
list : 可通过空格,逗号或小括号分割多个值,使用 nth($变量名, $索引)取值
1
2
3
4
5
6
7
8
9
10
11
12
|
//一维数据
$px: 5px 10px 20px 30px;
//二维数据,相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);
// 例子
$px: 10px 20px;
div {
margin:nth($px, 1) 0 0 nth($px, 2); /* margin:10px 0 0 20px; */
}
|
map: 数据以key和value组成,格式:$map: (key1: value1, key2: value2); 通过map-get($map, $key);
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}
2)计算功能
sass允许使用算式。
1
2
3
4
5
|
div {
padding: 2px * 4px;
margin: (10px / 2);
font-size: 12px + 4px;
}
|
3)嵌套
标签嵌套
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
// sass 样式
div {
color: #333;
a {
font-size:14px;
&:hover {
text-decoration:underline;
}
}
}
// 编译后css
div {
color: #333;
}
div a {
font-size:14px;
}
div a:hover {
text-decoration:underline;
}
|
属性嵌套:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
//sass 样式
.fakeshadow {
border: {
style: solid;
left: {
width: 4px;
color: #888;
}
right: {
width: 2px;
color: #ccc;
}
}
}
//css 编译后样式
.fakeshadow {
border-style: solid;
border-left-width: 4px;
border-left-color: #888;
border-right-width: 2px;
border-right-color: #ccc;
}
|
4)注释
sass有两种注释风格
标准css注释: /* 注释 */, 会保留到编译后的文件中,压缩则删除
单行注释: // 注释
在标准注释 /*后面加入一个感叹号,表示重要注释,压缩模式也会保留注释,用于版权声明等。
5)继承
sass 中,选择器继承可以让选择器继承另一个选择器的所有样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// sass样式
h1 {
font-size:20px;
}
div {
@extend h1;
color:red;
}
// css编译后样式
h1 {
font-size:20px;
}
div {
font-size:20px;
color:red;
}
|
使用占位符选择器 %
从sass3.2.0后,就可以定义占位选择器%,这个的优势在于,不调用不会有多余的css文件
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// sass样式
%h1 {
font-size:20px;
}
div {
@extend %h1;
color:red;
}
// css编译后样式
div {
font-size:20px;
color:red;
}
|
6)混合(mixin)
sass中使用@mixin声明混合,可以传递参数,参数名义$符号开始,多个参数以逗号分开,如果参数有多组值,那么在变量后面加三个点表示,如: $var…
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
//sass 样式
@mixin opacity($opacity:50) {
opacity: $opacity / 100;
filter: alpha(opacity=$opacity);
}
.opacity{
@include opacity; //参数使用默认值 50/100 = 0.5
}
.opacity-80{
@include opacity(80); //传递参数 80/100 = 0.8
}
// css编译后样式
.opacity{
opacity: 0.5;
filter: alpha(opacity=50);
}
// ---------------------
// 多参数
@mixin center($width, $height) {
position: absolute;
left:50%;
top:50%;
width:$width;
height:$height;
margin:(-$height / 2) 0 0 (-$width / 2);
}
div {
@include center(200px, 100px);
}
// css编译后样式
div {
position: absolute;
left:50%;
top:50%;
width:200px;
height:100px;
margin:-50px 0 0 -100px;
}
// -------------------
//多组值
@mixin box-shadow($shadow...) {
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
}
div {
@include box-shadow(0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4));
}
// css编译后样式
div {
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4);
box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4);
}
|
@content:在sass3.2.0中引入, 可以用来解决css3中 @meidia 或者 @keyframes 带来的问题。它可以使@mixin接受一整块样式,接收的样式从@content开始
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
//sass 样式
@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 }
}
|
使用@content解决@keyframes关键帧的浏览器前缀问题
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
|
// 初始化变量
$browser: null ;
// 设置关键帧
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
$browser: '-webkit-' ; @content;
}
@-moz-keyframes #{$name} {
$browser: '-moz-' ; @content;
}
@-o-keyframes #{$name} {
$browser: '-o-' ; @content;
}
@keyframes #{$name} {
$browser: '' ; @content;
}
}
// 引入
@include keyframes(scale) {
100% {
#{$browser}transform: scale(0.8);
}
}
// css编译后
@-webkit-keyframes scale {
-webkit-transform: scale(0.8);
}
@-moz-keyframes scale {
-moz-transform: scale(0.8);
}
@-o-keyframes scale {
-o-transform: scale(0.8);
}
@keyframes scale {
transform: scale(0.8);
}
|
7)颜色函数
sass提供了一些内置的颜色函数
1
2
3
4
|
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
|
8)引入外部文件
使用 @import 命令引入外部文件, 引入后,可使用外部文件中的变量等。
三、高级用法
1)函数 function
sass允许用户编写自己的函数,以@function开始
1
2
3
4
5
6
7
8
9
10
11
|
$fontSize: 10px;
@function pxTorem($px) {
@ return $px / $fontSize * 1rem;
}
div {
font-size: pxTorem(16px);
}
// css编译后样式
div {
font-size: 1.6rem;
}
|
2)if条件语句
@if语句可以用来判断
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// sass样式
$type: monster;
div {
@ if $type == ocean {
color: blue;
} @ else if $type == matador {
color: red;
} @ else if $type == monster {
color: green;
} @ else {
color: black;
}
}
// css编译后样式
div {
color: green;
}
|
三目判断:语法为 if($condition, $if_true, $if_false)。 三个参数分别表示: 条件,条件为真的值,条件为假的值
if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px
3)循环语句
for循环有两种形式,分别为:@for $var from <start> through <end> 和 @for $var from <start> to <end>。 $var 表示变量,start表示开始值,end表示结束值,两种形式的区别在于 through 包括 end 的值,to 不包括 end 值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// sass样式
@ for $i from 1 to 4 {
.item-#{$i} {width: 2em * $i;}
}
// css编译后样式
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
|
while循环
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// sass样式
$i: 2;
@ while $i > 0 {
.item-#{$i} {width: 2em * $i;}
$i: $i - 1;
}
// css编译后样式
.item-2 {
width: 4em;
}
.item-1 {
width: 2em;
}
|
@each循环:语法为@each $var in <list or map>。 其中$var表示变量,而list和map表示数据类型,sass3.3.0新加入多字段循环和map数据循环
单字段list数据循环
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
//sass 样式
$animal-list: puma, sea-slug, egret;
@each $animal in $animal-list {
.#{$animal}-icon {
background-image: url( '/images/#{$animal}.png' );
}
}
//css 编译后样式
.puma-icon {
background-image: url( '/images/puma.png' );
}
.sea-slug-icon {
background-image: url( '/images/sea-slug.png' );
}
.egret-icon {
background-image: url( '/images/egret.png' );
}
|
多字段list数据循环
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
//sass 样式
$animal-data: (puma, black, default ),(sea-slug, blue, pointer);
@each $animal, $color, $cursor in $animal-data {
.#{$animal}-icon {
background-image: url( '/images/#{$animal}.png' );
border: 2px solid $color;
cursor: $cursor;
}
}
//css 编译后样式
.puma-icon {
background-image: url( '/images/puma.png' );
border: 2px solid black;
cursor: default ;
}
.sea-slug-icon {
background-image: url( '/images/sea-slug.png' );
border: 2px solid blue;
cursor: pointer;
}
|
多字段map数据循环
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
//sass 样式
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}
//css 编译后样式
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
|
原文地址:https://blog.csdn.net/weixin_46272787/article/details/135814209
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_62195.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。