CSS预处理器——sass教程(3)
发布日期:2022-02-15 02:36:23 浏览次数:1 分类:技术文章

本文共 8826 字,大约阅读时间需要 29 分钟。

CSS预处理器——sass教程(3)

sass 函数化

我们在之前的内容中了解到, sass 的运用使得 css 更符合计算机语言的一些特性,例如它拥有变量,混合宏的使用使开发者可以像运用函数一样来写 css 样式,这节内容我们将了解更多 sass 的知识,这些内容将使 sass 更加具有其它计算机语言的函数特性,

sass的数值类型

sass 也是具有数值类型的,这些数值类型既有与其它计算机语言相似的地方,也有不同的地方。主要有以下这些数值类型:

  • 数字,1、2…还包括10px这种的。
  • 字符串,有引号字符串或者无引号字符串,例如"bar"、‘foo’、!important…
  • 颜色,比如说 blue、 #ccc、rab(255,255,0)。
  • 布尔型,true和false。
  • 空值,null
  • 值列表,使用空格或者逗号分隔开的都算,如1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

需要注意的是,在使用#{}插值语法后,有引号字符串会被编译成无引号字符串。例:

$selector:".header";div.box #{$selector}{  width: 100px;  color: red;  &::after{
content: "";  }}

编译结果:

div.box .header {

 width: 100px;  color: red;}div.box .header::after {
 content: "";}/*# sourceMappingURL=demo1.css.map */

数值计算

sass 可以进行基本的数值运算,例:

div{  width: 100px+200px;  height: 100px-50px;  margin-top: 100px*2;  margin-bottom: (100px / 2);  margin-left: 100px%44;}

编译结果:

div {

 width: 300px;  height: 50px;  margin-top: 200px;  margin-bottom: 50px;  margin-left: 12px;}/*# sourceMappingURL=demo2.css.map */

除了除法运算时,如果不加括号,除法运算符会被当成原始的斜杠/外,其它的运算符正常使用即可。

需要注意的是,如果运算的两个数值单位不一致会报错。

div{  margin-right: 100px - 1rem;}

在这里插入图片描述

另外如果在除法运算时,使用了两个带符号的变量,编译时会消除掉符号。

颜色值运算

颜色值可以被当成普通数值进行加减乘除上的计算,例:

div{  color: #013126 + #013000;  color: #123000 * 2;  color: #cccccc - #c00000;  color: (#cccccc / 2);}

编译结果:

div {

 color: #026126;  color: #246000;  color: #0ccccc;  color: #666666;}/*# sourceMappingURL=demo4.css.map */

变量运算

除了数值运算外,sass 也允许我们使用变量进行运算,例:

$base-width: 200px;$length: 100px;.header{  width: $base-width - $length;}

编译结果:

.header {

 width: 100px;}/*# sourceMappingURL=demo3.css.map */

需要注意的是,需要注意代码的规范,运算符需要与变量名至少保持一个空格以上的距离,在这里如果不规范会把减号当成连接符-

sass 的控制命令

@if

对其它计算机语言而言,if...else...是比较常见的条件控制语句,sass 的@if也具有相同的作用,并且可以与@else@else if配合使用。

@mixin easySheet($length) {  @if($length > 100px){
width: $length;
color: red;  }  @else if($length > 50px){
width: 75px;
color: yellow;  }  @else{
width: 50px;
color: blue;  }}.header{  @include easySheet(200px);  .box{
@include easySheet(60px);
.box1{
  @include easySheet(20px);
}  }}

编译结果:

.header {

 width: 200px;  color: red;}.header .box {
 width: 75px;  color: yellow;}.header .box .box1 {
 width: 50px;  color: blue;}/*# sourceMappingURL=demo5.css.map */

@for循环

sass 可以使用@for循环,主要有以下两种用法:

@for $i from 
   
     through 
    
     @for $i from 
     
       to 
      
     
    
   

$i是变量,start表示开始值,end表示结束值,throughto的区别在于through用法包含结束值,而to不包含结束值。

用法示例:

@for $i from 1 through 5{  .box#{$i}{
width: 10px * $i;  }}

编译结果:

.box1 {

 width: 10px;}.box2 {
 width: 20px;}.box3 {
 width: 30px;}.box4 {
 width: 40px;}.box5 {
 width: 50px;}/*# sourceMappingURL=demo6.css.map */

@while循环

@while循环与@for循环用法类似,只需要@while后的表达式为true就可以进行循环,例:

$length: 10 !default;@while $length > 0{  .box#{$length}{
width: $length * 10px;  }  $length : $length - 1;}

