sass各种基础语法

@charset ‘utf-8’;

/*一、===================================================================变量*/
/SASS允许使用变量，所有变量以$开头。/
$blue: #1875e7;
div {
color: $blue;
}
/如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。/
KaTeX parse error: Expected '}', got '#' at position 36: …d { 　　　　border-#̲{side}-radius: 5px;
}

/------------------------------------------------计算功能/
/* SASS允许在代码中使用算式：*/
$height: 10px;
.style1 {
margin: (14px/2);
top: 50px + 100px;
right: $height * 10;
}

/*二、========================================================================嵌套*/
/SASS允许选择器嵌套。比如，下面的CSS代码：/
/div h1 {
　　　　color : red;
}/

/可以写成：/
div {
h1{
color:red;
}
}

/属性也可以嵌套，比如border-color属性，可以写成：/
/注意，border后面必须加上冒号。/

p{
border:{
color:red;
}
}
/* 在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：*/
a{
&:hover{
color:#ffb3ff;
}
}

/*三、===============================================================================注释
SASS共有两种注释风格。
/* 标准的CSS注释 '/* comment /
/，会保留到编译后的文件。/
/单行注释 ‘// comment’，只保留在SASS源文件中，编译后被省略。/
/在’/’’
后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。/

/*// 单行注释 /
/ 多行注释 /
/!
重要注释
*/

/*四、============================================================================代码的重用
-----------------------------------------------继承
SASS允许一个选择器，继承另一个选择器。比如，现有class1：*/
.class1 {
border:1px solid #ddd;
}

/class2要继承class1，就要使用@extend命令：/
.class2 {
@extend .class1;
font-size: 120%;
}

/--------------------------------------------------Mixin
Mixin有点像C语言的宏（macro），是可以重用的代码块。
使用@mixin命令，定义一个代码块。/
@mixin left {
float: left;
margin-left: 10px;
}

/使用@include命令，调用这个mixin。/
div{
@include left;
}

/mixin的强大之处，在于可以指定参数和缺省值。/
@mixin left($value: 10px){
float: left;
margin-right: $value;
}

/使用的时候，根据需要加入参数：/
div{
@include left(20px);
}

/下面是一个mixin的实例，用来生成浏览器前缀。/
@mixin rounded($vert,$horz,KaTeX parse error: Expected '}', got '#' at position 27: …x){ border-#̲{vert}-#{$horz}-radius: KaTeX parse error: Expected 'EOF', got '#' at position 25: … -moz-border-#̲{vert}-#{$horz}-radius: KaTeX parse error: Expected 'EOF', got '#' at position 28: …-webkit-border-#̲{vert}-#{$horz}-radius: $radius;
}
/使用的时候，可以像下面这样调用/
.navbar li { @include rounded(top,left); }
.footer { @include rounded(top, left, 5px);}

/五、颜色函数*/
/* SASS提供了一些内置的颜色函数，以便生成系列颜色。*/
/lighten(#cc3,10%);/
/darken(#cc3, 10%) // #a3a329/
/grayscale(#cc3) // #808080/
/complement(#cc3) // #33c/
.color1 {
color: lighten(#cc3, 10%);
}
.color2 {
color: darken(#cc3, 10%);
}
.color3 {
color: grayscale(#cc3);
}
.color4 {
color: complement(#cc3);
}
/*六、=========== 插入文件
@import命令，用来插入外部文件。
@import “path/filename.scss”;/
@import “2.scss”;
/如果插入的是.css文件，则等同于css的import命令。/
/@import “foo.css”;/

/*七、====================================================================高级用法*/
/5.1 ------------------条件语句/
/@if可以用来判断：/
p{
@if 1 + 1 ==2 { border: 1px solid;}
@if 5 < 3 { border: 2px dotted;}
}

/配套的还有@else命令：/
p{
@if lightness($blue) > 30%{
background-color: #000;
}@else{
background-color: #fff;
}

}

/*5.2===========================================================循环语句*/
/SASS支持for循环：/
@for KaTeX parse error: Expected '}', got '#' at position 30: … { .border-#̲{i}{
border: #{$i}px solid blue;
}
}

/也支持while循环/
$i:6;
@while KaTeX parse error: Expected '}', got '#' at position 19: … 0 { .item-#̲{i}{ width: 2em * $i;}
$i: $i - 2;
}

/each命令，作用与for类似：/
@each KaTeX parse error: Expected '}', got '#' at position 26: …a,b,c,d { .#̲{member}{
background-images:url("/image/#{$member}.jpg");
}
}

/*===============================================================5.3 自定义函数
---------------------------SASS允许用户编写自己的函数。*/
@function double($n){
@return $n * 2;
}
#sidebar {
width: double(5px);
}