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!";
    }