ass学习笔记2
今天介绍sass在重用代码时最具威力的两个功能。一个是嵌套(Nesting)，一个混合（Mixin）。
我们在写CSS通过需要多个后代选择器组合到一起才能定位到目标元素上，而这定义过程，此元素的父元素与其他选择器都有许多相同的部分，嵌套就是把这些相同的部分放到某一层花括号里，然后通过花括号的层层缩进堆砌，找到它们的共性与特性。
@charset "utf-8";//必须设置了这个才能编译有中文的注释nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; }}//------------------------------nav ul { margin: 0; padding: 0; list-style: none; }nav li { display: inline-block; }nav a { display: block; padding: 6px 12px; text-decoration: none; } |
当某一天，我们要兼容IE678等低级浏览器，发现它直接用nav不行时，需要改成.nav，我们只要改一处就行了，这大大提高维护性。
sass的嵌套包括两种：一种是选择器嵌套；另一种是属性嵌套。
选择器嵌套是指在一个选择器里面能出现多重花括号，里面的每一重花括号前的选择器会在编译后，直接在前面加一个空白（后代选择器）跟在前方选择器的后面。 如果你不想它们之间出现后代选择器，可以在选择器的前面加一个&进行处理。
@charset "utf-8";//必须设置了这个才能编译有中文的注释#top_nav{ line-height: 40px; text-transform: capitalize; background-color:#333; li{ float:left; } a{ display: block; padding: 0 10px; color: #fff; &:hover{ color:#ddd; } }}//------------------------------nav ul { margin: 0; padding: 0; list-style: none; }nav li { display: inline-block; }nav a { display: block; padding: 6px 12px; text-decoration: none; } |
属性嵌套，与前面的语法差不多，不同的是前面的选择器跟着一个冒号，那么编译后，它就像它转换为一个横扛与后面的选择器连接成一个单词。
@charset "utf-8";//必须设置了这个才能编译有中文的注释.fakeshadow { border: { style: solid; left: { width: 4px; color: #888; } right: { width: 2px; color: #ccc; } }}//------------------------------.fakeshadow { border-style: solid; border-left-width: 4px; border-left-color: #888; border-right-width: 2px; border-right-color: #ccc; } |
sass3.3还添加了一个@at-root，用于跳出嵌套的，但我觉得现在说会破坏文章的流程，跳过。
本文的第二个重点是@mixin，其实就相当于JS的函数，并且在传参方面，已经拥有es6、es7的一些新功能了。
为了与内置方法的风格保持一致，建议大家都使用ruby风格(全部小写，并通过横杠连接)。 它的参数与变量名要求一致，需要以$打头，多个参数与逗号分开。如果参数有默认值，后面跟冒号再跟默认值。 如果想在其他地方使用这个函数，需要通过@include关键字来声明一下。
@charset "utf-8";//必须设置了这个才能编译有中文的注释@mixin center-block{//没有参数 margin-left:auto; margin-right:auto;}.demo{ @include center-block();//小括号可以不写，但建议大家都写}@mixin opacity($opacity:50) {//有参数，并且有默认值 opacity: $opacity / 100; filter: alpha(opacity=$opacity);}.opacity{ @include opacity(); //使用默认值}.opacity-80{ @include opacity(80); //使用传参}//------------------------------.demo { margin-left: auto; margin-right: auto; }.opacity { opacity: 0.5; filter: alpha(opacity=50); }.opacity-80 { opacity: 0.8; filter: alpha(opacity=80); } |
我们用@mixin搞一个兼容IE67的浮动函数练练手！
$lte7:true;@mixin float($float:left) { float: $float; @if $lte7 { display: inline; }} |
再来一个创建小三角形的函数
@charset "utf-8";//必须设置了这个才能编译有中文的注释@mixin triangle($direction, $size, $borderColor ) { content:""; height: 0; width: 0; @if $direction == top { border-bottom:$size solid $borderColor; border-left:$size dashed transparent; border-right:$size dashed transparent; } @else if $direction == right { border-left:$size solid $borderColor; border-top:$size dashed transparent; border-bottom:$size dashed transparent; } @else if $direction == bottom { border-top:$size solid $borderColor; border-left:$size dashed transparent; border-right:$size dashed transparent; } @else if $direction == left { border-right:$size solid $borderColor; border-top:$size dashed transparent; border-bottom:$size dashed transparent; }}.top-arrow { @include triangle(top, 1px, red)}//------------------------------.top-arrow { content: ""; height: 0; width: 0; border-bottom: 1px solid red; border-left: 1px dashed transparent; border-right: 1px dashed transparent; } |
@content传参机制，它相当于在@include 调用语句后添加了一对括号，括号里的内容当作额外的参数来替换 @content所在的位置。 此特性在sass3.2.0中引入，可以用来解决css3的@media等带来的问题。
@charset "utf-8";//必须设置了这个才能编译有中文的注释@mixin max-screen($res){//参数一 @media only screen and ( max-width: $res ) { @content;//参数二 }}@include max-screen(480px) {//传参一 body { color: red }//传参二}//------------------------------@media only screen and (max-width: 480px) { body { color: red; } } |
此外，sass还有占位符及与它配套使用的@extend，它们的用法与@mixin, @include相差无几，以后再说。
@function函数，此函数能对样式的规则的属性值进行更精致的计算，并且调用时不需要@include，相当的方便。许多内置函数就是由它创建的。
//颜色处理 lighten(#cc3, 10%) // #d6d65c darken(#cc3, 10%) // #a3a329 grayscale(#cc3) // #808080 complement(#cc3) // #33c rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5) rgba(blue, 0.2) => rgba(0, 0, 255, 0.2)//这个函数将一个颜色格式化成ie滤镜使用，在做css3使用滤镜兼容的时候用得上 ie-hex-str(#abc) => #FFAABBCC ie-hex-str(#3322BB) => #FF3322BB ie-hex-str(rgba(0, 255, 0, 0.5)) => #8000FF00 |
为数组添加更多方法
//定义first()函数，获取列表中的第一个列表项@function list-first($list){ @return nth($list,1);}//定义last()函数，获取列表中的最后一个列表项@function list-last($list){ @return nth($list,length($list));}//移除数组某个元素@function remove($list, $value, $recursive: false) { $result: (); @for $i from 1 through length($list) { @if type-of(nth($list, $i)) == list and $recursive { $result: append($result, remove(nth($list, $i), $value, $recursive)); } @else if nth($list, $i) != $value { $result: append($result, nth($list, $i)); } } @return $result;}$list: a, b z, c, z, d, z, e, f;$new-list: remove($list, z); // a, b z, c, d, e, f;$new-list: remove($list, z, true); // a, b, c, d, e, f//在某一位置上删除元素@function remove-nth($list, $index) { $result: null; @if type-of($index) != number { @warn "$index: #{quote($index)} is not a number for `remove-nth`."; } @else if $index == 0 { @warn "List index 0 must be a non-zero integer for `remove-nth`."; } @else if abs($index) > length($list) { @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; } @else { $result: (); $index: if($index < 0, length($list) + $index + 1, $index); @for $i from 1 through length($list) { @if $i != $index { $result: append($result, nth($list, $i)); } } } @return $result;}$list: a, b, z, c, d, e, f;$new-list: remove-nth($list, 3); // a, b, c, d, e, f$new-list: remove-nth($list, 0); // error$new-list: remove-nth($list, -2); // a, b, z, c, d, f$new-list: remove-nth($list, -10); // error$new-list: remove-nth($list, 100); // error$new-list: remove-nth($list, zog); // error//对数组进行切片操作@function slice($list, $start: 1, $end: length($list)) { $result: null; @if type-of($start) != number or type-of($end) != number { @warn "Either $start or $end are not a number for `slice`."; } @else if $start > $end { @warn "The start index has to be lesser than or equals to the end index for `slice`."; } @else if $start < 1 or $end < 1 { @warn "List indexes must be non-zero integers for `slice`."; } @else if $start > length($list) { @warn "List index is #{$start} but list is only #{length($list)} item long for `slice`."; } @else if $end > length($list) { @warn "List index is #{$end} but list is only #{length($list)} item long for `slice`."; } @else { $result: (); @for $i from $start through $end { $result: append($result, nth($list, $i)); } } @return $result;}}$list: a, b, c, d, e, f;$new-list: slice($list, 3, 5); // c, d, e$new-list: slice($list, 4, 4); // d$new-list: slice($list, 5, 3); // error$new-list: slice($list, -1, 10); // error//反转数组@function reverse($list, $recursive: false) { $result: (); @for $i from length($list)*-1 through -1 { @if type-of(nth($list, abs($i))) == list and $recursive { $result: append($result, reverse(nth($list, abs($i)), $recursive)); } @else { $result: append($result, nth($list, abs($i))); } } @return $result;}$list: a, b, c d e, f, g, h;$new-list: reverse($list); // h, g, f, c d e, b, a$new-list: reverse($list, true); // h, g, f, e d c, b, a//函数全部来自 http://hugogiraudel.com/2013/08/08/advanced-sass-list-functions/ |
我们再创建一个页面看看unshift方法的效果
<!DOCTYPE html><html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div class="text">司徒正美</div> <a href="http://www.cnblogs.com/rubylouvre">这是链接</a> </body></html> |
@charset "utf-8";//必须设置了这个才能编译有中文的注释$list: b, c, d, e, f;@function unshift($list, $value) { @return join($value, $list);}$newlist: unshift($list, a); // a, b, c, d, e, fbody{ background: blanchedalmond;}.text{ &:after{ color:red; display:block; border:1px solid red; content: "#{$newlist}"; }}//------------------------------body { background: blanchedalmond; }.text:after { color: red; display: block; border: 1px solid red; content: "a, b, c, d, e, f"; } |
我们再定义一个将rem转换为px的函数：
@charset "utf-8";//必须设置了这个才能编译有中文的注释$pixelBase : 16; $px-only:true;@function parseInt($n) { @return $n / ($n * 0 + 1); }@function rem2px($values){ $list: (); @each $value in $values { //遍历数组 $unit : unit($value); //取得其单位 $val : parseInt($value); //取得其值 @if ($px-only) and ($unit == 'rem') { $list: append($list, ($val * $pixelBase) + px); } @else if($unit == 'px') or ($unit == 'rem'){ $list: append($list, $value); } @else { @warn 'There is no unit conversion for #{$unit}'; } } @return $list;}body * { margin:rem2px(1rem 2rem 20px 3rem); padding-bottom:rem2px(0.25rem); font-size:rem2px(0.875rem);}//------------------------------body * { margin: 16px 32px 20px 48px; padding-bottom: 4px; font-size: 14px; } |
有了函数，sass就真正算是一门编程语言了！~
转载自：