sass

測試結構
	d:\phpstudy\www\test\
		css
		images
		js
		scss (測試統一用scss格式, 而非sass)

用sublime text3執行輸出與同步css
	安裝相關插件sass, Libsass Build, SublimeOnSaveBuild

	配置輸出路徑與輸出格式(Libsass Build)
		Preferences > Package Settings > Libsass Build > Settings - Default
		複製全部, 粘貼至Settings - User
		修改路徑"dir"的值, 如"../css"
		修改"style"的值爲美化版格式"expanded", 或壓縮格式"compressed"
		輸出與同步快捷鍵 Ctrl + B

	配置自動同步(SublimeOnSaveBuild)
		同上, 複製對應的"Settings - Default"粘貼至對應的"Settings - User"
		修改"css|js|sass|less|scss", 爲"scss"
		首次啓動編譯器, 先執行一次 Ctrl + B, 後續Ctrl + S即實現自動同步

	定義背景縮寫
		background: url(xxx) no-repeat 0 -1px / 100%; (當"/"左邊爲負值, 右邊爲數值, 按Ctrl + B無法同步)

		@function _url($a, $b: no-repeat, $c: 0 0, $d: contain) {
			@return url($a) $b $c / $d;
		}
		background: _url('xxx');

用命令執行輸出與同步css
	下載並安裝Ruby
		http://rubyinstaller.org/downloads

	打開Start Command Prompt with Ruby

	安裝sass
		gem sources --remove https://rubygems.org/
		gem sources -a https://gems-ruby-china.b0.upaiyun.com/
		gem install sass

	scss文件最頂部設置 @charset "UTF-8", 避免內容含有中文導致報錯(如中文註釋, 中文字體)

	指定到項目文件下
		d:
		cd d:\phpstudy\www\test

	將scss格式編譯成css格式, 並輸出到css文件夾下或同步css文件夾裏對應css
		sass scss/test.scss css/test.css

	設置保存scss時自動同步至css, --watch scss路徑:css路徑
		sass --watch scss:css

嵌套
	ul {
		width: 100px;

		li {

		}
	}

$
	$xx: 100;

	{
		width: $xx;
	}

#
	$xx: width;

	.#{$xx} {
		#{$xx}: 100;
	}

%
	%xx {
		color: red;
	}

	{
		@extend %xx;
	}

&
	{
		&:after {
			content: '';
		}
		&:first-child {

		}
	}

@content
	@mixin max-screen($xx){
		@media only screen and (max-width: $xx) {
			@content;
		}
	}

	@include max-screen(768px) {
		body {color: red}
	}

@mixin
	@mixin xx() {
		display: -webkit-x;
		display: x;
	}

	@include xx;

return
	@function xx($yy) {
		@return $yy / 100 * 1rem;
	}
	
	{
		width: xx(10);
	}

在新的scss裏導入base.scss中的內容
	@import 'base';