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