Sass 基础(五)

@if   @if 指令是一个SassScript,它可以根据条件处理样式块,如果条件为true返回一个样式块,反之   false 返回另一个样式块,在Sass 中除了@if之,还可以配合@else if和eles 一起。   例如:     

//SCSS
		      @mixin blockOrHidden($boolean:true){
			            @if $boolean {
				              @debug "$boolean is #{$boolean}";
				              display:block;
			              }
			              @else{
				                @debug "$boolean is #{$boolean}";
				                  display:none;
			                }
		              }
		            .block{
			              @include blockOrHidden;
		            }
		      .hidden{
			          @include blockOrHidden(false);
		      }

    编译出来的css

		    .block{
			      display:block;
		    }
		    .hidden{
			      display:none;
		    }

@for循环(上)     在Sass 的@for 循环中油两种方式:     @for $i from <start> through <end>     @for $i from <start> to <end>     $i 表示变量     start 表示起始值     end 表示结束值     这两个的区别是一个关键字,through 表示包括end 这个数,而to 则不包括end 这个数。     如下代码,先来一个使用through 关键字。

		    @for $i from 1 throug 3 {
			      .item-#{$i} {
					          width:2em *$i;
				        }
		     }

    编译出来css

		    .item-1{
			        width:2em;
		      }
		    .item-2{
			      width:4em;
		    }
		    .item-3{
			        width:6em;
		    }

    在来一个to关键字的例子:

		    @for $i from to 3 {
			      .item-#{$i} { width:2em * $i;}
		     }

    编译出来的css:

		    .item-1{
			      width:2em;
		    }
		    .item-2{
			      width:4em;
		    }

