Sass學習實踐筆記（二）

一、變量

sass：

/*定義變量，同時指定默認值*/
$baseLineHeight: 1.5 !default
/*用新值覆蓋默認值*/
$baseLineHeight: 2
/*調用變量
 * 編譯後的 line-height 爲 2，而不是默認的 1.5。
 * 默認變量在組件化開發的時候非常有用。*/
body
	line-height: $baseLineHeight
/*定義外層變量*/
$color: orange !default
.block
	/*調用外層變量*/
	background-color: $color
em
	$color: red
	/*定義內層變量，內層變量會在自己的作用域（變量聲明以後的同級及下級縮進）內覆蓋掉同名的外層變量*/
	div
		background-color: $color
		/*調用內層變量*/

css：

@charset "UTF-8";
/*定義變量，同時指定默認值 */
/*用新值覆蓋默認值 */
/*調用變量
 * 編譯後的 line-height 爲 2，而不是默認的 1.5。
 * 默認變量在組件化開發的時候非常有用。 */
body {
  line-height: 2; }

/*定義外層變量 */
.block {
  /*調用外層變量 */
  background-color: orange; }

em {
  /*定義內層變量，內層變量會在自己的作用域（變量聲明以後的同級及下級縮進）內覆蓋掉同名的外層變量 */ }
  em div {
    background-color: red;
    /*調用內層變量 */ }

/*# sourceMappingURL=style.css.map */

二、嵌套

sass：

/* 選擇器嵌套 
 * 避免選擇器嵌套：
 * 1、選擇器嵌套最大的問題是將使最終的代碼難以閱讀。開發者需要花費巨大精力計算不同縮進級別下的選擇器具體的表現效果。
 * 2、選擇器越具體則聲明語句越冗長，而且對最近選擇器的引用(&)也越頻繁。在某些時候，出現混淆選擇器路徑和探索下一級選擇器的錯誤率很高，這非常不值得。
 * 爲了防止此類情況，我們應該儘可能避免選擇器嵌套。然而，顯然只有少數情況適應這一措施。*/
nav
	a
		color: red
		header &
			font-style: italic
// 屬性嵌套
.box
	border:
		top: 1px solid red
		bottom: 1px solid green
// 僞類嵌套
.clearfix
	&:before, &:after
			content: ""
			display: table
	&:after 
			clear: both
			overflow: hidden

css：

@charset "UTF-8";
/* 選擇器嵌套
 * 避免選擇器嵌套：
 * 1、選擇器嵌套最大的問題是將使最終的代碼難以閱讀。開發者需要花費巨大精力計算不同縮進級別下的選擇器具體的表現效果。
 * 2、選擇器越具體則聲明語句越冗長，而且對最近選擇器的引用(&)也越頻繁。在某些時候，出現混淆選擇器路徑和探索下一級選擇器的錯誤率很高，這非常不值得。
 * 爲了防止此類情況，我們應該儘可能避免選擇器嵌套。然而，顯然只有少數情況適應這一措施。 */
nav a {
  color: red;
}
header nav a {
  font-style: italic;
}

.box {
  border-top: 1px solid red;
  border-bottom: 1px solid green;
}

.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}

/*# sourceMappingURL=style.css.map */

三、混合宏

sass：

// 混合宏：用來複用一段代碼
// 聲明混合宏
@mixin border-radiu
	-webkit-border-radius: 5px
	border-radius: 5px
// 帶參數混合宏
	// 傳一個參數
		// 傳參時賦默認值
@mixin border-radius($radius: 5px)
	-webkit-border-radius: $radius
	border-radius: $radius
		// 傳參時不賦值
@mixin b-r($radius)
	-webkit-border-radius: $radius
	border-radius: $radius
	// 傳多個參數
@mixin b-rs($radius, $ra)
	-webkit-border-radius: $radius
	border-radius: $ra
// 調用混合宏
button
	@include border-radiu
// 調用帶參數的混合宏，參數沒有值會賦予默認值
span
	@include border-radius
// 參數有值的話會覆蓋默認值
p
	@include border-radius(3px)
// 調用多個參數的混合宏。當混合宏傳的參數過多之時，可以使用...來替代。
// 下面這個混合宏帶有多個參數，可以用“…”來替代。當 $shadow的參數個數大於或等於1時，表示有多個陰影值，反之調用默認的參數值“ 0 0 4px rgba(0,0,0,.3) ”。
@mixin box-shadow($shadow...)
	@if length($shadow) >= 1
		-webkit-box-shadow: $shadow
		box-shadow: $shadow
	@else
		$shadow: 0 0 4px rgba(0,0,0,.3)
		-webkit-box-shadow: $shadow
		box-shadow: $shadow