编译结果:

.box10 {

 width: 100px;}.box9 {
 width: 90px;}.box8 {
 width: 80px;}.box7 {
 width: 70px;}.box6 {
 width: 60px;}.box5 {
 width: 50px;}.box4 {
 width: 40px;}.box3 {
 width: 30px;}.box2 {
 width: 20px;}.box1 {
 width: 10px;}/*# sourceMappingURL=demo7.css.map */

@each

遍历一个列表变量,每次从列表变量中取出一个值,其用法类似于 ES6 的for...of...循环用法。语法格式为:

@each $var in 
   

$var是变量,list是列表变量。

用法示例:

$selectors: div h1 span;@each $var in $selectors{  #{$var}{
color: red;
width: 100px;
height: 100px;  }}

编译结果:

div {

 color: red;  width: 100px;  height: 100px;}h1 {
 color: red;  width: 100px;  height: 100px;}span {
 color: red;  width: 100px;  height: 100px;}/*# sourceMappingURL=demo8.css.map */

函数功能

scss 中内置了一些比较常用的函数,此节内容将会简单介绍。

字符串函数

unquote($string)

这个函数不会区分单双引号,主要用来删除字符串开头和结尾的单引号或者双引号,对于字符串中间的引号会保留开始到中间引号的部分,但是会删除中间引号之后的内容(由于它不区分单双引号,这算是个bug,不要乱用);如果字符串不含有引号,则会报错。

用法示例:

.text1{  content: unquote($string: "'Hello World!'");}.text2{  content: unquote($string: '"Hello World!"');}.text3{  content: unquote($string: "H'ello");}

编译结果:

.text1 {

 content: 'Hello World!';}.text2 {
 content: "Hello World!";}.text3 {
 content: H;}/*# sourceMappingURL=demo9.css.map */

quote函数

unquote函数的作用相反,会给没有引号的内容添加上单双引号,如果本身含有单引号会被替换成双引号,中间的引号会被保留。例:

.box1{  content: quote($string: "'Hello'");}.box2{  content: quote($string: Hello);}.box3{  content: quote($string: 'Hello');}

编译结果:

.box1 {

 content: "'Hello'";}.box2 {
 content: "Hello";}.box3 {
 content: "Hello";}/*# sourceMappingURL=demo10.css.map */

to-upper-case函数、to-lower-case函数

to-upper-case函数能将小写字母改为大写字母。to-lower-case与它相反,能将大写字母改为小写。

用法示例:

div{  content: to-upper-case($string: "abcd");}span{  content: to-lower-case($string: "Hello");}

编译结果:

div {

 content: "ABCD";}span {
 content: "hello";}/*# sourceMappingURL=demo11.css.map */

数字函数

percentage函数

percentage函数能将不带单位的数字改为带百分号的数值。例:

div{  width: percentage($number: 20);}

编译结果:

div {

 width: 2000%;}/*# sourceMappingURL=demo12.css.map */

round函数、ceil函数、floor函数、abs函数

round函数将数值四舍五入,ceil函数将小数转换为大于这个小数的下一位整数,floor将小数的小数位置丢弃,abs函数用来求一个数的绝对值。

用法示例:

div{  width: round(13.4px);  border-width: round(15.5px);  height: ceil(15.1px);  line-height: floor(15.9px);  margin: abs($number: -10px);}

编译结果:

div {

 width: 13px;  border-width: 16px;  height: 16px;  line-height: 15px;  margin: 10px;}/*# sourceMappingURL=demo13.css.map */

min函数、max函数

min函数求几个数值中的最小值,max函数求几个数值中的最大值。例:

div{  width: max(22px, 23px, 25);  height: min(12px, 23px, 15px);}

编译结果:

div {

 width: 25;  height: 12px;}/*# sourceMappingURL=demo14.css.map */

random()函数

random()是一个用来生成随机数的函数。

