sass语法整理

sass

1. 变量$baseColor:#333;
2. 导入引入文件@import ‘style’;

3. mixin@mixin left($value){ margin-left:$value;}
   .div{@include left(20px)}

   @mixin box-sizing ($sizing) {
   -webkit-box-sizing:$sizing;
   -moz-box-sizing:$sizing;
   box-sizing:$sizing;
   }
   .box-border{
   border:1px solid #ccc;
   @include box-sizing(border-box);
   }
   mixin支持不传参数默认参数：
   @mixin left($value：20px){ margin-left:$value;}
   .div{@include left()}
   4.继承.div1{ font-size:12px;}
   .div2{ @extend.div; margin-left:20px;}

   5.选择器嵌套：div{ li{} a{}}
   属性嵌套：div{ border:{color:#333}}
   6.颜色函数
   lighten(#cc3, 10%) // #d6d65c增加亮度
   　　darken(#cc3, 10%) // #a3a329降低 亮度
   　　grayscale(#cc3) // #808080
   　　complement(#cc3) // #33c
   　　
   a{
   color:$baseColor;
   &:hover{
   color:lighten($baseColor,10%);
   }
   }

   获取参数后面的百分比，在控制台输入sass -i之后先输入lightness($baseColor),再输入你想要得到的色值lightness(#dedede)，两者之差即是百分比值。

   &引用父级元素

   7.语句@if aaa{}@else{}
   @for $i form 1 to 10{}
   if(true,1px,2px)

$list: twitter,facebook,github,weibo;@for $i from 1 through length($list){ .icon-#{nth($list,$i)}{   background-postion: 0 -20px * $i; }}

注：乘法运算要单位一致
颜色可相加相乘：color: #010203 + #040506;=>color: #050709;
8. 转换css命令：进入到文件夹->$ sass <要编译的Sass文件路径>/style.scss <要输出CSS文件路径>/style.css
eg：$sass sass/style.scss css style.css 没写CSS文件路径则在当前目录存放css
$sass –watch sass/scss:css/css文件
->无scss css文件则表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中。

CSS 样式风格
嵌套输出方式 nested
展开输出方式 expanded
紧凑输出方式 compact
压缩输出方式 compressed
- sass –style compressed test.sass test.css
9. 多值变量$linkColor:#444 #666; color:nth($linkColor,1);
10. css3特有选择器: a>b{} 与 a b{}区别：A B选择所有后代元素，而A>B只选择一代；
A+B表示HTML中紧随A的所有B元素
[title~=flower] 选择 title 属性包含单词 “flower” 的所有元素。
11. 自定义function
@function widthFn($n) {
@return $n * $twoWidth + (n−1)∗oneWidth;
}
12. 你可以在变量尚未赋值前，通过在值的末尾处添加 !default 标记来为其指定。 也就是说，如果该变量已经被赋值， 就不会再次赋值， 但是，如果还没有被赋值，就会被指定一个值。
13. #{}
变量只能作为属性值来用，例如 color: $color;，那变量能不能用在选择器或者属性上面吗？
需要用#{}将变量值转换为字符串，这样就可以用在选择器和属性上了

14. !default用于组件式开发很赞，在公用变量里设置默认
$border-radius:4px !default;
.radius{@import: radius($border-radius)}
如果引入公用样式文件。radius之后想改变radius值，重写覆盖.radius{border-radius:5px}或者.radius{@import: radius(5px)}都会产生代码冗余。!dafaule就发挥独特特性了，只需要在引入公用样式文件之前设置\$border-radius:5px 即可不产生冗余的进行修改，好棒的
15. 占位符 %placeholder
可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。

%mt5 {  margin-top: 5px;}%pt5{  padding-top: 5px;}

这段代码没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码。很赞有木有

16.变量后面加…
在css3出现以前，你是绝对没有看到过的，因为它就是为css3而设计的。css3在给css带来翻天覆地的变化之外，也给sass的@mixin传递参数带来纠结了。一般来说我们的@mixin传递的参数是以,来分隔的，但是css3的一些属性可以设置多个值，并且多个值以,分开，如box-shadow:0 0 3px rgba(0,0,0,0.3),inset 0 0 3px rgba(255,255,255,0.3);这让@mixin如何给box-shadow传递参数啊。所以这种变量后面加…的变量就出现了。
@mixin box-shadow($shadow…){
-webkit-box-shadow:$shadow;
-moz-box-shadow:$shadow;
box-shadow:$shadow;
}