scss学习小记一

属性嵌套

• scss代码

  	.funky {
  	  font: {
  		family: fantasy;
  		size: 30em;
  		weight: bold;
  	  }
  	}
  

• 编辑后的代码

  	.funky {
  	  font-family: fantasy;
  	  font-size: 30em;
  	  font-weight: bold; }
  

• 当然也可以带包含自己的属性（目前还没有想到什么用的到的地方）

  	.funky {
  	  font: 20px/24px {
  		family: fantasy;
  		weight: bold;
  	  }
  	}
  	/*编译后的代码*/
  	.funky {
  	  font: 20px/24px;
  		font-family: fantasy;
  		font-weight: bold; }
  

变量

• 支持块级作用域，嵌套作用域内的变量只能用在该作用域内，将局部作用域变成全局变量可以在变量后面加上！global，下面见例子：

  	#main {
  	  $width: 5em !global;
  	  width: $width;
  	}
  
  	#sidebar {
  	  width: $width;
  	}
  	/*编译结果*/
  	#main {
  	  width: 5em;
  	}
  
  	#sidebar {
  	  width: 5em;
  	}
  

数据类型

• 数字： 1，2，12px
• 字符串，有引号和没有引号：'boo', foo
• 颜色： #ccc,red,rgba(255,255,255,1)
• 布尔： true/false
• 空值：null
• 数组，用逗号或者空格做分隔符：1，2，3/ 1 2 3
• maps,相当于js的对象:（key: value）

运算

• 所有数据类型都支持等于和非等于： == ！=
• 数字类型：+, -, *, /, <, >, <=, >=
  • 特别注意除法运算符，以下几种情况视为除法运算符
    • 如果值，或值的一部分，是变量或者函数的返回值
    • 如果值被圆括号包裹
    • 如果值是算数表达式的一部分
    • 见例子

      p {
      	font: 10px/8px;             // 不是运算符，起到分隔符的作用
      	$width: 1000px;
      	width: $width/2;            // 使用了变量
      	width: round(1.5)/2;        // 使用了函数，切函数有数字类型返回值
      	height: (500px/2);          // 使用了圆括号
      	margin-left: 5px + 8px/2px; // 使用了+号，是算数表达式的一部分
      	}
      

    • 如果同时使用变量，又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，使用插值语句#{}包裹变量

      	p {
      		$font-size: 12px;
      		$line-height: 30px;
      		font: #{$font-size}/#{$line-height};
      		}
      	p {
      		font: 12px/30px;
      	 }
      

• 颜色类型支持加法和乘法

  	p {
  	  color: #010203 * 2;
  	}
  	P{
  		color: #020406;
  	}
  	/*
  	分段运算
  	01 * 2 = 02
  	02 * 2 = 04
  	03 * 2 = 06
  	*/
  

• 字符串支持加法
  • 注意： 如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号

    // demo1:
    p:before{
    	  content: test + '测试';
    }
    // 编译
    p:before{
    	  content: test测试;
    }
    // demo2
    p:before{
    	  content: '测试' + test;
    }
     // 编译
    p:before{
    	  content: '测试test';
    }
    

  • #{}插值语句可以动态插入值，可以运算，也可以传入变量等

    $test: '测试'
    p:before {
    content: "I ate #{5 + 10} pies!";
    }
    p:after {
    content: "I ate #{$test} pies!";
    }
    // 编译
    p:before {
    content: "I ate 15 pies!";
    }
    p:after {
    content: "I ate 测试 pies!";
    }