div{  width: random($limit: 20)px;}

编译结果:

div {

 width: 16 px;}/*# sourceMappingURL=demo15.css.map */

$limit用来限制它的数值范围,如果不设置,它默认是0~1的范围,可以配合加减法,使它拥有一个非零的下限,例:

// -20~40的数值范围:random($limit:40) - 20;// 20~40的数值范围;random($limit:40) + 20;

列表函数

length函数

length函数用来计算列表中有几个数值,但是需要注意的是列表中的数值需要用逗号隔开,使用空格隔开会报错。

$num: length($list: (12px 23px (2px solid black) 44px));div{  width: $num;}
div {

 width: 4;}/*# sourceMappingURL=demo16.css.map */

nth函数

语法:

nth($list,$n)

nth函数用来指定$list列表中第$n个位置上的数值,要注意的是 sass 从1开始计数。例:

// 在此处 nth 函数用来获取 $list 中第2个位置上的数值,$n为2, 表示第二个位置。div{  width: nth($list: (12px 23px (solid, 1px, black)), $n:2 );}

编译结果:

div {

 width: 23px;}/*# sourceMappingURL=demo17.css.map */

join函数

join函数用来将两个列表合并成一个。例:

div{  box-shadow: join($list1: 1px 2px, $list2:3px 1px red );}

编译结果:

div {

 box-shadow: 1px 2px 3px 1px red;}/*# sourceMappingURL=demo18.css.map */

需要注意的是join函数只能将两个列表合并成一个,如果超过两个它会报错。它还有第三个参数$separator,默认值是auto,用来设置列表中值与值之间分隔的符号,可以设置成space(空格)、comma(逗号)。

zip函数

zip函数用来将多个列表合并成一个多维的列表,这个多维的列表中的每一项对应的是多个列表中每个位置上的值合并成一个列表后的值,因而要合并的每一个列表中值的个数都必须要相等。例:

