过了一遍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); }