sass文件后缀为.scss
sass让人们最受益的一个重要特性就是它为css引入了变量。使用$来表示变量。
1、使用样式嵌套
标签嵌套:
div{
color:#333;
a{
font-size:12px;
&:hover{
text-decoration:underline;
}
}
}
属性嵌套:
div{
border:{
style:solid;
left:{
width:4px;
color:#888;
}
right:{
width:2px;
color:#ff0000;
}
}
}
编译后为:
div{
border-style:solid;
border-left-width:4px;
border-left-color:#888;
border-right-width:2px;
border-right-color:#ff0000;
}
父选择器的标识符&
在嵌套css规则时,有时也需要直接使用嵌套外层的父选择器,例如,当给某个元素设定hover样式时,可以使用&代表嵌套外层的父选择器。
<template>
<div class="container">
<div><a>这个世界真美好!<span>哈哈</span></a></div>
</div>
</template>
<style lang="scss">
.container a{
span{
color: green;
}
&:hover{
color: orange;
}
}
</style>
&必须作为选择器的第一个字符,其后可以跟随后缀生成符合的选择器,例如:
#main {
color: black;
&-sidebar { border: 1px solid; }
}
编译为:
#main { color: black; }
#main-sidebar { border: 1px solid; }
2、声明变量
变量是用$开头,后面紧跟变量名。
$red:red;
div{
color:$red;
}
编译后结果为:
div{
color:red;
}
特殊变量
特殊变量,如果变量嵌套在字符串中,则需要写在#{}符合里面,例如:
$top:top;
div{
margin-#{$top}:10px;
}
默认变量
默认变量,仅需要在值后面加入!default即可。默认变量一般用来设置默认值,当该变量出现另外一个值时,无论定义先后,都会使用另外一个值,覆盖默认值。
$color:red;
$color:blue !default;
div{
color:$color;/*结果是color:red;读取的是red*//
}
全局!global
如果我们在局部定义了一个变量,如果想要在作用域外面使用,需要在这个变量后面加一个!global即可。
实例:
.d1{
$n1:#333 !global;
}
.d2{
color:$n1;
}
上述例子中,变量$n1是在d1中声明的,如果想在d2中使用,那么就在n1后面加上!global
通过@import导入文件
可以将多个scss合并为一个。
导入sass文件:
实例:
现有a.scss,b.scss文件,全部导入main.scss文件
@import 'a';
@import 'b';
多值变量
多值变量分为list类型和map类型,list有点像js对象中的数组,map类型像js中的对象。
list可通过空格,逗号或小括号分割多个值,使用nth( $ 变量名,$ 索引)取值,list数据操作有其他函数。
使用nth语法:
nth($ 变量名,$ 索引);索引就表示取第几个变量值。
举个例子:
定义一个变量$mypx,它有6个值:
$mypx:10px 20px 30px 40px 50px 60px;
我们想去调用它的值,比如调用它的第3个值30px.
div{
margin:nth($mypx,$3) 5px 5px 5px;
}
上述的margin编译结果为margin:30px 5px 5px 5px;
例子2:
现在有一个二维数组变量是这样:
$mypx:10px 20px,30px 40px,50px 60px;
也可以用括号来包裹:
$mypx:(10px 20px)(30px 40px)(50px 60px);
当我们再使用nth取他第一个值时如:
nth($mypx,1);此时得到的值是10px 20px;
由于它分组了,此时得到的就是两个值。
map用法:
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;
}
}
例如:
/*一维数据*/
$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*/
}
例子1:
<template>
<div class="container">
<div><p>这个世界真美好!</p></div>
</div>
</template>
<style lang="scss">
$color001:red;
.container{
color: $color001;
}
</style>
声明一个字体颜色变量$color001,再给它设置一个颜色值,red。
$color001:red;
调用变量:
color: $color001;
这种变量的好处就是如果我们突然要改变这个字体的颜色,但是我们有多个地方都用到了这个字体颜色,我们使用sass的好处就是,此时只需要修改变量里面的那个色值,所有的文字颜色都会改变。
变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不再嵌套规则内定义的变量则可在任何地方使用(全局变量)。将局部变量转换为全局变量可以添加!global声明。
如下:
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width;
}
虽然 $width写在了#main的中,但是它后面加了!global,所以认为它是一个全局变量。所以#sidebar可以调用它。
3.@extend继承
如果一个样式和另一个样式完全相同,但是又额外添加了样式,我们通常在html中给元素定义两个class,一个通用样式,一个特殊样式。
例如,有一个h1和h2,他们两个除了字体颜色,其他都一样。
<template>
<div class="container">
<h1>我是大标题</h1>
<h2>我是小标题</h2>
</div>
</template>
此时可以给它定义一个公用的样式.hcommon,然后在h1和h2中分别调用@extend .hcommon即可继承hcommon中的样式。
<style lang="scss">
.container{
.hcommon{
font-size: 20px;
border: 1px solid #ddd;
width: 100px;
height: 100px;
text-align:center;
}
h1{
color: red;
@extend .hcommon;
}
h2{
color: blue;
@extend .hcommon;
}
}
</style>
3.数据类型
sass支持6中主要的数据类型:
- 数字,1, 2, 13, 10px 字符串,有引号字符串与无引号
- 字符串,“foo”, ‘bar’, baz
- 颜色,blue,#04a3f9, rgba(255,0,0,0.5)
- 布尔型,true, false
- 空值,null
- 数组 (list),用空格或逗号作分隔符,1.5em 1em 0 2em, Helvetica, Arial, sans-serif
- maps,相当于 JavaScript 的 object,(key1: value1, key2: value2)
4.运算
支持数字的加减乘除、取整等运算 (+, -, *, /, %),如果必要会在不同单位间转换值。
例如:
p {
width: 1in + 8pt;
}
编译为:
p { width: 1.111in; }
关系运算 <, >, <=, >= 也可用于数字运算,相等运算 ==, != 可用于所有数据类型。
除法运算符
以下三种情况 / 将被视为除法运算符号:
- 如果值,或值的一部分,是变量或者函数的返回值
- 如果值被圆括号包裹
- 如果值是算数表达式的一部分
p {
font: 10px/8px;/*不合法,不是算数表达式*/
$width: 1000px;
width: $width/2;
width: round(1.5)/2;
height: (500px/2);
margin-left: 5px + 8px/2px; /*它是算数表达式的一部分*/
}
如果需要使用变量,同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中,只需要用 #{} 插值语句将变量包裹。
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
编译为:
p {font: 12px/30px; }
颜色值运算
颜色值的运算是分段计算进行的,也就是分别计算红色,绿色,以及蓝色的值:
例如:
p {
color: #010203 + #040506;
}
计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09,然后编译为p {color: #050709; }
p {
color: #010203 * 2;
}
计算结果为:计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06,然后编译为p {color: #020406; }
注意:
需要注意的是,如果颜色值包含 alpha channel(rgba 或 hsla 两种颜色值),必须拥有相等的 alpha 值才能进行运算,因为算术运算不会作用于 alpha 值。
p {color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);}
结果为:
p {color: rgba(255, 255, 0, 0.75); }
字符串运算
+可用于连接字符串
例如:
p { cursor: e + -resize;}编译为p {cursor: e-resize; }
注意,如果有引号字符串(位于 + 左侧)连接无引号字符串,运算结果是有引号的:
p:before {content: "Foo " + Bar;}编译结果:p:before {content: “Foo Bar”;}
相反,无引号字符串(位于 + 左侧)连接有引号字符串,运算结果则没有引号。
p:before { font-family: sans- + “serif”;}编译结果为p:before{font-family: sans-serif; }
运算表达式与其他值连用时,用空格做连接符:
p {margin: 3px + 4px auto;}编译为p { margin: 7px auto; }
在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值:
p:before {
content: “I ate #{5 + 10} pies!”;
}
编译为:
p:before {
content: “I ate 15 pies!”; }
圆括号
圆括号可以用来影响运算的顺序:
p {
width: 1em + (2em * 3);
}
编译为:
p { width: 7em; }
函数
插值语句#{}
通过 #{} 插值语句可以在选择器或属性名中使用变量:
如下:
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
编译为:
p.foo { border-color: blue; }
#{} 插值语句也可以在属性值中插入 SassScript,大多数情况下,这样可能还不如使用变量方便,但是使用 #{} 可以避免 Sass 运行运算表达式,直接编译 CSS。
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
编译为
p {font: 12px/30px; }
5.混合(@mixin)
定义一个mixin,可以再mixin中添加任何你想要重复使用的样式。
@mixin button-lager {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
}
mixin可以包含在css和sass中的有效内容:
@mixin link {
a {
color: blue;
&:visited {
color: purple;
}
&:hover {
color: white;
}
&:active {
color: red;
}
}
}
调用mixin使用@include
如下:
.greenbutton{
@include button-lager;
color:green;
}
注:
我们这里有多个mixin。
@mixin button{
font-size:16px;
}
@mixin font{
color:red;
}
@mixin myname{
@include button;
@include font;
}
@mixin参数的使用
@mixin可以接收和使用参数。
@mixin button($b){
font-size:12px;
padding:10px;
color:red;
background:$b;
}
注意到参数被设置为一个变量,并成为background属性的值,如果我们想创建一个绿色的按钮,那么我们可以这么用:
.button-green{
@include button(#ff0000);
}
当sass被编译时,值#ff0000就被传递给@mixin并成为变量$b的值。
@mixin还可以使用多个参数,中间用逗号隔开:
@mixin mybutton($a,$b){
font-size:12px;
color:$a;
background:$b;
}
.button-green{
@include mybutton(#ff0000,black);
}
给参数传递默认值。如果我们在使用@include调用时没有传递参数,可以使用默认值。
@mixin mybutton($a:red){
font-size:12px;
color:$a;
}
比如我们在调用时忘记传参数,他就会使用默认值:
.button-green{
@include mybutton;
}
当然,也可以使用一个参数来覆盖默认值。
.button-green{
@include mybutton(#ff5200);
}
@mixin关键字参数
@include在调用@mixin参数时也可以把变量加上。
@mixin aa($a,$b){
font-size:$a;
color:$b;
}
调用:
.button-green{
@include aa($b:red,$a:12px);//加了关键字参数名后,参数顺序可以调换。
}
多个可变参数
比如有一个div,给它添加多个投影,投影直接可以用逗号隔开:
.container
{
box-shadow: 2px 2px 2px #333,4px 4px 4px red;
}
在另一个元素上,你可能只想使用一种阴影或者在其他元素上你又想使用三种或四种,这个时候可以创建一个接收数量可变的参数的mixin模块,并在使用@include指令的时候决定传递参数的数量。
@mixin box-shadows($shadow...){
box-shadow:$shadow;
}
.container{
@include box-shadows(0px 1px 2px red,3px 4px 5px #333);
}
注:通过在变量后面增加三个点(…)来使mixin模块接收数量可变的参数。需要注意的是这些是三个周期的字符,而不是单一的省略号。当你使用@include传递参数的时候,使用逗号将参数分开。
@content
在使用mixin混合样式的时候,可以先将一段代码导入到混合指令中,然后再输出混合样式,额外导入的部分将出现在@content标志的地方。
如下:
@mixin phone{
@media(max-width:500px){
@content;
}
}
@mixin ipad{
@media (min-width:501px) and (max-width:1024px){
@content;
}
}
//调用:
body{
@include phone{
background:red;
}
@include ipad{
background:green;
}
}
相当于把@include中的额外内容放到@mixin中的@content的位置,上面代码编译后为:
body{
@media(max-width:500px){
background:red;
}
@media (min-width:501px) and (max-width:1024px){
background:green;
}
}
为了便于书写,@mixin可以使用=表示,而@include可以使用+表示。
6.@function函数指令
sass支持自定义函数,并且能在任何属性值或sass script中使用:
如下:
$b:20px;
@function grid($c){
@return $c*$b;
}
.mystyleone{
width: grid(40);
}
可以传递若干个全局变量给函数作为参数,一个函数可以包含多条语句,需要调用@return输出结果。
还可以使用关键词参数,上述例子可以这样写:
.mystyleone{
width:grid($c:40);
}