@for循环(下)     @for 应用在网格系统生成各个格子class 的代码。

	    //scss
	      $grid-prefix: span !default;
	      $grid-width:60px !defaulet;
	      $grid-gutter:20px  !defaulet;
 
	    %grid{
		        float:left;
		        margin-left:$grid-gutter / 2;
		        margin-right:$grid-gutter / 2;
	      }
	    @for $i from 1 through 12 {
		    .#{$grid-prefix} #{$i}{
			        width:$grid-width *$grid-gutter *($i - 1);
			        @extend %grid;
		      }
	    }

    编译出来的css

	     .span1, .span2, .span3, .span4, .span5
	      , .span6, .span7, .span8, .span9, .span10,
	      , .span11,, .span12{
		              float:left;
		              margin-left:10px;
		              margin-right:10px;
	       }
	      .span1{
		          width:60px;
	      }
	      .span2{
		          width:140px;
	      }
	      .span3{
		          width:220px;
	      }
	      .span4{
		          width:300px;
	       }
	      .span5{
		          width:380px;
	      }
	      .span6{
		          width:400px;
	      }
	      .span7{
		          width:540px;
	      }
	      .span8{
		          width:620px;
	      }
	      .span9{
		          width:700px;
	      }
	      .span11 {
  		        width: 860px;
	      }

      .span12 {         width: 940px;       }     将上面的示例稍做修改,将 @for through 方式换成 @for to::       //scss       @for $i from 1 to 13{ .        #{$grid-prefix}#{$i}{           width:$grid-width * $i + $grid-grutter *($i -1);           @extend %grid;           }       }     这两段 Sass 代码并无太多差别,只是 @for中的 <end> 取值不同。配合 through 的 <end> 值是 12,     其遍历出来的终点值也是 12,和 <end> 值一样。配合 to 的 <end> 值是 13,其遍历出来的终点值是 12,     就是 <end> 对就的值减去 1 @while 循环     @while指令也需要SassScript 表达式(像其他指令一样),并且会生成不同的样式块,直到表达式值为false     时停止循环。这个和@for 指令很相似,只要@while 后面的条件为true就会执行。     例如:       //SCSS       $types:4;       $type-width:20px;       @while $types > 0{           .while-#{$types}           width:$type-width + $types;         }       $types: $types - 1;       编译出来css       .while-4{           width:24px;         }       .while-3{           width:23px;         }       .while-2{           width:22px;         }       .while-1{         width:21px;       } @each循环   @each循环就是去遍历一个列表,依然从列表中取出对应的值。   @each 循环指令的形式:   @each $var in <list>   例如:     @mixin author-images{       @each $author in $list {         .photo-#{$author}{           background:url("/images/avatars/#{$author}.png") no-repeat;           }       }     }   .anthor-bio{       @include author-images;   }   编译出来 CSS   .author-bio .photo-adam{     background:url("/images/avatars/adam.png") no - repeat;   }   .author-bio .photo-john{     background:url("/images/avatars/john.png") no - repeat;   }   .author-bio .photo-wynn{       background:url("/images/avatars/wynn.png") no - repeat;   }   .author-bio .photo-mason{         background:url("/images/avatars/mason.png") no - repeat;   }   .author-bio .photo-kuroir{     background:url("/images/avatars/wynn.png") no - repeat;   }     Sass的函数简介     函数主要包括。     字符串函数     数字函数     列表函数     颜色函数     Interospection函数     三元函数等。     字符串函数-unquote() 函数     字符串函数顾名思义是用来处理字符串的函数,Sass 的字符串函数要包括两种。     unquote($string): 删除字符串中的引号     quote($string):给字符串添加引号。 1.unquote()函数。     unquote() 函数主要是用来删除字符串的引号。如果这个字符串没有带引号,将返回原始的字符串     //SCSS       .test1{         content: unquote('Hello Sass!');       }     .test2{         content:unquote(" 'Hello Sass!");       }     .test3{         content:unquote("I' m Web Designer");     }     .test4{         content:unquote(" 'Hello Sass!' ");     }     .test5{         content:unquote('" Hello Sass!"');     }     .test6{       content:unquote(Hello Sass);     }     编译后的 css代码      // css     .test1{       content:Hello Sass!; }     .test2{       content:'Hello Sass!; }     .test3{       content:I'm Web Designer; }     .test4{       content:'Hello Sass!'; }     .test5{       content:"Hello Sass!"; }     .test6{       content:Hello Sass!; }     unquote( ) 函数只能删除字符串最前和最后的引号(双引号或单引号),而无法删除字符串中间的引号。     如果字符没有带引号,返回的将是字符串本身。     字符串函数-quote()函数       quote()函数刚好与unquote() 函数功能相反,主要用来给字符串添加引号。如果字符串,自身带有引号     会统一换成双引号。     // SCSS     .test1{         content: quote( 'Hello Sass!' );       }     .test2{         content: quote("Hello Sass!")     }     .test3{       content: quote(ImWebDesigner);     }     .test4{       content: quote(' ');     }     编译出来的css 代码     // css     .test1{         content: "Hello Sass!";     }     .test2{         content: "Hello Sass!"     }     .test3{       content: "ImWebDesigner";     }     .test4{       content: "";     }     使用 quote() 函数只能给字符串增加双引号,而且字符串中间有单引号或者空格时,     需要用单引号或双引号括起,否则编译的时候将会报错。     字符串函数-To-upper-case(),To-lower-case()     1.To-upper-case(),To-lower-case()       To-upper-case()      //SCSS     .test {         text:to-upper-case(aaaaa);         text:to-upper-case(aA-aAAA-aaa);     }   编译出来的css 代码     // CSS     .test{       text:AAAAA;       text:AA-AAAA-AAA;     } 2.To-lower-case()   To-lower-case() 函数 与To-upper-case()刚好相反,将字符串转成小写字母。   // SCSS   .test{       text: to-lower - cass(AAAAA);       text: to-lower-case(aA-aAAA-aaa)   }   编译出来的 css 代码;     //css     .test{       text: aaaaa;       text:aa-aaaa-aaa;     }     数字函数简介     Sass 中的数组函数要针对数字方面提供一系列的函数功能:     percentage($value):将一个不带单位的数转换成百分比:     round($value):将数值四舍五入,转换成一个最接近的整数;     ceil($value):将大于自己的小数转换成下一位整数;     floor($value):将一个数去除他的小数部分;     abs($value):返回一个数的绝对值。     min($numbers...) 找出几个数之间的最小值:     max($numbers...)找出几个数值之间的最大值     random() 获取随机数。     数字函数-percentage() 1.percentage()     percentage() 函数主要是将一个不带单位的数字转成 百分比形式:     >> percentage(.2)     20%     >>percentage(2px / 10px)     20%     >>percentage(2em / 10em)     20%     >>     .footer{         width:percentage(.2)     }     编译后的css 代码;     .footer{       width:20%;     } 数字函数-round() 函数     round()函数可以将一个数四舍五入为一个最近的整数;     >>round(12.3)       12     >> round(12.5)       13     >>round(1.499999)       1     >>round(20%)       20%     >>round(3.9em)       4em     >>round(2.3px)       2px     >>round(1px /3px)       0     >>round(3px / 2em)       2px/em

      .footer{           width:round(12.3px)       }     编译出来的css     .footer{         width:12px;       } 数字函数-ceil()函数     ceil()函数将一个数转换成最接近自己的整数,会讲一个大约自身的任何小数转换成大约本身1的整数,也就是只做入,不做舍的     >> ceil(2.0)       2     >>ceil(2.1)       3     >>ceil(2.6)       3     >>ceil(2.3%)       3%     >>ceil(2.5px)       3px     >>ceil(2px / 3px)       1     >>ceil(2% / 3px)       1%/px     >>ceil(1em / 5px)       1em/px     .footer{       width:ceil(12.3px);     }     编译后的css 代码:   .footer{       width:13px;   }   数字函数-floor()函数     floor()函数刚好与ceil()函数功能相反,其主要将一个数去除其小数部分。并且不做任何的进位,也就是只做舍,不做入的计算。   >> floor(2.1)     2   >> floor(2.5)     2   >>floor(3.5%)     3%   >>floor(10.2px)     10em   >> floor(10.2px)     10px   >>floor(10.8em)     10em   >>floor(2px / 10px)     0   >> floor(3px / 1em)     3px /em   .footer{     width:floor(12.3px);   }   编译后的css代码   .footer{     width:12px;   } 数字函数-abs() 函数   abs()函数会返回一个数的绝对值。   >>abs(10)     10   >>abs(-10)     10   >>abs(-10px)     10px   >>abs(-2em)     2em   >>abs(-.5%)     0.5%   >>abs(-1px / 2px)     0.5   .footer{     width:abs(-12.3px)   }   编译后的css代码:     .footer{       width:12px;     } 数字函数-min()函数,max()函数   min() 函数功能主要是在多个数之中找到最小的一个,这个函数可以设置任意多个参数。   >>min(1,2,1%,3.300%)     1%   >> min(1px,2,3px)     1px   >>min(1em,2em,6em)     1em   不过在min() 函数中同时出现两种不同类型的单位,将会报错误信息。     >>min(1px, 1em)       SyntaxError: Incompatible units:'em' and'px'. max()函数   max()函数和min函数一样,不同的是,max() 函数用来获取一系列书数中的最大那个值。     >> max(1,5)       5     >>max(1px,5px)       5px     同样的,如果在max()函数中有不同的单位,将会报错:     >> max(1,3px,5%,6)       SyntaxError: Incompatible units: '%' and ‘px'.     数字函数-random()函数     random()函数是用来获取一个随机数。     >> random()       0.03886     >>random()       0.66527     >> random()       0.8125     >>random()       0.26839     >>random()     0.85065 列表函数介绍       列表函数主要包括一些对列表参数的函数使用,主要包括以下几种形式。       length($list):返回一个列表的长度值:       nth($list,$n):返回一个列表中指定的某个标签值。       join($list1,$list2,[$separator] ):将某个值放在列表的最后;       zip($lists...);将几个列表结合成一个多维的列表:       index($list,$value)返回一个值在列表中的位置值。 length()函数   length()函数主要用来返回一个列表的中有几个值,简单点说就是返回列表清单中有多少个值:   >>length(10px)     1   >>length(10px 20px (border 1px solid) 2em)     4   >>length(border 1px solid)     3   length() 函数中的列表参数之间使用空格隔开,不能使用逗号,否则函数将会出错;   >> length(10px, 20px,(border 1px solid),2em)     SyntaxError: wrong number of arguments(4 for 1) for'length     nth($list,$n)     nth()函数用来指定列表中某个位置的值,不过在Sass 中,nth()函数和其他语法不同,1 是指列表中的第一个标签值     2 是指列表中的第二个标签值。       >> nth(10px 20px 30px,1)         10px       >>nth((Helvetica,Arial,sans-serif),2)         "Arial"       >>nth((1px solid red) border-top green,1)         (1px "solid" #ff0000)       在nth($list,$n) 函数中的$n 必须是大于 0 的整数;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逸鹏说道

Python3 与 C# 基础语法对比(List、Tuple、Dict专栏)

Python3 与 C# 基础语法对比(基础知识场):https://www.cnblogs.com/dotnetcrazy/p/9102030.html

252100
来自专栏开发与安全

从零开始学C++之模板(二):类模板、Stack的类模板实现(自定义链栈方式,自定义数组方式)

一、类模板 类模板:将类定义中的数据类型参数化 类模板实际上是函数模板的推广,可以用相同的类模板来组建任意类型的对象集合 (一)、类模板的定义 templ...

24400
来自专栏C/C++基础

C/C++文字常量与常变量

在C/C++编程时,经常遇到以下几个概念:常量、文字常量、字面常量、符号常量、字符常量、常变量、字符串常量等,网上的资料描述的不尽相同,弄得大家云里雾里。本文将...

14720
来自专栏老九学堂

十七个C语言新手编程时常犯的错误及解决方式

编译程序把a和A认为是两个不同的变量名,而显示出错信息。C认为大写字母和小写字母是两个不同的字符。习惯上,符号常量名用大写,变量名用小写表示,以增加可读性。

17040
来自专栏xx_Cc的学习总结专栏

iOS底层原理总结 - 探寻block的本质(二)

31940
来自专栏服务端技术杂谈

Java编码规范

命名 类名使用UpperCamelCase风格。 领域模型相关命名:DO / DTO / VO / DAO等。 方法名,参数名,成员变量,局部变量都统一使用lo...

34840
来自专栏绿巨人专栏

[Java] 设计模式: Code Shape - 管理你的代码结构

45760
来自专栏绿巨人专栏

[Java] 设计模式: Code Shape - 管理你的代码结构

10220
来自专栏GreenLeaves

JS框架设计之对象类型判断一种子模块

Javascript有两套数据类型,一套是基础数据类型,一套是对象数据类型。基础数据类型包括5种基本数据类型,分别是null,bool,undefined,nu...

21080
来自专栏个人分享

工程开发实用类与方法总结(未完)

1 .checkArgument(boolean) :   功能描述:检查boolean是否为真。 用作方法中检查参数   失败时抛出的异常类型: Illeg...

12030

扫码关注云+社区

领取腾讯云代金券