Sass是一种动态样式语言,比CSS多出好些功能(如变量、嵌套、运算、混入、继承、颜色处理、函数等),更容易阅读。
Sass和Less是当下最为流行的2门CSS预处理语言
(1)Sass由于是使用Ruby编写的,所以编译的时候是在服务器端处理;
而Less由于是使用JavaScript编写的,所以编译的时候是在浏览器端处理;
(2)Sass拥有更为强大的功能,如循环、函数、混合宏等,而less却没有;
(3)Sass拥有成熟稳定的框架来辅助开发,特别是Compass,而less却没有;
(4)Sass在国内外讨论热度最大,并且有一个稳定强大的团队在维护;
(5)相当多的公司更为倾向于使用Sass,而不是less;
在Sass中,有2种语法格式:(1)Sass格式;(2)Scss格式
Sass格式:不使用大括号“{}”和分号“;”,使用严格的缩进式语法
Scss格式:使用大括号“{}”和分号“;”,并不使用严格的缩进式语法规则
Sass的安装和使用
Sass的语法基础
Sass变量
一般值,这个值可以是数字、字符串
$width:10px;
div{ font-size:$width; }
div{ font-size:10px; } // 编译出来的CSS代码
-------------------------------------------------
$width:10px !default;
.div1 { width:$width; }
.div2 { $width:20px; width:$width; }
.div1{ width:10px; }
.div2{ width:20px; }
--------------------------------------------
变量的作用域:(1)全局变量;(2)局部变量。
$color:red; //定义全局变量
body{
$color:green; //定义局部变量
div { color:$color; //调用局部变量 }
}
数据类型
数字值
$lineHeight:1.5;
$fontSize:14px;
$width:50%;
字符串:有引号---无引号
$logoUrl: "images/logo.png";
$str2:bold;
布尔值:用于“@if…@esle…语句”
$a:10px;
$b:5px;
@if($a>$b){ ... } @else { ... }
颜色值
(1)关键字颜色值,如red;
(2)十六进制颜色值,如#FFFF00;
(3)RGB颜色值,如rgb(255,255,0);
(4)HSL颜色值,如;hsl(360,50%,50%);
列表值
$margin:20px 40px;
$border:1px solid gray;
Map值
$变量名: ( 键名1:值1, …… 键名n:值n );
Sass嵌套
(1)选择器嵌套;
$color1:red;
$color2:green;
body{
color:$color1;
.column
{ color:$color2; } }
编译
body { color: red; }
body .column { color: green; }
(2)属性嵌套;--- CSS有些属性的前缀是相同的
(1)border-top、border-right、border-bottom、border-left----“border”;
(2)margin-top、margin-right、margin-bottom、margin-left----“margin”;
(3)font-family、font-size、font-weight、font-variant-----“font”;
font:{ family:Arial; size:14px; weight:bold;} // 嵌套属性前缀加冒号“:”
变成:font-family: Arial; font-size: 14px; font-weight: bold;
(3)伪类嵌套;--- 借助“&”符号
$color1:red;
$color2:green;
a{ color:$color1; &:hover { color:$color2; } }
编译
a{ color: red; }
a:hover { color: green; }
Sass插值
#{变量}
.item-#{$i} // 插值用于“选择器名”
.item-$i // 错误!!
#{$border}-width:1px; // 插值用于“属性名”
border:#{$i}px solid red; // 插值用于“属性值”
Sass注释
在Sass注释方式:(1)//注释内容;---- 编译后不会保留
(2)/*注释内容*/;
(3)/*!注释内容*/。 ----保留一些版权声明的注释说明
Sass基本运算
数字运算
一、Sass加法-减法
width:(100px + 20px); // width:120px;
width:(100px + 20em); // Incompatible units: 'em' and 'px'
width: ($sidebar-width + $content-width + $gap-width)
减号“-”前后一定要有空格
width: ($container-width-$sidebar-width);
无法正确地识别哪个“-”是变量的一部分,哪个“-”是减号
三、Sass乘法
width:(100px * 2); // width:200px;
width:(100px * 2px); // 两个都带单位,报错,200px*px
@for $i from 1 through 3{
.item-#{$i} { width:10px * $i; } }
编译出来
.item-1{ width: 10px; }
.item-2{ width: 20px; }
.item-3{ width: 30px; }
--------------------------------------------------------
四、Sass除法
font:20px/10px; //纯CSS,不是除法运算
width:(20px/10px); //使用了小括号,是除法运算,符合第1点
height:$height/2; //使用了变量,是除法运算,符合第3点
line-height:round(1.5)/2; //使用了函数,是除法运算,符合第3点
margin-left:10px + 10px/2px; //使用了加号,是除法运算,符合第2点
字符运算
content: "fzx " + cookie; // content: "fzx cookie";
左边字符串是没有引号的,右边字符串是有引号的,结果是一个没有引号的字符串
颜色运算
color: (#010203 + #040506); // color: #050709;
color: (#010203 * 2); // color: #020406;
color:(rgb(17,34,51) *2); // color: #224466;
rgb(17,34,51转化为十六进制颜色值为“#112233”,然后进行乘法运算
Sass代码重用
(1)继承“@extend”;
.spriteAll{ bakckground:url(images/sprite.png) no-repeat; }
.sprite-1{
@extend .spriteAll;
background-position:0 -30px;}
编译出来
.spriteAll, .sprite-1{ bakckground: url(images/sprite.png) no-repeat;}
.sprite-1{ background-position: 0 -30px; }
(2)占位符“%placeholder”;
- 需要保留基类的:只使用@extend来实现;
- 不需要保留基类的:使用@extend配合%placeholder来实现;
%btn{ border:1px solid silver; }
.btn-primary{
@extend %btn;
background-color:red;}
编译
.btn-primary{ border: 1px solid silver;}
.btn-primary { background-color: red;}
(3)混合宏“@mixin”;
用“混合宏(mixin)”来处理经常被多个地方使用的相同的CSS代码块
用“@mixin”来定义一个混合宏,然后使用“@include”来调用一个混合宏
@mixin 混合宏名{ 样式属性1:取值1; …… } //定义一个混合宏
选择器{ @include 混合宏名; } //调用一个混合宏
@mixin center($width){
width: $width;
margin-left: -($width) / 2;
}
div{ @include center(100px);}
编译出来
div { width: 100px; margin-left: -50px;}
---------------------------------
@mixin radius($radius:3px) // 参数带默认值
@include radius;
@include radius(5px);
(1)继承和混合宏都能实现相同代码块的重用,极大提高开发效率;
(2)继承的使用一般不存在代码冗余,而混合宏的使用会存在代码冗余;
(3)继承不可以传递参数,而混合宏可以传递参数;
流程控制
(1)@if语句;
(1)@if…(单向选择);
(2)@if…@else…(双向选择);
(3)@if…@else if…(多向选择);
@mixin checkColor ($width){
@if ($width>100px) { color:red; }
@else if ($width<100px){ color:green; }
@else{ color:blue; }
}
div{ @include checkColor(100px); }
编译:
div{ color:blue;}
(2)@for循环;
方式1:@for $i from 开始值 through 结束值 --- 包括结束值
方式2:@for $i from 开始值 to 结束值 --- 不包括结束值
@for $i from 1 through 2{
.border-#{$i} { border:#{$i}px solid red; }
}
.border-1{ border: 1px solid red; }
.border-2{ border: 2px solid red;}
(3)@while循环;
$i:3;
@while ($i>0){
.item-#{$i} { width: (20px + $i); }
$i : ($i - 1); //递减操作
}
(4)@each循环;
用@each循环快速生成背景图片样式
$list:sprite1,sprite2;
%spriteAll{ background:url("images/sprite.png") no-repeat; }
@each $var in $list{
.#{$var} {
@extend %spriteAll;
background-position: 0 index($list,$var) * (-30px);
}
}
编译
.sprite1, .sprite2{ background: url("images/sprite.png") no-repeat;}
.sprite1{ background-position: 0 -30px; }
.sprite2{ background-position: 0 -60px; }