前端Scss常见语法记录

1. sass与scss区别

文件名称的区别；scss 需要使用分号和花括号。

sass举例：
		#sidebar
		  width: 30%
		  background-color: #faa
scss举例：
	   	#sidebar {
			  width: 30%;
			  background-color: #faa;
		}

2.注释

多行注释 /* */
以及单行注释 //
前者会完整输出到编译后的 CSS 文件中，而后者则不会

3. 嵌套

在嵌套的代码块内，可以使用 & 引用父元素。

div {
　　hi {
　　  color:red;
　　}
　　&:hover { 
　　  color: #ffb3ff;
　　}
}

使用 @at-root 跳出选择器嵌套

.parent{
     @at-root .child{
       color: gray;
     }
   }

编译结果为

 .child{
     color: gray;
   }

4. 变量（具有作用域）

以 $ 开头，后为变量名；

$red: #1875e7;　
div {
　color : $red;
}

加 !default为默认值（使用之前变量已赋值，就不用默认值，如果没有，则使用默认值）

$content:"softwhy.com";
$content: "antzone" !default;
#main {
  content: $content;	// 这时content值为softwhy.com。
}

将局部变量转换为全局变量可以添加 !global

@mixin themeify($themesList) {
  @each $themeName, $theme in $themesList {
  	// 设置全局变量$theme，用于themed函数使用
    $currentTheme: $theme !global;
  }
}
@function themed($key) {
  @return map-get($currentTheme, $key);
}

5.数据类型

1. 数字： 1, 2, 13, 10px
2. 颜色: blue, #04a3f9, rgba(255,0,0,0.5)
3. 布尔型：true, false
4. 空值：null
5. 字符串： 有引号字符串与无引号字符串，“foo”, ‘bar’, baz
   使用 #{} 的时候，有引号字符串编译为无引用字符串

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");

6. 数组 (list)：用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif

数组函数：
 - length($list) // 返回$list的长度
 - nth($list,index) // 返回$list的第index项
 - set-nth($list,index,value) // 设置$list的第index项为value
 - append($list,value,separator:auto) // 给数组用separator（comma,space）方式添加value

7. 对象（必须被圆括号包围）：相当于 JavaScript 的 object，(key1: value1, key2: value2)

对象函数：
 - map-merge($obj1, $obj1)	// 将 $obj1和 $obj1合并,正常
 - map-get($obj1, key)	// 但会$obj1中key的值，如果没有就返回null
 - map-set($obj1, key, value)	//把obj1的key对应的值被修改成value，支持map.set($map, $keys..., $value)写法，即把多个key对应的都修改为同一值
 - map-keys($obj1)	// 获取obj1中key组成的数组
 - map-values($obj1) 	// 获取obj1中value组成的数组
 - map--remove($obj1, keys...)	// 移除 map 中的 keys，多个 key 使用逗号隔开。

6.继承（@extend）

使用 @extend命令：继承另外一个选择器所有的样式

.class1 {
　　border: 1px solid #ddd;
}
.class2 {
　　@extend .class1;
　　font-size:120%;
}

7. 占位符选择器（%）

当占位符选择器单独使用时（未通过 @extend 调用），不会编译到 CSS 文件中

8.混合（@mixin + @include）

使用 @mixin命令，定义一个代码块。使用 @include命令进行调用。
进行代码重用，可传递参数。

@mixin border($vert, $horz, $radius: 10px) { //radius默认值为10px
　　border-#{$vert}-#{$horz}-radius: $radius;
　　-moz-border-radius-#{$vert}#{$horz}: $radius;
　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
#footer { 
	@include border(top, left, 5px); 
}

9.向混合样式中导入内容（ @content）

在引用混合样式的时候，可以先将一段代码导入到混合指令中，然后再输出混合样式，额外导入的部分将出现在 @content

$color: green;
@mixin button($color: #fff) {  
    color: $color;  
    @content;  
    border: 1px solid $color;  
}
.button-green {  
    @include button {
    	background: $color;
    }  
}

// 结果
.button-green {  
    color: #fff;  
    background: green;  
    border: 1px solid #fff;  
}

10.函数（ @function）

@function double($n) {
　　@return $n * 2;
}
#sidebar {
　　width: double(5px);
}

11.总结@extent，@mixin，@function的区别

1. @extent：主要用于继承另一构造器的全部属性（注意占位符选择器（%），没有通过extent引用的时候不会编译）
2. @minxin：本质也是为了某一选择器使用设置好的属性，但是与@extent的区分：首先@mixin主要的优势就是它能够接受参数；其次他们的编译风格会不一致；并且@mixin支持通过@content传递样式片段；详细可见：extent和mixin区别
3. @function：主要是通过@return来输出返回值，并且函数主要适用于处理运算相关

12.运算

1. 条件语句（@if， @else if， @else）

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

2. 三目判断($condition, $if_true, $if_false)

三个参数分别表示：条件，条件为真的值，条件为假的值。

$boolean:false;
.border{
	font-size:if($boolean,10px,20px)
}

3. 循环(@for和@each)

@for $var from through 或者 @for $var from to
to与through区别是to不包括值

@for $i from 1 through  10 {
  .padding-#{$i} {
    padding: #{$i}px;
  }
}
body,
#app {
  @extend .padding-10;
}

@each $var in list

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}
//结果
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.2em;
}

4. 循环(@while)

@while 指令重复输出格式直到表达式返回结果为 false

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}
//结果
.item-6 {
  width: 12em; 
}
.item-4 {
  width: 8em;
}
.item-2 {
  width: 4em;
}