sass的基本用法
变量 嵌套 ，混入，继承
1.变量
！！！普通变量$blue : #1875e7; div {color : $blue;}！！！特殊变量//如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。$side : left;.rounded {border-#{$side}-radius: 5px;}！！！多值变量
//a.scss//一维变量
$borderL:20px 30px 40px 50px;
p{font-size:nth($borderL,1)
}
h1{font-size:nth($borderL,2)}
h2{font-size:nth($borderL,3)
}
//a.css
p {font-size: 20px;
}h1 {font-size: 30px;
}h2 {font-size: 40px;
}！！！二维变量
//a.scss
//二维变量
$borderL:(20px 30px)(40px 50px);
p{margin:nth($borderL,1)
}
h1{margin:nth($borderL,2)}//a.css
p {margin: 20px 30px;
}h1 {margin: 40px 50px;
}
2.计算功能
/*------------------------------------------------计算功能*/
/* SASS允许在代码中使用算式：*/
$height: 10px;
.style1 {margin: (14px/2);top: 50px + 100px;right: $height * 10;
}!default默认值//a.scss
$_columns: 12 !default;
$_column-width: 60px !default;
$_gutter: 20px !default;
$_gridsystem-width: $_columns * ($_column-width + $_gutter);
p{font-size:$_gridsystem-width;
}//a.css
p {font-size: 960px;
}
3.嵌套功能
！！！选择器嵌套/*SASS允许选择器嵌套。比如，下面的CSS代码：*/
/*div h1 {color : red;
}*//*可以写成：*/
div {h1{color:red;}
}！！！属性嵌套/*属性也可以嵌套，比如border-color属性，可以写成：*//*注意，border后面必须加上冒号。*/p{border:{color:red;}
}
/* 在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：*/
a{&:hover{color:#ffb3ff;}
}！！！！！跳出嵌套的命运@at-root//a.scssh1{font-size:20px;@at-root h2{font-size:30px}
}//a.cssh1 {font-size: 20px;
}
h2 {font-size: 30px;
}
4.继承 sass允许一个选择器继承另外一个选择器
.class1 {border: 1px solid #ddd;}
//class2要继承class1，就要使用@extend命令：.class2 {@extend .class1;font-size:120%;}
//编译出来.class2 {border: 1px solid #ddd;font-size:120%;}
5.混合 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);}//编译后
div {float: left;margin-right: 20px;}/*下面是一个mixin的实例，用来生成浏览器前缀。*/
@mixin rounded($vert,$horz,$radius: 10px){border-#{$vert}-#{$horz}-radius: $radius;-moz-border-#{$vert}-#{$horz}-radius: $radius;-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
/*使用的时候，可以像下面这样调用*/
.navbar li { @include rounded(top,left); }
.footer { @include rounded(top, left, 5px);}
6.条件语句，循环语句
/* ------------------条件语句*/
/*@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;}}/*===========================================================循环语句*/
/*SASS支持for循环：*/
@for $i from 1 to 10 {.border-#{$i}{border: #{$i}px solid blue;}
}/*也支持while循环*/
$i:6;
@while $i > 0 {.item-#{$i}{ width: 2em * $i;}$i: $i - 2;
}/*each命令，作用与for类似：*/
@each $member in a,b,c,d {.#{$member}{background-images:url("/image/#{$member}.jpg");}
}
7.自定义函数
@function double($n) {@return $n * 2;}#sidebar {width: double(5px);}
8.三目
//a.scssp{ font-size:if(true, 12px,14px); }
//a.cssp { font-size: 12px; }
9.导入 @import 路径
//a.scssbody{font-size: 12px;
}
//b.scss
@import "a";
p{background: #0982c1;
}//编译得到的b.css
body{font-size:12px}
p{background:#0982c1}一般来说基础的文件命名需要以'_' 开头，如 _partial.scss。这种文件在导入的时候可以不写下划线及后缀，可写成@import "partial"。但是倒入CSS文件的话，就需要“文件名+后缀”了。@import ‘partial’ //导入名为“_partial.scss”的文件
@import ‘toolbar.css’ //导入名为“toolbar.css”的文件
10.颜色函数
lighten(#cc3, 10%) // #d6d65cdarken(#cc3, 10%) // #a3a329grayscale(#cc3) // #808080complement(#cc3) // #33c$box-color: red;
ul {color: $box-color;
}
li {background-color: darken($box-color,30%);
}//编译后：
ul {color: red;
}
li {background-color: #660000;
}