Scss預處理器的使用總結

變量 、嵌套、Mixin混合、function函數、插值

變量及文件導入

通過$定義變量

$white:#fff;
$black:#000;

變量引用

.containner{
	color:$black;
}

通常我們會單獨創建一個局部scss文件來定義這些變量 例如 _varables.scss
varables前面的下划線用來區分這是局部文件，不會生成對應的css文件，通過@import方式在其他文件中導入該文件（下划線可以省略）

@import 'varables';

嵌套

例如我們有這樣一個html結構

<div class="containner">
		<div class="banner"></div>
	</div>

使用嵌套語法可以寫成：

.containner{
	background: #eee;
	color:$black;
	.banner{
		background: red;
	}
}

最后編譯成css：

.containner {
  background: #eee;
  color: #000; }
  .containner .banner {
    background: red; }

高級用法

&、>、+、~

使用&符合使得區分元素不以后代選擇器的方式連接，例如鏈接使用到的hover效果

a{
		color:red;
		&:hover{
			color:blue;
		}
	}

編譯后

.containner a:hover {
      color: blue; }

mixin混合

如果我們有多個地方使用到相同的樣式，我們就可以將其寫成一個mixin方法，然后在不同的地方去使用它

一般通過@mixin來定義一個函數，@include來引用

例如定義一個用於清除浮動的mixin方法

 @mixin clearfix() {
  &::after {
    display: block;
    clear: both;
    content: "";
  }
}

我們就可以這樣使用

.list{
		list-style: none;
		@include clearfix();
		.item{
			float: left;
		}
	}

mixin方法傳參

類似JavaScript函數我們可以傳遞參數

@mixin colorlink($normal, $hover, $visited){
	color: $normal;
	  &:hover { color: $hover; }
	  &:visited { color: $visited; }
}

使用

@include colorlink(blue,red,green);

也可以使用這種方式，不用區分參數順序

@include colorlink(
				$normal: blue,
			      $visited: green,
			      $hover: red
			);

設置默認參數值

通過以下方式來這是默認參數值

@mixin size($size:50px){
	font-size: $size;
}

調用的時候我們可以根據需求來決定是否傳遞參數

.title{
		// @include size();
		@include size(20px);
	}

@fuction和@mixin

區別：

• sass本身就有一些內置的函數，方便我們調用，如強大的color函數，還有darken、rgba、ie-hex-str、percentage、lighten、length、nth、unit、unitless等
• 其次就是它返回的是一個值，而不是一段css樣式代碼什么的

內置函數

1、rgba

rgba(blue, 0.2) => rgba(0, 0, 255, 0.2)

2、percentage

將一個沒有單位的數字轉成百分比形式

percentage(0.2) => 20%

通過@function來自定義函數

// px轉em 
@function pxToEm($px, $base: 16) { 
	@return ($px / $base) * 1em; 
}

調用

p{
	font-size:pxToEm(20);
}

解析

p{
	font-size: 1.25em;
}

其他

1、插值語句 #{}
通過 #{} 插值語句可以在選擇器或屬性名中使用變量：

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

生成

p.foo {
  border-color: blue; }

2、使用@for指令輸出重復格式內容

@for $i from 1 through 28
{
    .bg-#{$i}
    {
      background: url(brand_day_review#{$i}.jpg) no-repeat center / 1560px auto;
    }
}

生成

.containner .bg-1 {
    background: url(brand_day_review1.jpg) no-repeat center/1560px auto; }
  .containner .bg-2 {
    background: url(brand_day_review2.jpg) no-repeat center/1560px auto; }
  .containner .bg-3 {
    background: url(brand_day_review3.jpg) no-repeat center/1560px auto; }
  .containner .bg-4 {
    background: url(brand_day_review4.jpg) no-repeat center/1560px auto; }
  .containner .bg-5 {
    background: url(brand_day_review5.jpg) no-repeat center/1560px auto; }

除了@for，其他的還有@if 、@each、@while等，這些都屬於控制指令

參考閱讀

sass中文網
組織你的Sass文件
sass揭秘之@mixin，%，@function
Sass基礎——Rem與Px的轉換