div{  border: zip($lists: (1px 2px #123012, 2px 4px #cccccc, 3px 4px red, 5px 2px blue));}

编译结果:

div {

 border: 1px 2px #123012, 2px 4px #cccccc, 3px 4px red, 5px 2px blue;}/*# sourceMappingURL=demo19.css.map */

index函数

index函数用于查找某个值在列表中的位置索引值。例:

div{  width: index($list: (20px 2px 12px), $value:12px );}

编译结果:

div {

 width: 3;}/*# sourceMappingURL=demo20.css.map */

comparable函数

comparable函数主要是用来判断两个数是否可以进行“加,减”以及“合并”。如果可以返回的值为 true,如果不可以返回的值是 false,例:

>> comparable(2px,1px)true>> comparable(2px,1%)false>> comparable(2px,1em)false>> comparable(2rem,1em)false>> comparable(2px,1cm)true>> comparable(2px,1mm)true>> comparable(2px,1rem)false>> comparable(2cm,1mm)true

Miscellaneous函数

这里把Miscellaneous函数称为三元条件函数,主要因为他和 JavaScript 中的三元判断非常的相似。他有两个值,当条件成立返回一种值,当条件不成立时返回另一种值:

if($condition,$if-true,$if-false)

上面表达式的意思是当 $condition 条件成立时,返回的值为 $if-true,否则返回的是 $if-false 值。

>> if(true,1px,2px)1px>> if(false,1px,2px)2px

sass中的 Map

sass 中的 Map 类似于 JavaScript 中的对象,它的语法格式为:

$map: (
$key1: value1,
$key2: value2,
$key3: value3)

我们可以使用它为一个变量声明多个不同的值,在需要的时候使用不同的值,这样方便我们集中管理一种类型的值。

用法示例,为声明颜色变量$color,然后在 Map 内部声明出文字颜色text-color,背景颜色bg-color,边框颜色border-color

$color:(  color: #026123;  bg-color: #022fff;  border-color: #02fcfc;);

如果我们要使用声明好的的值就不得不了解 Map 的相关函数了。

map-keys($map)

map-keys函数返回$map中的key值,也就是说它返回的是一个列表。

map-values($map)

map-values函数返回$map中的value值,它返回的也是一个列表。

map-get

map-get($map,$key)函数的作用是根据$key参数,返回$key$map中对应的value值。如果$key不存在$map中,将返回null值(不会被编译到 css 内)。此函数包括两个参数:

  • $map:定义好的 map。
  • $key:需要遍历的 key。

用法示例:

$color:(  color: #026123,  bg-color: #022fff,  border-color: #02fcfc,);div{  color: map-get($map: $color, $key: color);  background-color: map-get($map: $color, $key: bg-color);  border: map-get($map: $color, $key: bg-color) 1px solid;}

编译结果:

div {

 color: #026123;  background-color: #022fff;  border: #022fff 1px solid;}/*# sourceMappingURL=demo21.css.map */

颜色函数

rgb函数、rgba函数、red函数、green函数、blue函数

  • rgb($red,$green,$blue):根据红、绿、蓝三个值创建一个颜色,返回一个十六进制颜色值;
  • rgba($red,$green,$blue,$alpha):根据红、绿、蓝和透明度值创建一个颜色,返回一个rgba值;
  • red($color):从一个颜色中获取其中红色值,从十六进制值中返回一个红色值;
  • green($color):从一个颜色中获取其中绿色值;
  • blue($color):从一个颜色中获取其中蓝色值;

lighten 函数与 darken 函数

lighten()darken()两个函数都是围绕颜色的亮度值做调整的,其中lighten()函数会让颜色变得更亮,与之相反的darken()函数会让颜色变得更暗。这个亮度值可以是 0~1 之间,不过常用的一般都在 3%~20% 之间。

用法示例:

//SCSS.lighten {   background: lighten($baseColor,10%);}.darken{   background: darken($baseColor,10%);}

以上列举出一些比较常见的函数(也有一些是不太常用的),想要查看更多函数的用法,可以去查看 Sass 的官方文档。

转载地址:https://blog.csdn.net/PeZXO/article/details/107346215 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:CSS预处理器——sass教程(2)
下一篇:指针指针

发表评论

最新留言

哈哈,博客排版真的漂亮呢~
[***.36.148.121]2022年08月04日 00时54分45秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章

c post传文件到服务器带参数,NSMutableURLRequest,在POST方式下传递参数 2020-01-10 11:49:19
攻击网站和攻击服务器的区别,DDoS攻击与CC攻击的区别是什么? 2020-01-10 11:49:19
江西省2021高考成绩排名查询,985/211大学2021年江西录取分数线及位次排名 2020-01-10 11:49:20
案例教学法 计算机,高校计算机案例教学法探讨 2020-01-10 11:49:18
计算机控制有效点火,计算机控制点火系统.ppt 2020-01-10 11:49:18
微信api服务器ip地址,api.weixin.qq.com服务器iP 2020-01-10 11:49:18
bombe计算机 诞生时间,bombe 2020-01-10 11:49:18
dw虚拟服务器,dw设置服务器 2020-01-10 11:49:18
mac系统如何使用ftp服务器地址,mac系统如何使用ftp服务器地址 2020-01-10 11:49:18
服务器多个网站使用二级域名,使用多少个二级域名比较好 2020-01-10 11:49:19
计算机控制系统a卷-答案,计算机控制系统A卷答案.doc 2020-01-10 11:49:17
30岁女计算机培训,30岁文科女自述:转行学IT之IT教会我的那些事儿 2020-01-10 11:49:17
java 点加减号递加或递减,递归方法调用中的后递增/递减(Java) 2020-01-10 11:49:17
java 关闭windows,使用Java关闭Windows 2020-01-10 11:49:17
计算机组成课设怎么做,计算机组成原理课设1 2020-01-10 11:49:17
python操作mongodb语法,如何使用python在mongodb中查询不同的结果? 2020-01-10 11:49:17
计算机论文指导记录卡,毕业论文指导记录表范文.doc 2020-01-10 11:49:17
桌面怎么设置 计算机 网络连接,电脑桌面的本地连接ip地址可以设置吗_本地连接ip地址设置方法 - 驱动管家... 2020-01-10 11:49:16
贵阳市哪个大专计算机专业强,贵阳市计算机职业学校排名是多少 2020-01-10 11:49:16
单招学校计算机技能考试,(新)对口单招计算机技能考试标准.doc 2020-01-10 11:49:16