Sass 基础(五) - 柠檬先生-html教程-PHP中文网

首页

web前端

html教程

Sass 基础(五) - 柠檬先生

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 21, 2016 am 08:54 AM

@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 through
　　　　@for $i from to
　　　　$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中的取值不同。配合 through 的值是 12，
　　　　其遍历出来的终点值也是 12，和值一样。配合 to 的值是 13，其遍历出来的终点值是 12，
　　　　就是对就的值减去 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
　　例如：
　　　　@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 的整数；