sass文档摘记

本文主要是介绍sass文档摘记，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

过了一遍sass文档，自己过滤了一些觉得不太推荐使用的内容，记录下以前不知道的内容
下文中例子都摘自https://www.sass.hk/docs/

1.变量

$nav-color: #F90;
nav {$width: 100px;width: $width;color: $nav-color;
}

变量可以引用别的变量
中划线和下划线是互通的，也就是说，$a_b和$a-b是同一个变量，最好不要使用这个规则
变量默认值，$fancybox-width: 400px !default;
!global可以将局部变量转换为全局，最好不要用
#{}引用的变量将编译为无引号字符，可以避免运行运算符

p {$font-size: 12px;$line-height: 30px;font: #{$font-size}/#{$line-height}; // 输出12px/30px; font: $font-size/$line-height; // 输出0.4
}

2.嵌套

属性也可以嵌套，但是个人觉得别用为好

nav {border: 1px solid #ccc {left: 0px;right: 0px;}
}

3.@import

不同于css，sass在生成css时就会把文件导入
局部文件的文件名以下划线开头，局部文件，不需要单独生成css的文件，比如themes/_night-sky.scss，这样导入@import “themes/night-sky”;
导入文件也可以嵌套，.blue-theme {@import “blue-theme”}
包含media queries，@import仅作为普通的CSS语句，http://开头，url()地址，也是一样
不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import

4.mixin

mixin可以传参

@mixin link-colors($normal, $hover, $visited) {color: $normal;&:hover { color: $hover; }&:visited { color: $visited; }
}
a {@include link-colors(blue, red, green);
}//Sass最终生成的是：
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }// 这样写可以忽略传参的顺序
a {@include link-colors($normal: blue,$visited: green,$hover: red);
}// 这样写可以给参数赋默认值
@mixin link-colors($normal,$hover: $normal,$visited: $normal)
{color: $normal;&:hover { color: $hover; }&:visited { color: $visited; }
}// 不定参数
@mixin box-shadow($shadows...) {box-shadow: $shadows;
}
.shadows {@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
// 另一种情况
@mixin colors($text, $background, $border) {color: $text;background-color: $background;border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {@include colors($values...);
}

@content用来传递mixin的内容

@mixin apply-to-ie6-only {* html {@content;}
}
@include apply-to-ie6-only {#logo {background-image: url(/logo.gif);}
}
//输出
* html #logo {background-image: url(/logo.gif);
}// @content的变量值是@include定义的时候值
$color: white;
@mixin colors($color: blue) {background-color: $color;@content;border-color: $color;
}
.colors {@include colors { color: $color; }
}
// 输出
.colors {background-color: blue;color: white; // 注意这里border-color: blue;
}

@content的目的，使用media-queries，animation的keyframes等块内容的时候

@mixin keyframes($name){ @keyframes #{$name} { @content; } 
} 
@include keyframes(show){ 0% { opacity:0; } 100% { opacity:1; } 
}

@mixin 可以用 = 表示， @include 可以用 + 表示

5.extend

慎用，尤其对于后代选择器

.error {border: 1px solid red;background-color: #fdd;
}
.seriousError {@extend .error;border-width: 3px;
}// 下面这句将会应用到.seriousError a，尤其需要注意
.error a{  color: red;font-weight: 100;
}
// 也就是说生成后是这样的
.error a, .seriousError a {color: red;font-weight: 100; 
}// %作为占位符
#context a%extreme {color: blue;
}
.notice {@extend %extreme;
}
// 输出
#context a.notice {color: blue;
}// 听说这种情况使用%占位比mixin要好，但是%的块里面是不可以用&的，使用了也不会生效
// 参考http://www.w3cplus.com/preprocessor/8-tips-help-get-best-sass.html
%bg-image { width: 100%; background-position: center center; background-size: cover; background-repeat: no-repeat;
} 
.image-one { @extend %bg-image; background-image:url("/img/image-one.jpg");
} 
.image-two { @extend %bg-image; background-image:url("/img/image-two.jpg");
}

在指令中使用 @extend 时，必须延伸给相同指令层中的选择器

// 可以
@media print {.error {border: 1px #f00;background-color: #fdd;}.seriousError {@extend .error;border-width: 3px;}
}// 不行
.error {border: 1px #f00;background-color: #fdd;
}@media print {.seriousError {// INVALID EXTEND: .error is used outside of the "@media print" directive@extend .error;border-width: 3px;}
}

6.指令

@at-root 让规则生成在文档的root层级下，不推荐使用
@debug @warn @error 调试用
@if 分支
@for @each @while 循环
其中each还可以写成这样

@each $animal, $color, $cursor in (puma, black, default),(sea-slug, blue, pointer),(egret, white, move)
以及这样
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em)        再看一个@while的例子，变量可以很灵活
$i: 6;
@while $i > 0 {.item-#{$i} { width: 2em * $i; }$i: $i - 2; // 注意这里
}

@function 自定义函数

$width: 40px;@function grid-width($n) {@return $n * $width + ($n - 1);
}#sidebar { width: grid-width(5); }

这篇关于sass文档摘记的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---