nav
	@include box-shadow(0 0 1px rgba(#000,.5), 0 0 2px rgba(#000,.2))
header
	@include box-shadow


// 混合宏在實際編碼中給我們帶來很多方便之處，特別是對於複用重複代碼塊。但其最大的不足之處是會生成冗餘的代碼塊。比如在不同的地方調用一個相同的混合宏時，並不能智能的將相同的樣式代碼塊合併在一起。這也是Sass混合宏的最不足之處。
.box
	@include border-radius
.btn
	@include border-radius

css：

button {
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

span {
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

p {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

nav {
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
}

header {
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.box {
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.btn {
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

/*# sourceMappingURL=style.css.map */

四、擴展/繼承

sass：

// Sass中通過關鍵詞“@extend”繼承已存在的類樣式塊，從而實現代碼的繼承。
// Sass中的繼承，可以繼承類樣式塊中所有樣式代碼，而且編譯出來的 CSS 會將選擇器合併在一起，形成組合選擇器。
.btn
	border: 1px solid #ccc
	padding: 6px 10px
	font-size: 14px
.btn-primary
	background-color: #f36
	color: #fff
	@extend .btn
.btn-second
	background-color: orange
	color: #fff
	@extend .btn

css：

.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-second {
  background-color: orange;
  color: #fff;
}

/*# sourceMappingURL=style.css.map */

五、佔位符

sass：

// %placeholder聲明的代碼，如果不被@extend調用的話，不會產生任何代碼。
%mt5
	margin-top: 5px
%pt5
	padding-top: 5px
// 上面這段代碼沒有被@extend調用，並不產生任何代碼塊。只有通過@extend調用纔會產生代碼：
.btn
	@extend %mt5
	@extend %pt5
.block
	@extend %mt5
	span
		@extend %pt5
// 通過@extend調用的佔位符，編譯出來的代碼會將相同的代碼合併在一起。這也是我們希望看到的效果，也讓你的代碼變得更爲乾淨。

css：

.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}

/*# sourceMappingURL=style.css.map */

六、插值

sass：

// 使用#{}定義插值
/* 設置屬性 */
$properties: (margin, padding)
@mixin set-value($side, $value)
	@each $prop in $properties
		#{$prop}-#{$side}: $value
.login-box
	@include set-value(top, 14px)
/* 構建選擇器 */
@mixin generate-sizes($class, $small, $medium, $big)
	.#{$class}-small
		font-size: $small
	.#{$class}-medium
		font-size: $medium
	.#{$class}-big
		font-size: $big
@include generate-sizes("header-text", 12px, 20px, 40px)
/* 在@extend中使用插值 */
%updated-status
	margin-top: 20px
	background: #f00
.selected-status
	font-weight: bold
$flag: "status"
.navigation
	@extend %updated-#{$flag}
	@extend .selected-#{$flag}
	

css：

@charset "UTF-8";
/* 設置屬性 */
.login-box {
  margin-top: 14px;
  padding-top: 14px;
}

/* 構建選擇器 */
.header-text-small {
  font-size: 12px;
}

.header-text-medium {
  font-size: 20px;
}

.header-text-big {
  font-size: 40px;
}

/* 在@extend中使用插值 */
.navigation {
  margin-top: 20px;
  background: #f00;
}

.selected-status, .navigation {
  font-weight: bold;
}

/*# sourceMappingURL=style.css.map */

七、註釋

sass：

// 這種註釋不會輸出
/* 這種註釋會輸出到編譯後的css文件中 */

css：

@charset "UTF-8";
/* 這種註釋會輸出到編譯後的css文件中 */

/*# sourceMappingURL=style.css.map */

八、數據類型

sass：

//數據類型
//Sass和JavaScript語言類似，也具有自己的數據類型，在Sass中包含以下幾種數據類型：
/*
 * 1、數字:如，1、2、13、10px；
 * 2、字符串：有引號字符串或無引號字符串，如，"foo"、'bar'、baz；
 * 3、顏色：如，blue、#04a3f9、rgba(255,0,0,0.5)；
 * 4、布爾型：如，true、false；
 * 5、空值：如，null；
 * 6、值列表：用空格或者逗號分開，如，1.5em 1em 0 2em、Helvetica,Arial,sans-serif。*/
// SassScript也支持其他CSS屬性值（propertyvalue），比如Unicode範圍，或!important聲明。然而，Sass不會特殊對待這些屬性值，一律視爲無引號字符串(unquotedstrings)。
// 除了字符串和值列表數據類型，其它類型與JavaScript中的用法一致。


// 字符串
// 在編譯CSS文件時不會改變其類型。只有一種情況例外，使用#{}插值語句時，有引號字符串將被編譯爲無引號字符串，這樣方便了在混合宏中引用選擇器名。
@mixin firefox-message($selector)
	body.firefox #{$selector}:before
		content: "Hi, Firefox users!"
@include firefox-message(".header")
// 值列表
// 所謂值列表(lists)是指Sass如何處理CSS中：
// margin: 10px 15px 0 0
// 或者：
// font-face: Helvetica, Arial, sans-serif
// 像上面這樣通過空格或者逗號分隔的一系列的值。
// 事實上，獨立的值也被視爲值列表，即只包含一個值的值列表。
// 值列表中可以再包含值列表，比如 1px 2px, 5px 6px 是包含 1px 2px 與 5px 6px 兩個值列表的值列表。如果內外兩層值列表使用相同的分隔方式，要用圓括號包裹內層，所以也可以寫成 (1px 2px) (5px 6px)。
// 可以用()表示空的列表，這樣不可以直接編譯成CSS，比如編譯font-family:()時，Sass將會報錯。如果值列表中包含空的值列表或空值，編譯時將清除空值，比如1px 2px () 3px 或 1px 2px null 3px。

css：

@charset "UTF-8";
/* 1、數字:如，1、2、13、10px；
 * 2、字符串：有引號字符串或無引號字符串，如，"foo"、'bar'、baz；
 * 3、顏色：如，blue、#04a3f9、rgba(255,0,0,0.5)；
 * 4、布爾型：如，true、false；
 * 5、空值：如，null；
 * 6、值列表：用空格或者逗號分開，如，1.5em 1em 0 2em、Helvetica,Arial,sans-serif。 */
body.firefox .header:before {
  content: "Hi, Firefox users!";
}

/*# sourceMappingURL=style.css.map */

九、運算

sass：

// 加法
// css中的長度單位分爲兩類
// 一類是相對長度單位：em、ex、px、%
// 一類是是絕對長度單位：in、cm、mm、pt、pc
// 不同絕對單位的長度值可以相加
// 絕對單位的長度值和相對單位的長度值可以相加
// 不同相對單位的長度值不能相加
.box
	width: 20px + 8in
// 以下會報錯
// width: 20px + 1em

// 減法
// 長度的減法規則和加法相同
$full-width: 960px
$sidebar-width: 200px
.content
	width: $full-width - $sidebar-width

// 乘法
// 參與乘法運算的雙方最多隻能有一個帶單位

// 除法
p
	// 以下是純css，'/'不是除法符號
	font: 10px / 8px
	// 當數值存儲在一個變量中時，'/'是除法符號
	$width: 1000px
	width: $width / 2
	// 當數值作爲函數的返回值時，'/'是除法符號
	font-size: round(1.5) / 2
	// 當使用圓括號外包表達式時，'/'是除法符號
	opacity: ( 15px / 100px )
	// 當表達式中有其他運算符時，'/'是除法符號
	margin-left: 5px + 8px/2px
// 模運算
// “%”被當作模運算符的情況參照“/”

// 在Sass中除了可以使用數值進行運算之外，還可以使用變量進行計算，這使得Sass的數學運算功能變得更加實用。
// 在Sass運算中數字運算是較爲常見的，數字運算包括前面介紹的：加法、減法、乘法和除法等運算，而且還可以通過括號來修改他們的運算先後順序。

// 顏色運算
// 顏色的四則運算是將r、g、b分別進行計算，規定計算結果大於ff時，以ff爲計算結果，計算結果小於00時同理。
p
	color: #010203 + #040506
	background-color: #010203 * 2

// 字符運算
// 在Sass中可以通過加法符號“+”來對字符串進行連接。
.box::before
	content: "Hello" + "" + "Sass!"
div
	cursor: e + -resize
p:before
	content: "Foo" + Bar
	font-family: sans- + "serif"
// 布爾運算
// SassScript支持布爾型的and、or以及not運算

css：

.box {
  width: 788px;
}

.content {
  width: 760px;
}

p {
  font: 10px/8px;
  width: 500px;
  font-size: 1;
  opacity: 0.15;
  margin-left: 9px;
}

p {
  color: #050709;
  background-color: #020406;
}

.box::before {
  content: "HelloSass!";
}

div {
  cursor: e-resize;
}

p:before {
  content: "FooBar";
  font-family: sans-serif;
}

/*# sourceMappingURL=style.css.map */